How do I slow an animation down in canvas-sketch?

Question

In line 6, you'll see that I have animate as true. I tried adding a duration and lowering the fps, but this doesn't impact the movement speed. I've come to the conclusion that the duration and fps don't impact the animation speed as it doesn't impact other canvas sketch animations I've worked on. I could be wrong.

Thanks for checking out this post.

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, // <––––––––––––––––––––– line 6
  duration: 3,   // <–––––––––––––––––––––
  fps: 5,        // <–––––––––––––––––––––
};

const sketch = () => {
  return ({ context, width, height }) => {
    context.fillStyle = 'white';
    context.fillRect(0, 0, width, height);

    // Gradient
    let gradient = context.createLinearGradient(0, 0, width * 1.2, 0);
    gradient.addColorStop("0", "gold");
    gradient.addColorStop("0.03" ,"mediumblue");
    gradient.addColorStop("0.99" ,"gold");
    context.fillStyle = gradient;
    context.strokeStyle = gradient;

    const cx = width * 0.5;
    const cy = height * 0.5;
    const w = width * 0.012;
    const h = height * 0.12;
    let x, y;

    const num = 60;
    const radius = width * 0.36

    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);

      // Scale of strokes
      context.save();
      context.translate(x, y);
      context.rotate(-angle);
      context.scale(random.range(0.1, 2.1), random.range(0.12, 1.2));
  
      // Placement of strokes
      context.beginPath();
      context.rect(-w * 2.7, random.range(3, -h * 1.5), w, h);
      context.fill();
      context.restore();

      context.save();
      context.translate(cx, cy);
      context.rotate(-angle);

      // Arc thickness
      context.lineWidth = random.range(5, 20);

      // Arc/slice width
      context.beginPath();
      // Arc distance from the center, arc rotation length
      context.arc(0, 0, radius * random.range(0.6, 1.2), slice * random.range(0.6, -33), slice * random.range(1.2,45));
      context.stroke();
      context.restore();
    }
  };
};

canvasSketch(sketch, settings);

How do I slow an animation down in canvas-sketch?

0 Answers0