2e:null 2f:["$","title",null,{"children":"Cycles animation test + post | Benoît Grélard | Observable"}] 34:Tc00,canvas = { const size = 600; const bgColor = "#101115"; const bgColorRgb = [16, 17, 21]; const c = DOM.canvas(); c.width = size; c.height = size; const ctx = c.getContext('2d'); let angle = 0; let globalAngle = 0; draw(); function draw() { ctx.clearRect(0, 0, size, size); ctx.fillStyle = bgColor; ctx.fillRect(0, 0, size, size); ctx.globalCompositeOperation = 'lighter'; ctx.save(); ctx.translate(x(globalAngle, globApertureV), y(globalAngle, globApertureV)); ctx.save(); ctx.translate(x(angle, locApertureV), y(angle, locApertureV)); drawCircle(size/2, size/2, size/2*0.85, colors[0]); ctx.restore(); ctx.save(); ctx.translate(x(angle + Math.PI*2*0.333, locApertureV), y(angle + Math.PI*2*0.333, locApertureV)); drawCircle(size/2, size/2, size/2*0.85, colors[1]); ctx.restore(); ctx.save(); ctx.translate(x(angle + Math.PI*2*0.666, locApertureV), y(angle + Math.PI*2*0.666, locApertureV)); drawCircle(size/2, size/2, size/2*0.85, colors[2]); ctx.restore(); ctx.restore(); ctx.globalCompositeOperation = 'source-over'; // draw eclipse ctx.fillStyle = bgColor; ctx.beginPath(); ctx.arc(size/2, size/2, size/2*0.8, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'multiply'; drawLines(); ctx.globalCompositeOperation = 'source-over'; // debugCenter(); angle += locRotSpeedV; globalAngle += globRotSpeedV; requestAnimationFrame(draw); } function drawCircle(cx, cy, r, colorComponents) { const gradient = ctx.createRadialGradient(cx, cx, r*0.85, cx, cy, r); gradient.addColorStop(0, `rgba(${colorComponents.join(',')}, 0.7)`); gradient.addColorStop(0.6, `rgba(${colorComponents.join(',')}, 0.7)`); gradient.addColorStop(1, `rgba(${colorComponents.join(',')}, 0)`); ctx.fillStyle = gradient; // ctx.fillStyle = `rgba(${colorComponents.join(',')}`; ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } function drawLines() { const numLines = 270; const r = size/2; const fullCircle = Math.PI*2; const angleIncr = fullCircle/numLines; const gradient = ctx.createRadialGradient(size/2, size/2, size/2*0.8, size/2, size/2, size/2*0.9); gradient.addColorStop(0, `rgba(${bgColorRgb.join(',')}, 1)`); gradient.addColorStop(1, `rgba(${bgColorRgb.join(',')}, 0)`); for (let i=0; i`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"locAperture = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"locApertureV = Generators.input(locAperture)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"globAperture = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"globApertureV = Generators.input(globAperture)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"locRotSpeed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"locRotSpeedV = Generators.input(locRotSpeed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"globRotSpeed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"globRotSpeedV = Generators.input(globRotSpeed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n## values and helpers\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"useColorsGen = Generators.input(useColors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"colors = useColorsGen ? [ [3, 178, 220], [255, 51, 101], [255, 255, 255] ] : [ [255, 255, 255], [255, 255, 255], [255, 255, 255] ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"x = (a, h) => Math.cos(a) * h","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"y = (a, h) => Math.sin(a) * h","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"