-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathboulder.htm
108 lines (101 loc) · 4.26 KB
/
boulder.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="paper-full.js"></script>
<!-- Define inlined JavaScript -->
<script type="text/javascript">
// Only executed our code once the DOM is ready.
window.onload = function() {
// Get a reference to the canvas object
var canvas = document.getElementById('myCanvas');
// Create an empty project and a view for the canvas:
paper.setup(canvas);
// Set initial conditions and variables
var myPath = new paper.Path();
var colorArray = ["#77c043","#f2812e","#00a55e","#000000","#999999","#b3602f","#5b79b1","#fedc45"];
var maxColor = 8;
var currentColor = 0;
var color = new paper.Color(colorArray[currentColor]);
var tool = new paper.Tool();
var zeroRef = new paper.Point();
myPath.strokeColor = 'white';
myPath.fillColor = color;
// Draw the view
paper.view.draw();
// Function to cycle the colors
nextColor = function() {
currentColor++;
if (currentColor == maxColor) {
currentColor = 0;
}
myPath.fillColor = colorArray[currentColor];
}
// Function to draw a polygon
drawPolygon = function(sides) {
myPath.remove();
myPath = new paper.Path.RegularPolygon(zeroRef,sides+1,100);
myPath.fillColor = colorArray[currentColor];
myPath.lastSegment.remove(); // pull out a segment to make it asymmetric
}
// keyboard commands
tool.onKeyDown = function(event) {
switch (event.key) {
case '+': // change scale
myPath.scale(1.3);
break;
case '=': // change scale
myPath.scale(1.3);
break;
case '-': // change scale
myPath.scale(0.7);
break;
case '_': // change scale
myPath.scale(0.7);
break;
case 'right': // torque shape
myPath.shear(.05)
break;
case 'left': // torque shape
myPath.skew(-3);
break;
case 'space': // change color
nextColor();
break;
case 'down': // change rotation
myPath.rotate(2);
break;
case 'up': // change rotation
myPath.rotate(-2);
break;
case '5': // change polygon
drawPolygon(5);
break;
case '6': // change polygon
drawPolygon(6);
break;
case '7': // change polygon
drawPolygon(7);
break;
case '8': // change polygon
drawPolygon(8);
break;
case '9': // change polygon
drawPolygon(9);
break;
}
}
// The bit that gets things going on the mouseclick
tool.onMouseDown = function(event) {
// create a hexaboulder and drop it at the mouseclick
zeroRef = event.point;
drawPolygon(6);
}
}
</script>
</head>
<body>
CLICK IN THE MIDDLE OF SCREEN TO START | space: change color | up/down: rotate | left/right: skew | +/- : embiggen/shrink | 5-9 : change shape <br>
<canvas id="myCanvas" resize></canvas>
</body>
</html>