Estoy trabajando con la producción de diseño generativo en javascript y me gusta lo que tengo hasta ahora.
El último paso que espero es ver esta transición menos como un gif y más fluida como una animación. En una tarea diferente, vi cómo hacer que los puntos se movieran en la pantalla. ¿Es esto posible de manera similar con los arcos aquí?
const canvasSketch = require('canvas-sketch'); const math = require('canvas-sketch-util/math'); const random = require('canvas-sketch-util/random'); const settings = { dimensions: [ 1080, 1080 ], animate: true, fps: 1.2, playbackRate: 'throttle' }; const degToRad = (degrees) => { return degrees / 180 * Math.PI; }; const randomRange = (min, max) => { return Math.random() * (max - min) + min; } const sketch = () => { return ({ context, width, height }) => { context.fillStyle = '#ccebff'; context.fillRect(0, 0, width, height); context.fillStyle = '#d78465'; const cx = width * 0.5; const cy = height * 0.5; const w = width * 0.008; const h = height * 0.3 let x,y; const num = 12; const radius = width * 0.2; for (let i = 0; i < num; i++) { const slice = math.degToRad(360 / num); const angle = slice * i; x = cx + radius * Math.sin(angle); y = cy + radius * Math.cos(angle); // spokes // context.save(); // context.translate(x,y); // context.rotate(-angle); // context.scale(random.range(0.8, 2), random.range(0.3, 0.9));; // context.beginPath(); // context.rect(-w * 0.6, random.range(0, -h * 0.5), w, h); // context.fill(); // context.restore(); // light blue spirals, inner context.save(); context.translate(cx, cy); context.rotate(-angle); context.lineWidth = random.range (5, 20);; context.beginPath(); context.strokeStyle = '#52bafc'; context.arc(0, 0, radius * random.range(0.7, 1.8), slice * random.range(0, -5), slice * random.range(1, 7)); context.stroke(); context.restore(); // dark blue spirals, outer context.save(); context.translate(cx, cy); context.rotate(-angle); context.lineWidth = random.range (8, 15);; context.beginPath(); context.strokeStyle = 'blue'; context.arc(0, 0, radius * random.range(0.9, 2), slice * random.range(1, -8), slice * random.range(1, 6)); context.stroke(); context.restore(); } }; }; canvasSketch(sketch, settings);Lo que viste sobre cómo hacer que los puntos se muevan en la pantalla probablemente sea correcto. Aquí hay un "boceto" de la idea.
La demostración es de MDN
Además, lea más sobre el bucle del juego .
const sun = new Image(); const moon = new Image(); const earth = new Image(); function init() { sun.src = 'https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_sun.png'; moon.src = 'https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_moon.png'; earth.src = 'https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations/canvas_earth.png'; window.requestAnimationFrame(draw); } function draw() { const ctx = document.getElementById('canvas').getContext('2d'); ctx.globalCompositeOperation = 'destination-over'; ctx.clearRect(0, 0, 300, 300); // clear canvas ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; ctx.save(); ctx.translate(150, 150); // Earth const time = new Date(); ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); ctx.translate(105, 0); ctx.fillRect(0, -12, 40, 24); // Shadow ctx.drawImage(earth, -12, -12); // Moon ctx.save(); ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); ctx.translate(0, 28.5); ctx.drawImage(moon, -3.5, -3.5); ctx.restore(); ctx.restore(); ctx.beginPath(); ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit ctx.stroke(); ctx.drawImage(sun, 0, 0, 300, 300); window.requestAnimationFrame(draw); } init(); <canvas id="canvas" width="300" height="300"></canvas>