----- Coding Tutorial by Patt Vira ----- 

Name: Firey Logo

Video Tutorial: https://youtu.be/U-v5Yt11ar8?si=xcgCf2El5GNetu7a

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

​

// let pos = 1;

// let vel = 1;

let pos = [];

let vel = [];

let count = 10;

let spacing = 15;

let angle = 0;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  for (let i=0; i<count; i++){

    pos[i] = 1;

    vel[i] = (i+1) * 0.5;

  }

}

​

function draw() {

  background(20);

  noFill();

  translate(width/2, height/2);

  strokeWeight(4);

  for (let i=0; i<count; i++){

    pos[i] = constrain(pos[i], 0, 180);

    stroke(200, 120*(i/count), 0);

    arc(0, 0, (i+1)*spacing, (i+1)*spacing, angle+0, angle+pos[i]);

    arc(0, 0, (i+1)*spacing, (i+1)*spacing, angle-180, angle-180+pos[i]);

  }

  for (let i=0; i<count; i++){

    if (pos[i] >= 180 || pos[i] <=0){

      vel[i] = vel[i] *-1;

    }

    pos[i] = pos[i] + vel[i];

  }

  angle = angle+0.5;

}