<!DOCTYPE html> <html> <!-- ahhh --> <body> <canvas id="myCanvas" width="1920" height="1080" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <script> function rad(degrees) { var pi = Math.PI; return degrees * (pi / 180); } function colourToText(colour) { return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")" } function LerpRGB(a, b, t) { if (t < 0) { t *= -1 } var newColor = [0, 0, 0]; newColor[0] = a[0] + (b[0] - a[0]) * t; newColor[1] = a[1] + (b[1] - a[1]) * t; newColor[2] = a[2] + (b[2] - a[2]) * t; return newColor; } function draw_shape(sides, radius, rotation, x, y, colour) { var rot = Math.round((sides - 2) * 180 / sides * 2) var piv = 360 / sides; var stt = 0.5 * Math.PI - rad(rot) + rad(rotation); var end = 0; for (let i = 1; i < sides + 1; i++) { end = stt + rad(rot); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt, end, 0); ctx.strokeStyle = colour; ctx.stroke(); stt = end + -(rad(rot - piv)) //+rad(30); } } function draw_shape_sub(sides, radius, rotation, x, y, colour) { var denominator = sides - 2 //var rot = Math.round((sides - 2) * 180 / sides * 2) var rot = (Math.round((sides - 2) * 180 / sides * 2)) * (1 / denominator) var piv = 360 / sides; var l = 1 var stt = 0.5 * Math.PI - rad(rot) * l + rad(rotation); var end = 0; for (let i = 1; i < sides + 1; i++) { end = (stt + rad(rot)); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt, end, 0); ctx.strokeStyle = colour; ctx.stroke(); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt - rad(rot) * l, end - rad(rot) * l, 0); ctx.strokeStyle = colour; ctx.stroke(); stt = end + -(rad(rot - piv)) //+rad(30); } } function draw_shape_fill(sides, radius, rotation, x, y, colour) { var rot = Math.round((sides - 2) * 180 / sides * 2) var piv = 360 / sides; var stt = 0.5 * Math.PI - rad(rot) + rad(rotation); var end = 0; var n = radius / ((radius / 10) * (radius / 10)) //pixel correction for mid leaf for (let i = 1; i < sides + 1; i++) { end = stt + rad(rot); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt - (stt - end) / 2, end + rad(n), 0); ctx.fillStyle = colour; ctx.fill(); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt, end - (end - stt) / 2 + rad(n), 0); ctx.fillStyle = colour; ctx.fill(); stt = end + -(rad(rot - piv)) //+rad(30); } } function Draw_Shape_accident(sides, radius, rotation, x, y, colour) { var rot = Math.round((sides - 2) * 180 / sides * 2) var piv = 360 / sides; var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); var end = 0; var n = radius / ((radius / 10) * (radius / 10)) //pixel correction for mid leaf for (let i = 1; i < sides + 1; i++) { end = stt + rad(rot); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt - (stt - end + rad(rotation)) / 2, end + rad(n), 0); ctx.strokeStyle = colour; ctx.stroke(); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i - rotation)) * radius, y + Math.sin(rad(90 + piv * i - rotation)) * radius, radius, stt, end - (end - stt - rad(rotation)) / 2 + rad(n), 0); ctx.strokeStyle = colour; ctx.stroke(); stt = end + -(rad(rot - piv)) //+rad(30); } } function Draw_Spiral_Pattern(sides, radius, rotation, x, y, colour) { var rot = Math.round((sides - 2) * 180 / sides * 2) var piv = 360 / sides; var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); var end = 0; var n = radius / ((radius / 10) * (radius / 10)) //pixel correction for mid leaf for (let i = 1; i < sides + 1; i++) { end = stt + rad(rot); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 0); ctx.strokeStyle = colour; ctx.stroke(); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i - rotation)) * radius, y + Math.sin(rad(90 + piv * i - rotation)) * radius, radius, stt - rad(rotation), end - (end - stt) / 2 + rad(n) - rad(rotation), 0); ctx.strokeStyle = colour; ctx.stroke(); stt = end + -(rad(rot - piv)) //+rad(30); } } function Draw_Spiral(sides, radius, rotation, x, y, colour) { var rot = Math.round((sides - 2) * 180 / sides * 2) var piv = 360 / sides; var stt = 0.5 * Math.PI - rad(rot) + rad(rotation); var end = 0; var n = radius / ((radius / 10) * (radius / 10)) //pixel correction for mid leaf for (let i = 1; i < sides + 1; i++) { end = stt + rad(rot); ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt - (stt - end) / 2, end + rad(n), 0); ctx.strokeStyle = colour; ctx.stroke(); /* ctx.beginPath(); ctx.arc(x + Math.cos(rad(90 + piv * i + rotation)) * radius, y + Math.sin(rad(90 + piv * i + rotation)) * radius, radius, stt, end - (end - stt) / 2 + rad(n), 0); ctx.fillStyle = colour; ctx.fill(); */ stt = end + -(rad(rot - piv)) //+rad(30); } } function render_clear() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); ctx.fillStyle = "black"; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function draw_triangle(ang, radius) { ctx.beginPath(); ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 1 + ang)) * radius); ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 2 + ang)) * radius); ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 3 + ang)) * radius); ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1 + ang)) * radius, starty + Math.sin(rad(90 + 120 * 1 + ang)) * radius); ctx.strokeStyle = "red"; ctx.stroke(); } var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var sides_org = 3; var r = 300; var deg_per_sec = 30; var time = 120; var fps = 60; var rot_org = Math.round((sides_org - 2) * 180 / sides_org * 2) var piv = 360 / sides_org; var angle = 0; startx = 1920 / 2//1875/2; starty = 1080 / 2//950/2;//-(Math.tan(30*Math.PI/180)*width/2); j = 0; i = 0; n_angle = 0 i_angle = 0 tmp_a = angle //var capturer = new CCapture( { format: 'webm' } ); /* var capturer = new CCapture( { format: 'webm', framerate: 60, verbose: true } ); */ //capturer.start(); /* function animate() { requestAnimationFrame( animate ); test(); } */ delMe = 0 function render() { if (i < time / (1 / fps)) { setTimeout(() => { render(); //requestAnimationFrame(test); angle = j; render_clear(); r = 400 tmpA = (Math.asin(Math.cos(rad(angle)))) / (2 * Math.PI) + .75 tmpB = Math.cos(rad(angle)) / 4 + 0.75 tmpC = Math.cos(angle * (3 * Math.PI / 180)) / 4 + 0.75 tmpD = (Math.sin(30 * Math.PI / 180)) / Math.sin((150 - (angle - 120 * Math.floor(angle / 120)) * Math.PI / 180)) fl = angle - 120 * Math.floor(angle / 120) tmpE = 1 / (2 * Math.cos(Math.PI / 3 - (fl * Math.PI / 180))) //console.log(tmpE) //console.log("angle: " + angle + " tmpC: " +Math.round(tmpC * 1000) / 1000) /* console.log(Math.cos(0*(3*Math.PI/180))/4+0.75) console.log(Math.cos(30*(3*Math.PI/180))/4+0.75) console.log(Math.cos(60*(3*Math.PI/180))/4+0.75) console.log(Math.cos(180*(3*Math.PI/180))/4+0.75) */ s = 400 speed_mult = 1 tmpF = 1 / (2 * Math.sin(Math.PI / 180 * (150 - angle * speed_mult + 120 * Math.floor(angle * speed_mult / 120)))) tmpAng = n_angle fl1 = (n_angle - 2 * Math.PI / 3 * (Math.floor(3 * n_angle / (2 * Math.PI)))) t1 = Math.abs(Math.sin(Math.PI / 3 - fl1) / (2 * (Math.cos(Math.PI / 3 - fl1)) ** 2)) n_angle += 1 / (t1 + 1) new_angle = -120 * tmpF + 120 tmpG = 1 / (2 * Math.sin(Math.PI / 180 * (150 - angle * speed_mult + 120 * Math.floor(angle * speed_mult / 120)))) //console.log("angle: " + t1 + " | fl1 : "+ fl1) angle_accident = 120 * Math.floor(angle * speed_mult / 120) out_angle = 0 i_angle += angle - tmp_a tmp_a = angle if (i_angle > 120) { i_angle -= 120 } if (i_angle < 60) { out_angle = 120 / (2 * Math.cos(rad(i_angle))) - 60 } else { out_angle = -120 / (2 * Math.cos(2 * Math.PI / 3 - (i_angle * Math.PI / 180))) + 180 } //console.log("angle: " + i_angle + " | out A: " + out_angle) tmpFinal = 1 / (2 * Math.sin(Math.PI / 180 * (150 - out_angle * speed_mult + 120 * Math.floor(out_angle * speed_mult / 120)))) //console.log(400*tmpFinal-delMe) delMe = 400 * tmpFinal //draw_triangle(180+0,s) //draw_triangle(180+angle*speed_mult,s*tmpF) //draw_triangle(180+out_angle*speed_mult,s*tmpFinal) //draw_triangle(180+new_angle*speed_mult,s*tmpG) for (let i = 0; i < 25; i++) { draw_triangle(180+out_angle*speed_mult*i,s*tmpFinal**i) //draw_triangle(180+angle*speed_mult*i,s*tmpF**i) } height = 400 L = height / 2 * (Math.asin(Math.cos(angle * Math.PI / height)) / Math.PI) + height * 3 / 4 L2 = -(.5 * angle - height * Math.floor(angle / (height * 2))) + height B = rad(180) - Math.asin(height * Math.sin(rad(30)) / L2) theFinalAngle = rad(150) - B console.log("L :" + L2 + " | B: " + B * 180 / Math.PI) //draw_triangle(180+ (theFinalAngle*180/Math.PI) ,L) //draw_triangle((angle-180)/2.8,tmpA*400) //draw_shape(7,300,0,startx,starty,"red"); //draw_shape_sub(7,300,0,startx,starty,"blue"); //draw_shape_fill(5,300,angle,startx,starty,"purple"); /* draw_shape_fill(5,300,angle,startx,starty,"purple"); draw_shape_fill(5,115,-(angle+108),startx,starty,"red"); draw_shape_fill(5,44,angle+108,startx,starty,"yellow"); draw_shape(5,300,angle,startx,starty,"red"); draw_shape(5,115,-(angle+108),startx,starty,"yellow"); draw_shape(5,44,angle+108,startx,starty,"purple"); */ //Draw_Spiral(4,400,0,startx,starty,'red'); //Draw_Spiral_Pattern(50, 250, angle, startx, starty, 'red') //Draw_Shape_accident(4,300,angle,startx,starty,'red') //Draw_Spiral(10,400,-angle,startx,starty,'red'); //draw_shape(99,300,angle,startx,starty,"red"); //draw_triangle(0); //draw_tri(angle); //draw_test_fill(angle); //draw_shape(5,300,angle,startx,starty); //draw_shape(3,300,-angle,startx,starty) //draw_shape(7,400,angle,startx,starty) //draw_shape(6,r,-angle,startx,starty) /* colour1 = [137, 54, 255]; colour2 = [158, 255, 54]; ncolour = LerpRGB(colour1, colour2, Math.cos(rad(angle))); */ colour1 = [137, 54, 255]; colour2 = [158, 255, 54]; //Draw_nodal_expanding(2.5,100000,angle*2+33000,angle*0, colour1,colour2,0.5, 5) //Draw_nodal_expanding(2.5,10000,angle,angle*0, colour1,colour2,0.5, 1) //console.log(angle*2) //draw_shape(55,300,angle,startx,starty,"pink") //Draw_Phyllotaxis(angle/5000+1); //draw_shape_fill(4,400,angle,startx,starty,colourToText(ncolour)); //Draw_rectangle_pattern1(angle, 180, "purple"); /* for (let z = 0; z < 360; z+=360/45) { Draw_rectangle_pattern1(z+angle,200,"blue"); } */ //capturer.capture( document.getElementById("myCanvas") ); }, (1000 / fps)); j += deg_per_sec * 1 / fps; i += 1; } else { //capturer.stop(); //capturer.save(); } } render() //render_clear() //Draw_nodal(500, 100,33) //draw_shape_fill(5,300,angle,startx,starty,"purple"); //draw_shape_fill(5,115,angle+108,startx,starty,"red"); //draw_shape(5,300,angle,startx,starty); //Draw_center(); function Draw_Phyllotaxis(angle) { colour1 = [255, 170, 0]; colour2 = [255, 0, 221]; var c = 32; for (let n = 50; n < 300; n += 1) { ncolour = LerpRGB(colour1, colour2, Math.cos(rad(n / 2))); var a = n * (angle)//137.5; var r = c * Math.sqrt(n); var x = r * Math.cos(a) + startx; var y = r * Math.sin(a) + starty; ctx.beginPath(); ctx.arc(x, y, 4, 0, 2 * Math.PI); ctx.fillStyle = colourToText(ncolour); ctx.fill(); } } function draw_test_fill(angle) { ctx.beginPath(); ctx.arc(1000, 500, 300, 0, rad(angle)); ctx.fillStyle = "purple"; ctx.fill(); } function Draw_nodal_expanding(expand, points, step, rotate, colour1, colour2, colour_change, line_width) { var angle = 360 / points * step var start_angle = angle; var done = false; var total_moves = 1; var length = expand; for (let z = 1; z <= 2500; z++) { ctx.beginPath(); //ctx.moveTo(startx, starty); ncolour = LerpRGB(colour1, colour2, Math.cos(rad(z * colour_change))); ctx.moveTo(startx + (Math.cos(rad(angle * (z - 1) + rotate)) * (length - expand)), starty + (Math.sin(rad(angle * (z - 1) + rotate)) * (length - expand))); ctx.lineTo(startx + (Math.cos(rad(angle * z + rotate)) * length), starty + (Math.sin(rad(angle * z + rotate)) * length)); length += expand; ctx.lineWidth = line_width;//try 1 ctx.strokeStyle = colourToText(ncolour); ctx.stroke(); } } function Draw_nodal(radius, points, step, rotate, colour) { var angle = 360 / points * step ctx.beginPath(); var start_angle = angle; var done = false; var total_moves = 1; ctx.moveTo(startx + (Math.cos(rad(angle + rotate)) * radius), starty + (Math.sin(rad(angle + rotate)) * radius)); while (done != true) { if ((total_moves * step) % points != 0) { total_moves++ } else { total_moves++ done = true } } for (let z = 1; z <= total_moves; z++) { ctx.lineTo(startx + (Math.cos(rad(angle * z + rotate)) * radius), starty + (Math.sin(rad(angle * z + rotate)) * radius)); } ctx.strokeStyle = colour; ctx.stroke(); } function Draw_rectangle_pattern1(angle, size, colour) { ctx.save(); ctx.translate(startx, starty)//-(Math.sin(rad(angle)) *startx)); ctx.rotate(rad(angle + 180)); ctx.beginPath(); ctx.strokeStyle = colour; ctx.rect(-size, -size, size, size); ctx.stroke(); ctx.restore(); } function draw_tri(angle) { draw_shape(3, 520, angle, startx + 260, starty - 150); draw_shape(3, 520, angle + 60, startx - 260, starty - 150); draw_shape(3, 520, angle + 120, startx, starty + 300); } function Draw_center() { ctx.beginPath(); ctx.moveTo(startx - 100, starty); ctx.lineTo(startx + 100, starty); ctx.moveTo(startx, starty - 100); ctx.lineTo(startx, starty + 100); ctx.strokeStyle = "red"; ctx.stroke(); } </script> </body> </html>