Skip to content

Commit 38e1745

Browse files
author
Jacob Shirley
committed
Initial commit.
0 parents  commit 38e1745

File tree

869 files changed

+105517
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

869 files changed

+105517
-0
lines changed

‎assets/js/script.js‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
$.widget("custom.sliderEx", $.ui.slider, {
2+
_create: function() {
3+
this.options.title = this.options.title || this.element.attr("title");
4+
5+
this.options._valueDiv = $("<div class='slider-val'></div>");
6+
7+
var title = this.options.title;
8+
var parent = $("<div class='slider-comp'></div>");
9+
10+
parent.insertBefore(this.element);
11+
parent.append("<div class='slider-title'>"+title+"</div>");
12+
13+
this.element.addClass("slider");
14+
15+
parent.append(this.element.detach());
16+
parent.append(this.options._valueDiv);
17+
18+
this.options._valueDiv.text(this.options.value);
19+
20+
return this._super();
21+
},
22+
_slide: function() {
23+
this._superApply(arguments);
24+
25+
this.options._valueDiv.text(this.options.value);
26+
}
27+
});
28+
29+
function getRandomColor() {
30+
var letters = '0123456789abcdef'.split('');
31+
var color = '';
32+
for (var i = 0; i < 6; i++) {
33+
color += letters[Math.floor(Math.random() * 16)];
34+
}
35+
return color;
36+
}
37+
38+
function toRadians(degrees) {
39+
return degrees * (Math.PI/180);
40+
}
41+
42+
var canvas = $("#tree-canvas");
43+
var w = canvas.width();
44+
var h = canvas.height();
45+
46+
canvas.attr("width", w);
47+
canvas.attr("height", h);
48+
49+
var ctx = canvas[0].getContext("2d");
50+
51+
function randomRange(min, max) {
52+
return min+(Math.random()*(max-min));
53+
}
54+
55+
function drawTree(x, y, radius, startAngle, incAngle, randomAngle, startLength, lengthMod, startLineWidth, lineWidthMod, trunkColor, leafColor, leafColorStartRadius, curRadius) {
56+
if (curRadius < radius) {
57+
var nx = x+(Math.sin(startAngle)*startLength);
58+
var ny = y-(Math.cos(startAngle)*startLength);
59+
60+
if (curRadius < leafColorStartRadius) {
61+
ctx.strokeStyle = trunkColor;
62+
} else if (curRadius >= leafColorStartRadius) {
63+
ctx.strokeStyle = leafColor;
64+
}
65+
66+
ctx.lineWidth = startLineWidth;
67+
ctx.moveTo(x, y);
68+
ctx.lineTo(nx, ny);
69+
ctx.stroke();
70+
71+
ctx.beginPath();
72+
drawTree(nx, ny, radius, startAngle-incAngle+randomRange(-randomAngle, randomAngle), incAngle, randomAngle, startLength*lengthMod, lengthMod, startLineWidth*lineWidthMod, lineWidthMod, trunkColor, leafColor, leafColorStartRadius, curRadius+1);
73+
ctx.closePath();
74+
75+
ctx.beginPath();
76+
drawTree(nx, ny, radius, startAngle+incAngle+randomRange(-randomAngle, randomAngle), incAngle, randomAngle, startLength*lengthMod, lengthMod, startLineWidth*lineWidthMod, lineWidthMod, trunkColor, leafColor, leafColorStartRadius, curRadius+1);
77+
ctx.closePath();
78+
}
79+
}
80+
81+
//drawTree(140, 220, 14, 0, Math.PI*(1/8), Math.PI*(1/13), 40, 0.8, 10, 0.8, getRandomColor(), getRandomColor(), 8, 0);
82+
83+
$("#generate").click(function() {
84+
var x = $("#x-slider").sliderEx("value");
85+
var y = $("#y-slider").sliderEx("value");
86+
87+
var segments = $("#segment-slider").sliderEx("value");
88+
var startAngle = toRadians($("#start-angle-slider").sliderEx("value"));
89+
var incAngle = toRadians($("#inc-angle-slider").sliderEx("value"));
90+
var randomAngle = toRadians($("#random-angle-slider").sliderEx("value"));
91+
var trunkLength = $("#trunk-length-slider").sliderEx("value");
92+
var startLineWidth = $("#start-line-width-slider").sliderEx("value");
93+
var leafColourStart = $("#leaf-colour-start-slider").sliderEx("value");
94+
95+
var leafColour = $("#leaf-colour-box").val();
96+
var trunkColour = $("#trunk-colour-box").val();
97+
98+
drawTree(x, y, segments, startAngle, incAngle, randomAngle, trunkLength, 0.8, startLineWidth, 0.8, "#"+trunkColour, "#"+leafColour, leafColourStart, 0);
99+
});
100+
101+
$("#clear").click(function() {
102+
ctx.clearRect(0, 0, w, h);
103+
});
104+
105+
$(".button").button();
106+
107+
$("#x-slider").sliderEx({
108+
title:"X",
109+
value:w/2,
110+
min:0,
111+
max:w
112+
});
113+
114+
$("#y-slider").sliderEx({
115+
title:"Y",
116+
value:h/2,
117+
min:0,
118+
max:h
119+
});
120+
121+
$("#segment-slider").sliderEx({
122+
title:"Segments",
123+
value:14,
124+
min:1,
125+
max:50
126+
});
127+
128+
$("#start-angle-slider").sliderEx({
129+
title:"Start angle",
130+
value:0,
131+
min:0,
132+
max:360
133+
});
134+
135+
$("#inc-angle-slider").sliderEx({
136+
title:"Increment angle",
137+
value:33,
138+
min:0,
139+
max:360
140+
});
141+
142+
$("#random-angle-slider").sliderEx({
143+
title:"Random deviation angle",
144+
value:14,
145+
min:0,
146+
max:360
147+
});
148+
149+
$("#trunk-length-slider").sliderEx({
150+
title:"Trunk length",
151+
value:50,
152+
min:0,
153+
max:200
154+
});
155+
156+
$("#start-line-width-slider").sliderEx({
157+
title:"Start line width",
158+
value:10,
159+
min:0,
160+
max:50
161+
});
162+
163+
$("#leaf-colour-start-slider").sliderEx({
164+
title:"Leaf colour start",
165+
value:10,
166+
min:0,
167+
max:50
168+
});
169+
170+
$(".colour-box").each(function() {
171+
$(this).val(getRandomColor());
172+
});
173+
174+
$('.colour-box').colorpicker();

