30:T833,{ const height = 360; const ctx = this ? this.getContext("2d") : DOM.context2d(width, height); const CX = width / 2; const CY = height / 1.6; const FPS = 50; const ROT = .005; const BG = 'hsl(240, 64%, 27%)'; // midnight-blue const FGR = '#F9C322'; const FGN = '#ff6c2f'; const NR_RAYS = 5 * 1000; const SUN_RADIUS = 100; ctx.fillStyle = BG; ctx.fillRect(0, 0, width, height); ctx.fillStyle = FGN; const randomNess = []; for (let i = 0; i < Math.min(CX, CY); i++) { randomNess.push(Math.random()); } let noise = []; // Noise dots for (let i = 0; i < NR_RAYS * 2; i++) { const x = CX + randomGauss(1) * SUN_RADIUS * 2; const y = CY + randomGauss(1) * SUN_RADIUS * 2; const distX = x - CX; const distY = y - CY; const distToCentre = Math.sqrt(distX * distX + distY * distY); if (distToCentre < SUN_RADIUS / 3) { continue; } noise.push([distX, distY, distToCentre]); } ctx.fillStyle = FGR; let nodes = []; // Sun lines for (let i = 0; i < NR_RAYS; i++) { const x = CX + randomGauss(1) * SUN_RADIUS; const y = CY + randomGauss(1) * SUN_RADIUS; const w = rnd(10, 20); nodes.push([x - w / 2, y, w]); } let frameNr = 0; function animate() { setTimeout(function() { frameNr++; requestAnimationFrame(animate); }, 1000 / FPS); ctx.fillStyle = FGN; const updated_noise = []; // Draw noise for (let [distX, distY, distToCentre] of noise) { let radAngle = Math.atan2(distX, distY); radAngle += ROT; distX = Math.sin(radAngle) * distToCentre; distY = Math.cos(radAngle) * distToCentre; updated_noise.push([distX, distY, distToCentre]); ctx.fillRect(CX + distX, CY + distY, 1, 1); } noise = updated_noise; ctx.fillStyle = FGR; // Draw lines for (let [x, y, w] of nodes) { y += rnd(-1, 1); const rndWidth = randomNess[frameNr % randomNess.length]; ctx.fillRect(x, y, w + rndWidth * 4, size); } } setTimeout(function() { animate(); }, 100); return ctx.canvas; }31:Tb61,{ const height = 360; const ctx = this ? this.getContext("2d") : DOM.context2d(width, height); const CX = width / 2; const CY = height / 1.55; const PI2 = Math.PI * 2; const FPS = 50; const ROT = .01; const BG = 'hsl(195, 53%, 79%)'; // light-blue // hsl(240, 64%, 27%) // midnight-blue const FGR = '#F9C322'; const FGN = '#ff6c2f'; const NR_RAYS = 5 * 1000; const SUN_RADIUS = 100; ctx.fillStyle = BG; ctx.fillRect(0, 0, width, height); ctx.fillStyle = FGN; const randomNess = []; for (let i = 0; i < Math.min(CX, CY); i++) { randomNess.push(Math.random()); } let noise = []; // Noise dots for (let i = 0; i < NR_RAYS * 2.5; i++) { const x = CX + randomGauss(1) * SUN_RADIUS * 2; const y = CY + randomGauss(1) * SUN_RADIUS * 2; const distX = x - CX; const distY = y - CY; const distToCentre = Math.sqrt(distX * distX + distY * distY); if (distToCentre < SUN_RADIUS / 3) { continue; } noise.push([distX, distY, distToCentre]); // ctx.fillRect(x, y, 1, 1); } ctx.fillStyle = FGR; let nodes = []; // Sun lines for (let i = 0; i < NR_RAYS; i++) { const x = CX + randomGauss(1) * SUN_RADIUS; const y = CY + randomGauss(1) * SUN_RADIUS; const w = rnd(10, 20); nodes.push([x - w / 2, y, w]); // ctx.fillRect(x - w / 2, y, w, size); } let angle = Math.PI; let frameNr = 0; function animate() { setTimeout(function() { // if (frameNr > 1) return; frameNr++; requestAnimationFrame(animate); }, 1000 / FPS); angle += ROT; angle = wrap(angle, 0, PI2); // reset matrix ctx.setTransform(1, 0, 0, 1, 0, 0); let hue, sat, lum; if (angle >= Math.PI && angle < PI2) { hue = mapRange(angle, Math.PI, PI2, 195, 240); sat = mapRange(angle, Math.PI, PI2, 53, 64); lum = mapRange(angle, Math.PI, PI2, 80, 20); } else { hue = mapRange(angle, 0, Math.PI, 240, 195); sat = mapRange(angle, 0, Math.PI, 64, 53); lum = mapRange(angle, 0, Math.PI, 20, 80); } ctx.fillStyle = `hsl(${hue}, ${sat}%, ${lum}%)`; ctx.fillRect(0, 0, width, height); ctx.translate( (Math.sin(angle) * height) / 2, (Math.cos(angle) * height) / 2 + height / 4 ); ctx.fillStyle = FGN; const updated_noise = []; // Draw noise for (let [distX, distY, distToCentre] of noise) { let radAngle = Math.atan2(distX, distY); radAngle += ROT * 2; distX = Math.sin(radAngle) * distToCentre; distY = Math.cos(radAngle) * distToCentre; updated_noise.push([distX, distY, distToCentre]); ctx.fillRect(CX + distX, CY + distY, 1, 1); } noise = updated_noise; ctx.fillStyle = FGR; // Draw lines for (let [x, y, w] of nodes) { ctx.fillRect(x, y, w, size); } } setTimeout(function() { animate(); }, 100); return ctx.canvas; }32:[] 2e:{"title":"Sun setting","cells":[{"id":0,"value":"md`# Sun setting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"md`Oh it took me SO long to finish this! I hope you like it.\nI learned a lot by working on positioning the random noise and rotating the whole group.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"size = 1 // Line size","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"function rnd(min, max) {\n return Math.round(max - Math.random() * (max - min));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"function randomGauss(x = 2.0) {\n let u = 2 * Math.random() - 1;\n let v = 2 * Math.random() - 1;\n let r = u * u + v * v;\n /* if outside interval [0,1] start over */\n if (r == 0 || r >= 1) return randomGauss();\n const c = Math.sqrt((-x * Math.log(r)) / r);\n return (u * c) / 5;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":385,"value":"function wrap(value, from, to) {\n if (from > to) {\n let t = from;\n from = to;\n to = t;\n }\n let cycle = to - from;\n if (cycle === 0) {\n return to;\n }\n return value - cycle * Math.floor((value - from) / cycle);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"function mapRange(value, inputMin, inputMax, outputMin, outputMax, clamp) {\n let outVal =\n ((value - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) +\n outputMin;\n if (clamp) {\n if (outputMax < outputMin) {\n if (outVal < outputMax) outVal = outputMax;\n else if (outVal > outputMin) outVal = outputMin;\n } else {\n if (outVal > outputMax) outVal = outputMax;\n else if (outVal < outputMin) outVal = outputMin;\n }\n }\n return outVal;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}