​

GD 355, W3

Geometric Compositions, Round

​

Ibrahim Noon, 2020

​

Click the mouse to inverse the direction;

Use the arrow keys to alter the speed, and path of the animation.

​

*/

​

let angle1 = 0;

let angle2 = 0;

let angle3 = 0;

​

let scalar = 50;

let speed = 1;

​

let yr = 3;

​

function setup() {

  createCanvas(500, 500);

  background(25);

}

​

function draw() {

  blendMode(BLEND);

  background(25, 5);

  noStroke();

  fill(255);

​

  let ang1 = radians(angle1);

  let ang2 = radians(angle2);

  let ang3 = radians(angle3);

​

  // cosine, and sin used for x, and y respectively generate a circular path

  let x1 = width * 0.5 + (scalar * 3) * cos(ang1); // eg. 250 + 70 * cos(0) = 320

  let x2 = width * 0.5 + (scalar * 3) * cos(ang2);

  let x3 = width * 0.5 + (scalar * 3) * cos(ang3);

​

  let y1 = width * 0.5 + (scalar * yr) * sin(ang1); // eg. 250 + 70 * sin(0) = 250

  let y2 = width * 0.5 + (scalar * yr) * sin(ang2);

  let y3 = width * 0.5 + (scalar * yr) * sin(ang3);

​

  // Speed mechanics

  if (keyIsDown(37)) {

    speed -= 0.1;

  }

  if (keyIsDown(39)) {

    speed += 0.1;

  }

​

  // Experimental 2.5D rotation

  if (keyIsDown(40)) { // 

    yr -= 0.1;

  }

  if (keyIsDown(38)) {

    yr += 0.1;

  }

​

  // yr upper and lower bounds

  if (yr <= -3) {

    yr = -3;

  }

  if (yr >= 3) {

    yr = 3;

  }

​

  blendMode(ADD);

​

  fill(255, 0, 0);

  ellipse(x1, y1, scalar, scalar);

  fill(0, 255, 0);

  ellipse(x2, y2, scalar, scalar);

  fill(0, 0, 255);

  ellipse(x3, y3, scalar, scalar);

​

  angle1 += 1 * speed;

  angle2 += 2 * speed;

  angle3 += 3 * speed;

}

​

function mousePressed() {

  speed = speed * -1;

}

​

/*

​

references

​

https://p5js.org/examples/math-sine-cosine.html

​

*/