gaspargergo.github.io/randomShapes.html at master · gaspargergo/gaspargergo.github.io · GitHub

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!doctype html>
<html>
<head>
	<title>Shapes</title>
	<style>
		body{
			margin:none;
			transition: all 0.2s ease-in-out;
		}

		#center {
			position: absolute;
			top:50%;
			left: 50%;
			margin-left: -167px;
			margin-top: -250px;
		}

		a {
		cursor: pointer;
		display: block;
		height:95vh;
		}

	</style>

</head>
<body>
<a onClick="draw()">
<div id="center">
	<canvas width="334px" height="500px" id="canvas"></canvas>
</div>
</a>

	<script>
		var c = document.getElementById("canvas");
		var ctx = c.getContext("2d");
		draw();

		function draw(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			var randomColor = '#'+ Math.random().toString(16).slice(-6);
			document.body.style.backgroundColor = randomColor;
			ctx.lineWidth = 1;

			/*
			0  -  167    |    168  -  334
			             |
			|            |
                         |
			1            |
			6            |
			7            |
                         |
			------------------------------
                         |
                         |
			1            |
			6            |
			8            |
                         |
			|            |
                         |
			5            |
			0            |
			0            |
			             |
			*/

			//set points, randomizing their values
			var topMost = [c.width/2, Math.floor(Math.random() * (147 + 1))];
			var bottomMost = [c.width/2, Math.floor(Math.random() * (c.height - 187 + 1)) + 187];
			var leftMost = [Math.floor(Math.random() * (147 + 1)), 167];
			var rightMost = [Math.floor(Math.random() * (334 - 187 + 1)) + 187, 167];

			var phase = 0;
			/*top left: 0,
			  top right: 1,
			  bottom right: 2,
			  bottom left: 3*/

			for(var i = 0; i < 4; i++){
				var numOfPoints = Math.floor(Math.random() * (6 - 3 + 1)) + 3; // 3 to 6 points

				var sort = true;
	    		var points = [];
	    		var maxX, maxY, minX, minY; //maximum and minimum coordinates for random points
	    		var lastPoint = []; //we need to calculate the last point in order to know where to put random points

	    		switch(phase){ //switch for first point and X min&max
	    			case 0: //left ones start left
	    			case 3:
	    			points.push(leftMost[0]); //x coordinate
	    			points.push(leftMost[1]); //y coordinate
	    			minX = 0;
	    			maxX = 167;
	    			break;
	    			case 1: //right ones start right
	    			case 2:
	    			points.push(rightMost[0]); //x coordinate
	    			points.push(rightMost[1]); //y coordinate
	    			minX = 167;
	    			maxX = c.width;
	    			break;
	    		}

	    		switch(phase){ //switch for last point and Y min&max
	    			case 0: //top ones finish top
	    			case 1:
	    			lastPoint[0] = topMost[0]; //x coordinate
	    			lastPoint[1] = topMost[1]; //y coordinate
	    			minY = 0;
	    			maxY = 167;
	    			break;
	    			case 2: //bottom ones finish bottom
	    			case 3:
	    			lastPoint[0] = bottomMost[0]; //x coordinate
	    			lastPoint[1] = bottomMost[1] //y coordinate
	    			minY = 167;
	    			maxY = c.height;
	    			break;
	    		}

	    		for(var k = 0; k < numOfPoints-2;k++){ //adding points to the array
	    		  points.push(Math.floor(Math.random() * (maxX - minX + 1)) + minX); //x coordinate
	    		  points.push(Math.floor(Math.random() * (maxY - minY + 1)) + minY); //y coordinate
	    			}


	    		//sort before adding last point
	    		points = sortPoints(points,phase);

	    		//pushing last point now so it's last in the array
    			points.push(lastPoint[0]); //x coordinate
    			points.push(lastPoint[1]); //y coordinate

    			//connecting for fill
	    		drawCurve(ctx, points);
				ctx.lineTo(167,167);
			    ctx.lineTo(points[0],points[1]);

			    ctx.stroke();
			    ctx.fill();

			    phase++;
			}
		}


		function drawCurve(ctx, ptsa, tension, isClosed, numOfSegments, showPoints) {

		    showPoints  = showPoints ? showPoints : false;

		    ctx.beginPath();

		    drawLines(ctx, getCurvePoints(ptsa, tension, isClosed, numOfSegments));

		    if (showPoints) {
		        ctx.stroke();
		        ctx.beginPath();
		        for(var i=0;i<ptsa.length-1;i+=2) {
		                ctx.rect(ptsa[i] - 2, ptsa[i+1] - 2, 4, 4);
		        }

		    }
		  }

		  function getCurvePoints(pts, tension, isClosed, numOfSegments) {

		    // use input value if provided, or use a default value
		    tension = (typeof tension != 'undefined') ? tension : 0.5;
		    isClosed = isClosed ? isClosed : false;
		    numOfSegments = numOfSegments ? numOfSegments : 16;

		    var _pts = [], res = [],    // clone array
		        x, y,           // our x,y coords
		        t1x, t2x, t1y, t2y, // tension vectors
		        c1, c2, c3, c4,     // cardinal points
		        st, t, i;       // steps based on num. of segments

		    // clone array so we don't change the original
		    //
		    _pts = pts.slice(0);

		    // The algorithm require a previous and next point to the actual point array.
		    // Check if we will draw closed or open curve.
		    // If closed, copy end points to beginning and first points to end
		    // If open, duplicate first points to befinning, end points to end
		    if (isClosed) {
		        _pts.unshift(pts[pts.length - 1]);
		        _pts.unshift(pts[pts.length - 2]);
		        _pts.unshift(pts[pts.length - 1]);
		        _pts.unshift(pts[pts.length - 2]);
		        _pts.push(pts[0]);
		        _pts.push(pts[1]);
		    }
		    else {
		        _pts.unshift(pts[1]);   //copy 1. point and insert at beginning
		        _pts.unshift(pts[0]);
		        _pts.push(pts[pts.length - 2]); //copy last point and append
		        _pts.push(pts[pts.length - 1]);
		    }

		    // ok, lets start..

		    // 1. loop goes through point array
		    // 2. loop goes through each segment between the 2 pts + 1e point before and after
		    for (i=2; i < (_pts.length - 4); i+=2) {
		        for (t=0; t <= numOfSegments; t++) {

		            // calc tension vectors
		            t1x = (_pts[i+2] - _pts[i-2]) * tension;
		            t2x = (_pts[i+4] - _pts[i]) * tension;

		            t1y = (_pts[i+3] - _pts[i-1]) * tension;
		            t2y = (_pts[i+5] - _pts[i+1]) * tension;

		            // calc step
		            st = t / numOfSegments;

		            // calc cardinals
		            c1 =   2 * Math.pow(st, 3)  - 3 * Math.pow(st, 2) + 1;
		            c2 = -(2 * Math.pow(st, 3)) + 3 * Math.pow(st, 2);
		            c3 =       Math.pow(st, 3)  - 2 * Math.pow(st, 2) + st;
		            c4 =       Math.pow(st, 3)  -     Math.pow(st, 2);

		            // calc x and y cords with common control vectors
		            x = c1 * _pts[i]    + c2 * _pts[i+2] + c3 * t1x + c4 * t2x;
		            y = c1 * _pts[i+1]  + c2 * _pts[i+3] + c3 * t1y + c4 * t2y;

		            //store points in array
		            res.push(x);
		            res.push(y);

		        }
		    }

		    return res;
		  }

		  function drawLines(ctx, pts) {
		    ctx.moveTo(pts[0], pts[1]);
		    for(i=2;i<pts.length-1;i+=2) ctx.lineTo(pts[i], pts[i+1]);
		  }


		function sortPoints(pts, phs){ //an insertion sort algorithm to sort the points arrays
			var tempArray = [];

			tempArray.push(pts[0]);
			tempArray.push(pts[1]);

			for(var i = 3; i < pts.length;i += 2){
				var j = 1;

				switch(phs){
					case 0:
					case 1:
						while(pts[i] < tempArray[j]){
							j += 2;
						}
					break;
					case 2:
					case 3:
						while(pts[i] > tempArray[j]){
							j += 2;
						}
					break;
				}
				tempArray.splice(j-1,0,pts[i-1]);
				tempArray.splice(j,0,pts[i]);
			}

			return tempArray;
		}

	</script>
</body>
</html>