Colors

let r1, g1, b1, a1, r2, g2, b2, a2;

let x1, y1, x2, y2;

let ball1, ball2;

let s1 = 5;

let s2 = 5;

​

let osc1, osc2;

​

function setup() {

  createCanvas(600, 600);

  background(10);

  x1 = width-width/3;

  y1 = height/2;

  x2 = width/3;

  y2 = height/2;

  a1 = 50;

  a2 = 50;

  // randomize start color

  r1 = random(255);

  g1 = random(255);

  b1 = random(255);

  r2 = random(255);

  g2 = random(255);

  b2 = random(255);

  //osc1.setType('sine');

  //osc1.freq(240);

  //osc1.amp(0);

​

}

​

function draw() {

  if (keyIsDown(LEFT_ARROW) && x1 >= 0){

    x1 -= s1;

  }

  if (keyIsDown(RIGHT_ARROW) && x1 <= width) {

    x1 += s1;

  }

  if (keyIsDown(DOWN_ARROW) && y1 <= height) {

    y1 += s1;

  }

  if (keyIsDown(UP_ARROW) && y1 >= 0){

    y1 -= s1;

  }

  // a

  if (keyIsDown(65) && x2 >= 0){

    x2 -= s2;

  }

  // d

  if (keyIsDown(68) && x2 <= width){

    x2 += s2;

  }

  // w

  if (keyIsDown(87) && y2 >= 0){

    y2 -= s2;

  }

  // s

  if (keyIsDown(83) && y2 <= height){

    y2 += s2

  }

  noStroke();

  // ball 1

  push(); 

  fill(r1, g1, b1, a1);

  ellipse(x1, y1, 50, 50);

  pop();

  // ball 2

  push(); 

  fill(r2, g2, b2, a2);

  ellipse(x2, y2, 50, 50);

  pop();  

}

​

function keyPressed(){

  if (keyCode === ENTER){

    saveCanvas('myCanvas', 'jpg');

  }

}

​

​