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

Name: Rotating Polygons on the Major Scale

Video Tutorial: https://youtu.be/Rx4VVeREGvM

​

Inspired by AlgoMotion's Video: https://youtu.be/V0YH8M6C-VM?si=Vb5cV-H8AbKc6wBU

​

Connect with Patt: @pattvira

https://www.pattvira.com/

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

*/

​

// Sound Assets

let assets = ["C1.mp3", "D1.mp3", "E1.mp3", "F1.mp3", "G1.mp3", "A1.mp3", "B1.mp3", "C2.mp3", "D2.mp3", "E2.mp3", "F2.mp3", "G2.mp3", "A2.mp3", "B2.mp3", "C3.mp3"]; 

let sound = [];

​

// Notes Variables

let num; let r = 150; let cr = 0.5;

let notes = []; 

​

// Shape Variables

let angleV = 0;

let shapeNum = 7;

let speed = 0.5;

let hueValue = 0;

​

function preload() {

  for (let i=0; i<assets.length; i++) {

    sound[i] = loadSound("assets/" + assets[i]);

  }

}

​

function setup() {

  createCanvas(400, 400);

  num = sound.length;

  angleMode(DEGREES);

  colorMode(HSB, 255);

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

    let angle = 360/num * i;

    notes[i] = new Note(r, angle, cr, sound[i]);

  }

}

​

function draw() {

  background(220, 30);

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

    beginShape();

    for (let j=0; j<shapeNum; j++) {

      let startingAngle = 360 / shapeNum * j;

      let x = width/2 + r*cos(startingAngle + angleV);

      let y = height/2 + r*sin(startingAngle + angleV);

      vertex(x, y);

      notes[i].update(x, y, 1);

      noStroke();

      if (notes[i].collide) {

        fill(hueValue, 255, 255);

      } else {

        noFill();

      }

      ellipse(x, y, 30, 30);

      notes[i].display();

    }

    endShape(CLOSE);

  }

  if (hueValue > 255) {

    hueValue = 0;

  }

  hueValue += 1; 

  angleV += speed;

​

}