var r = 10;

var keyworkDistance = 70;

​

​

function setup() {

  createCanvas(870, 388);

  background(0);

 // colorMode(HSB, 360, 100, 100);

  frameRate(6); 

​

}

​

function draw() {

​

//   var x = r * cos(a);

//   var y = r * sin(a);

​

//   a += 100;

//   r += 0.7;

​

//   push();

//   translate(width/2, height/2);

//   noStroke();

//   fill(frameCount%100000, 1000, 100);

//   ellipse(x, y, 30, 30);

//   pop();

//   noStroke();

//   for (let i = 0; i < 1000; i++) {

//     fill(random(255), random(255), random(255), random(255));

//     ellipse(random(870), random(388), random(100));}

  if(mouseX<width/2)

  {

    background(0);

    stroke(0);

  }

  else

  {

    var edgedist = map(mouseX,.5*width,.75*width,0,255);

    stroke(random(0,edgedist),random(0,edgedist),random(0,edgedist)); 

  }

  var size = map(mouseX/10, 0, width, 1, 4.5);

  //float xPos;

  //float yPos;

  for (var x = -width/2; x<= width/size+100; x = x+keyworkDistance)

  {

    for (var y = -height/2; y<=height/size+100; y = y+keyworkDistance)

    {

      var xPos = x + random(mouseX/50);

      var yPos = y + random(mouseX/50);

      //float z = if(mouseX 

      keywork(xPos, yPos, size);

​

    }

  }

​

  let x2;

​

  //loading the gif as bg

  //background(gif);

  //making the head

  fill(255,255,255);

  strokeWeight(0);

  stroke(255,255,255);

  arc((870/2)-31,(388/2)-30+40,125,120,PI,0);

  stroke(255,255,255);

  strokeWeight(3);

  line(344,203,350,250);

​

  line(464,203,458,250);

  line(350,250,375,280);

  line(458,250,433,280);

  line(375,280,387,290);

  line(433,280,421,290);

  line(387,290,395,295);

  line(421,290,413,295);

  line(413,295,395,295);

​

  //making the eyeballs

  fill(255,255,255);

  ellipse(380,225,17);

  ellipse(430,225,17);

​

  //making the pupils

   let xLeft = 380;

   let xRight = 430; 

   let y2 = 225;

   let change = 0;

​

  //let L1 = [5,-5];

​

  //let timer = 0; 

  //if (millis() >= 1000+timer) {

    //background(random(255),random(255),random(255));

    //change = random(L1);

   // timer = 1000+millis();

  //}

​

  fill(0,0,0);

  ellipse(xLeft,y2+change,16);

  ellipse(xRight,y2+change,16);

​

​

  //neck 

  line(366,270,366,325);

  line(442,270,442,325);

​

  //shoulders

  stroke(255,255,255);

  line(442,300,480,310);  //right 

  line(366,300,330,315);  //left 

  line(330,315,280,340); //left 

  line(480,310,530,335); //right 

  line(280,340,265,400);  //left 

  line(530,335,545,400);  //right 

​

  //suit

  fill(0,0,0);

  strokeWeight(1);

  stroke(0,0,0);

  //right side

  quad(420,400,442,300,480,310,530,335);

  triangle(420,400,530,335,545,400);

​

  //left side

  quad(390,400,366,300,280,340,265,400);

  triangle(420,400,530,335,545,400);

​

  //shirt

  stroke(255);

  strokeWeight(3);

  fill(255);

  triangle(366,300,400,600,442,300);

​

  //collar

  stroke(0,0,0);

  strokeWeight(2);

  triangle(366,300,380,320,404,300);

  triangle(442,300,428,320,405,300);

​

  //buttons

  let b;

  for(b=0; b<=5;b++){

    circle(404,b*20+320,10);

  }

}

​

​

function keywork(x, y, zoom)

{

  push();

  translate(-width/20,-height/20);

  scale(zoom);

  translate(width/20,height/20);

​

  //fill();

  // for (let i = 0; i < 1000; i++) {

  fill(random(255), random(255), random(255), random(255));

  //strokeWeight(2);

  //stroke(r, g, b);

  ellipse(x, y, 10, 10);

  triangle(x, y-20, x-20, y+13, x+20, y+13);

  ellipse(x, y+25, 10, 10);

  ellipse(x-20, y-13, 10, 10);

  ellipse(x+20, y-13, 10, 10);

  ellipse(x, y-30, 35, 35);

  ellipse(x-22, y+13, 35, 35);

  ellipse(x+22, y+13, 35, 35);

  pop();

}

​

​

​

​