​

let visual1;

let visual2;

let visual3;

let visual4;

let x;

let y;

​

​

function setup() {

  createCanvas(600, 600);

  background(0,0,0)

​

  osc1 = new p5.Oscillator();

  osc1.setType('sine');

  osc1.freq(240);

  osc1.amp(0);

  osc1.start();

​

  visual1 = new v1();

  visual2 = new v2();

  visual3 = new v3();

  visual4 = new v4();

}

​

function draw() {

  background(255);

​

  if (keyIsDown(LEFT_ARROW)) {

    osc1.amp(1, 0.5);

    osc1.freq(240);

    visual1.show();

  } else if (keyIsDown(RIGHT_ARROW)) {

    osc1.amp(1, 0.5);

    osc1.freq(540);

    visual2.show();

  } else {

    osc1.amp(0, 0.5);

  }

  if (keyIsDown(UP_ARROW)) {

    osc1.amp(1, 0.05);

    osc1.freq(300);

    visual3.show();

  } else if (keyIsDown(DOWN_ARROW)) {

    osc1.amp(1, 0.05);

    osc1.freq(600);

    visual4.show();

  }

}

​

class v1 {

  constructor() {

    this.x = width / 2;

    this.y = height / 2;

    this.w = width / 20;

    this.h = width / 20;

  }

  show() {

    background(255, 0, 0);

    noStroke();

    drawing1(0, 0);

    drawing1(90, 90);

    drawing1(180, 180);

    drawing1(270, 270);

    drawing1(360, 360);

    drawing1(450, 450);

    drawing1(540, 540);

    drawing1(180, 0);

    drawing1(270, 90);

    drawing1(360, 0);

    drawing1(450, 90);

    drawing1(540, 0);

    drawing1(0, 180);

    drawing1(0, 360);

    drawing1(90, 270);

    drawing1(180, 360);

    drawing1(90, 450);

    drawing1(0, 540);

    drawing1(180, 540);

    drawing1(270, 450);

    drawing1(360, 540);

    drawing1(540, 360);

    drawing1(360, 180);

    drawing1(540, 180);

    drawing1(450, 270);

    fill(153, 0, 0, 150);

    // text("bbbbbbeeeeeeeeeeeppppp.........", 10, 200);

    // text("bbbbbbeeeeeeeeeeeppppp.........", 10, 300);

    // text("bbbbbbeeeeeeeeeeeppppp.........", 10, 400);

    textSize(40);

    textStyle(BOLD);

    textStyle(ITALIC);

​

  }

}

​

class v2 {

  constructor() {

    this.x = width / 2;

    this.y = height / 2;

    this.w = width / 20;

    this.h = width / 20;

  }

  show() {

    ellipse(this.x, this.y, this.w, this.h);

    background(0, 77, 0);

    drawing2(0, 0);

    drawing2(60, 60);

    drawing2(120, 120);

    drawing2(180, 180);

    drawing2(240, 240);

    drawing2(300, 300);

    drawing2(360, 360);

    drawing2(420, 420);

    drawing2(480, 480);

    drawing2(540, 540);

    drawing2(600, 600);

    drawing2(0, 120);

    drawing2(0, 240);

    drawing2(0, 360);

    drawing2(0, 480);

    drawing2(0, 600);

    drawing2(600, 0);

    drawing2(600, 120);

    drawing2(600, 240);

    drawing2(600, 360);

    drawing2(600, 480);

    drawing2(600, 600);

    drawing2(540, 60);

    drawing2(480, 120);

    drawing2(420, 180);

    drawing2(360, 240);

    drawing2(240, 360);

    drawing2(180, 420);

    drawing2(120, 480);

    drawing2(60, 540);

    fill(0, 51, 0);

    // text("BBBBBBOOOOOOOPPPPP........", 0, 200);

    textSize(40);

    textStyle(BOLD);

    fill(0, 51, 0, 100);

    // text("BBBBBBOOOOOOOPPPPP........", 0, 300);

    fill(0, 51, 0, 50);

    // text("BBBBBBOOOOOOOPPPPP........", 0, 400);

​

​

  }

}

