* Designing Programs

 * Web site: https://designingprograms.bitbucket.io

 *

 * Sketch: class_02b

 * version: V0.05

 * Author: m.Webster 2019

 * https://area03.bitbucket.io/

 *

 */

​

let ball_01;

let ball_02;

let isChange = false;

​

function setup() {

  createCanvas(680, 360);

  background(0, 0, 33);

  smooth();

  noStroke();

  ball_01 = new Ball(200, height / 2);

  ball_02 = new Ball(450, height / 2);

}

​

function draw() {

  fill(0, 0, 33, 13);

  rect(0, 0, width,height);

​

​

  //our methods

  ball_01.oscillateY(0.06, 135);

  if (isChange) {

    ball_01.oscillateDia(0.035, 90);

  } else {

    ball_01.oscillateX(0.095, 60);

  }

    ball_01.display();

​

​

  if (isChange) {

    ball_02.oscillateY(0.06, 70);

    ball_02.oscillateDia(0.05, 75);

  } else {

    ball_02.oscillateDia(0.035, 135);

  }

  ball_02.display();

​

  fill(255);

  textSize(14);

  text("Press ' m '", 10, 350);

​

​

};

​

function keyTyped() {

  if (key === 'r') {

    setup();

  }

  if (key === 'm') {

    isChange = !isChange;

  }

}

​

​

​

class Ball {

​

  // The constructor enables the creation of objects.

  // ***!IMPORTANT!***

  constructor(_x, _y) {

    // Our class fields (global variables that belong to our class)

    this.x = _x;

    this.y = _y;

    this.dia = random(25, 75);

    this.offDia = 0;

    this.vx = 0;

    this.vy = 0;

  }

​

  // Next we define our methods

  display() {

    fill(255);

    //note the use of our fields (variables)

      ellipse(this.x + this.vx, this.y + this.vy, this.dia + this.offDia, this.dia + this.offDia);

  }

​

​

  // our various methods

  oscillateX(_freq, _amp) {

    this.vx = sin(frameCount * _freq) * _amp;

  }

​

  oscillateY(_freq, _amp) {

    this.vy = sin(frameCount * _freq) * _amp;

  }

​

  oscillateDia(_freq, _amp) {

    this.offDia = sin(frameCount * _freq) * _amp;

  }

​

}