‎assets/stylesheets/style.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
@import url(https://fonts.googleapis.com/css?family=Poiret+One);
2+
3+
body {
4+
width:854px;
5+
}
6+
7+
.panel {
8+
9+
}
10+
11+
.sub-panel {
12+
background-color:#888888;
13+
border-radius:6px;
14+
padding:20px;
15+
margin-bottom:3px;
16+
font-family: 'Poiret One', cursive;
17+
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
18+
color:white;
19+
}
20+
21+
#tree-canvas {
22+
border-radius:6px;
23+
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
24+
background-color:white;
25+
margin-right:3px;
26+
width:470px;
27+
height:684px;
28+
float:left;
29+
}
30+
31+
#right-panel {
32+
width:365px;
33+
float:left;
34+
}
35+
36+
.button {
37+
padding:1px;
38+
width:312px;
39+
border-radius:3px;
40+
margin:2px;
41+
}
42+
43+
#sliders {
44+
margin-top:15px;
45+
}
46+
47+
.slider-comp {
48+
height:auto;
49+
display:table;
50+
}
51+
52+
.slider-title {
53+
width:100px;
54+
padding-bottom: 20px;
55+
margin-right:20px;
56+
text-align:center;
57+
float:left;
58+
}
59+
60+
.slider {
61+
float:left;
62+
width:170px;
63+
margin-top:5px;
64+
}
65+
66+
.slider-val {
67+
float:left;
68+
margin-left:10px;
69+
text-align:center;
70+
width:20px;
71+
margin-top:5px;
72+
}
73+
74+
#bottom-panel {
75+
width:440px;
76+
}

‎bower_components/colorpicker/.bower.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "colorpicker",
3+
"version": "1.1.7",
4+
"homepage": "https://github.com/vanderlee/colorpicker",
5+
"authors": [
6+
"Martijn van der Lee <[email protected]>"
7+
],
8+
"description": "JQuery colorpicker: themeroller styling, RGB, HSL, CMYK and L*A*B support. Standard look & feel, configurable. Works as a popup or inline.",
9+
"main": "jquery.colorpicker.js",
10+
"keywords": [
11+
"jquery",
12+
"colorpicker"
13+
],
14+
"license": "MIT",
15+
"ignore": [
16+
"**/.*",
17+
"node_modules",
18+
"bower_components",
19+
"test",
20+
"tests"
21+
],
22+
"dependencies": {
23+
"jquery": ">=1.5",
24+
"jquery-ui": ">=1.7"
25+
},
26+
"_release": "1.1.7",
27+
"_resolution": {
28+
"type": "version",
29+
"tag": "1.1.7",
30+
"commit": "6e1bc699e415c3b605a3ab4ab02bd71419a5076e"
31+
},
32+
"_source": "git://github.com/vanderlee/colorpicker.git",
33+
"_target": "^1.1.7",
34+
"_originalSource": "colorpicker",
35+
"_direct": true
36+
}

0 commit comments

Comments
 (0)