class v3 {

  constructor() {

    this.x = width / 2;

    this.y = height / 2;

    this.w = width / 20;

    this.h = width / 20;

  }

  show() {

    background(255, 255, 204);

    noStroke();

    drawing3(200, 0);

    drawing3(300, 0);

    drawing3(200, 100);

    drawing3(300, 100);

    drawing3(200, 200);

    drawing3(300, 200);

    drawing3(200, 300);

    drawing3(300, 300);

    drawing3(200, 400);

    drawing3(300, 400);

    drawing3(200, 500);

    drawing3(300, 500);

    fill(102, 102, 0);

//     text("beepboop", 25, 50);

//     text("beepboop", 25, 100);

//     text("beepboop", 25, 150);

//     text("beepboop", 25, 200);

//     text("beepboop", 25, 250);

//     text("beepboop", 25, 300);

//     text("beepboop", 25, 350);

//     text("beepboop", 25, 400);

//     text("beepboop", 25, 450);

//     text("beepboop", 25, 500);

//     text("beepboop", 25, 550);

//     text("beepboop", 25, 600);

//     text("beepboop", 390, 50);

//     text("beepboop", 390, 100);

//     text("beepboop", 390, 150);

//     text("beepboop", 390, 200);

//     text("beepboop", 390, 250);

//     text("beepboop", 390, 300);

//     text("beepboop", 390, 350);

//     text("beepboop", 390, 400);

//     text("beepboop", 390, 450);

//     text("beepboop", 390, 500);

//     text("beepboop", 390, 550);

//     text("beepboop", 390, 600);

  }

}

class v4 {

  constructor() {

    this.x = width / 2;

    this.y = height / 2;

    this.w = width / 20;

    this.h = width / 20;

  }

  show() {

    noStroke();

    background(0, 204, 204);

    drawing4(100, 100);

    drawing4(300, 100);

    drawing4(500, 100);

    drawing4(100, 300);

    drawing4(300, 300);

    drawing4(500, 300);

    drawing4(100, 500);

    drawing4(300,500);

    drawing4(500, 500);

    fill(0);

    // text("BEEP BEEP BEEP", 140, 300);

  }

}

​

​

function drawing1(drawing1X, drawing1Y) {

  fill(255, 179, 179);

  rect(drawing1X, drawing1Y, 90, 90);

  fill(255, 102, 102);

  rect(drawing1X, drawing1Y, 30, 30);

  rect(drawing1X + 60, drawing1Y, 30, 30);

  rect(drawing1X + 30, drawing1Y + 30, 30, 30);

  rect(drawing1X + 60, drawing1Y + 60, 30, 30);

  rect(drawing1X, drawing1Y + 60, 30, 30);

​

}

​

function drawing2(drawing2X, drawing2Y) {

  noStroke();

  fill(0, 153, 0);

  ellipse(drawing2X, drawing2Y, 60, 60);

  fill(51, 255, 51);

  ellipse(drawing2X, drawing2Y, 40, 40);

  ellipse(drawing2X - 38, drawing2Y - 20, 20, 20);

  fill(0, 153, 0);

  ellipse(drawing2X - 20, drawing2Y + 35, 10, 10);

  ellipse(drawing2X + 20, drawing2Y - 35, 10, 10);

​

}

​

function drawing3(drawing3X, drawing3Y){

  fill(255, 255, 0);

  rect(drawing3X, drawing3Y, 100, 100);

  fill(179, 179, 0);

  rect(drawing3X+25, drawing3Y+25, 50, 50); 

} 

​

function drawing4(drawing4X, drawing4Y){

  fill(204, 255, 255);

  ellipse(drawing4X, drawing4Y, 100, 100);

  fill(0, 255, 255);

  rect(drawing4X, drawing4Y, 50, 50);

  fill(0, 77, 77)

  ellipse(drawing4X+10, drawing4Y, 25, 25);

}