<!DOCTYPE html> <html> <!-- ahhh --> <body style="margin: 0; overflow: hidden"> <canvas id="myCanvas" width="10" height="10" style="display: block; box-sizing: border-box" > Browser does not support the HTML5 canvas tag</canvas > <script> let c = document.getElementById("myCanvas"); let ctx = c.getContext("2d"); ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; //increase deg_per_sec to rotation speed let deg_per_sec = 1/200 /// 200; let time = 99999999; //set this to stop the animation after x seconds (stops it running in background) let fps = 60; let leafWidth = 200; //leaf height is just half width // let leafHeight = 100; centerX = ctx.canvas.width / 2; centerY = ctx.canvas.height / 2; rotation = 0; //was = j = angle currentFrame = 0; //was = i let colour1 = [45, 129, 252]; // let colour2 = [0, 0, 0]; let colour2 = [252, 3, 98]; let lerpedColours = []; //270 specifically bc of Math.cos(i/1.5) //e.g. 360 would be Math.cos(i) //just so the colours loop back for (let i = 0; i < 270; i++) { let ncolour = LerpRGB(colour1, colour2, Math.cos(rad(i/1.5))); lerpedColours.push(colourToText(ncolour)) } console.log(lerpedColours) function render() { if (currentFrame < time / (1 / fps)) { setTimeout(() => { render(); render_clear(); // Draw_Phyllotaxis(rotation); Draw_FloralPhyllo(rotation+.5); // Draw_Phyllotaxis(rotation + 1.5); // Draw_Phyllotaxis(rotation + 4.8); // Draw_Phyllotaxis(Math.PI/4); // Draw_Phyllotaxis(1.5); // Draw_center(50); //Debugging //just moving the last colour to the start, makes the gradient flow //through all the items lerpedColours.unshift(lerpedColours[lerpedColours.length-1]) lerpedColours.pop() }, 1000 / fps); rotation += deg_per_sec / fps; // was = j = angle, now = rotation currentFrame += 1; // was = i } } render(); function Draw_FloralPhyllo(angle) { // var c = 24; //something to do with width. but not width var c = 1; //something to do with width. but not width //dont make larger than 270 unless altering the number of colours in lerpedColours for (let n = 200; n > 0; n -= 1) { let a = n * angle; //137.5; let r = c * Math.sqrt(n); let x = r * Math.cos(a) + centerX; let y = r * Math.sin(a) + centerY; drawEyelid(n * 2.4 + 40, x, y, lerpedColours[n]); } } function rad(degrees) { var pi = Math.PI; return degrees * (pi / 180); } 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 colourToText(colour) { return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")"; } 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 drawEyelid(width, x1, y1, colour) { x1 -= centerX; y1 -= centerY; let angle = Math.atan2(y1, x1); let cosAngle = Math.cos(angle); let sinAngle = Math.sin(angle); let x2Old = 0 + width; let y2Old = 0; let x3Old = 0 + width / 2; let y3Old = 0 + width / 2; let x4Old = 0 + width / 2; let y4Old = 0 - width / 2; let x2 = cosAngle * width; let y2 = sinAngle * width; let x3 = x3Old * cosAngle - y3Old * sinAngle; let y3 = x3Old * sinAngle + y3Old * cosAngle; let x4 = x4Old * cosAngle - y4Old * sinAngle; let y4 = x4Old * sinAngle + y4Old * cosAngle; x1 += centerX; y1 += centerY; x2 += x1; y2 += y1; x3 += x1; y3 += y1; x4 += x1; y4 += y1; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.quadraticCurveTo(x3, y3, x2, y2); ctx.moveTo(x1, y1); ctx.quadraticCurveTo(x4, y4, x2, y2); ctx.fillStyle = colour; ctx.fill(); ctx.lineWidth = 2; ctx.strokeStyle = "black"; ctx.stroke(); } function drawEyelid2(x1, y1) { x1 -= centerX; y1 -= centerY; let angle = Math.atan(y1 / x1); let localLeafCenterX = -(leafWidth * Math.cos(Math.PI - angle)) / 2; let localLeafCenterY = (leafWidth * Math.sin(Math.PI - angle)) / 2; let x2 = x1 - leafWidth * Math.cos(Math.PI - angle); let y2 = y1 + leafWidth * Math.sin(Math.PI - angle); let alpha = Math.atan(leafHeight / (leafWidth / 2)); let x3 = x1 + localLeafCenterX + leafHeight * Math.sin(alpha); let y3 = y1 + localLeafCenterY - leafHeight * Math.cos(alpha); let x4 = x1 + localLeafCenterX - leafHeight * Math.sin(alpha); let y4 = y1 + localLeafCenterY + leafHeight * Math.cos(alpha); x1 += centerX; y1 += centerY; x2 += centerX; y2 += centerY; x3 += centerX; y3 += centerY; x4 += centerX; y4 += centerY; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.quadraticCurveTo(x3, y3, x2, y2); ctx.moveTo(x1, y1); ctx.quadraticCurveTo(x4, y4, x2, y2); ctx.fillStyle = "black"; ctx.fill(); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.quadraticCurveTo(x3, y3, x2, y2); ctx.moveTo(x1, y1); ctx.quadraticCurveTo(x4, y4, x2, y2); ctx.strokeStyle = "orange"; ctx.stroke(); } function Draw_center(width) { ctx.beginPath(); ctx.moveTo(centerX - width / 2, centerY); ctx.lineTo(centerX + width / 2, centerY); ctx.moveTo(centerX, centerY - width / 2); ctx.lineTo(centerX, centerY + width / 2); ctx.strokeStyle = "pink"; ctx.lineWidth = 2; ctx.stroke(); } </script> </body> </html>