dnoh-sectionD-project3-dynamicdrawing

sketch

// red = 205, 63, 63
// green = 63, 205, 63

var liney = 20;
var redX = -15;
var redX2 = 655;
var blueY = -15;
var blueY2 = 495;
var lineT = 0;
var lineB = 480;
var lineL = 0;
var lineR = 640;
var whiteFill = 255;
var lineStrokeR = 63;
var lineStrokeG = 205;
var lineStrokeB = 63;

function setup() {
  createCanvas(640,480);
  background(39,48,47);
}

function draw() {
  background(39,48,47);
//refreshing background

//blinking effect in background
  stroke(39,64,47);
  line(0,liney,width,liney);
  line(0,liney+40,width,liney+40);
  line(0,liney+80,width,liney+80);
  line(0,liney+120,width,liney+120);
  line(0,liney+160,width,liney+160);
  line(0,liney+200,width,liney+200);
  line(0,liney+240,width,liney+240);
  line(0,liney+280,width,liney+280);
  line(0,liney+320,width,liney+320);
  line(0,liney+360,width,liney+360);
  line(0,liney+400,width,liney+400);
  line(0,liney+440,width,liney+440);
  line(0,liney+480,width,liney+480);
  line(0,liney+520,width,liney+520);
  line(0,liney+560,width,liney+560);
  line(0,liney+600,width,liney+600);
  line(0,liney+640,width,liney+640);
  liney = liney + 80;

  if (liney > height) {
    liney = 0;
  }
//reset green lines to make it blink

//color blocks that shoot out
  noStroke();
  rectMode(CENTER);
  fill(0,255,255); //c
  rect(redX,mouseY,20,20);
  redX = redX - 25;
  fill(255,0,255); //m
  rect(redX2,mouseY,20,20);
  redX2 = redX2 + 25;
  fill(255,255,0); //y
  rect(mouseX,blueY,20,20);
  blueY = blueY - 25;
  fill(0); //k
  rect(mouseX,blueY2,20,20);
  blueY2 = blueY2 + 25;

//green crooshair
  stroke(lineStrokeR,lineStrokeG,lineStrokeB);
  strokeWeight(2);
  line(mouseX,lineB,mouseX,lineT);
  line(lineL,mouseY,lineR,mouseY);

  var rectX = 20;
//white box in crosshair
  fill(whiteFill);
  rect(mouseX,mouseY,rectX,rectX);

//white box enlarges when pressed, white box becomes gray, green becomes red
  if (mouseIsPressed) {
    lineM1 = mouseX-50;
    lineV1 = mouseY-50;
    lineM2 = mouseX+50;
    lineV2 = mouseY+50;
    lineM3 = mouseX+50;
    lineV3 = mouseY-50;
    lineM4 = mouseX-50;
    lineV4 = mouseY+50;
    line(lineM1,lineV1,lineM2,lineV2);
    line(lineM3,lineV3,lineM4,lineV4);

    ellipse(mouseX,mouseY,70,70);
    lineStrokeR = 255;
    lineStrokeG = 63;
    lineStrokeB = 63;
    whiteFill = 80;
  } else {
    whiteFill = 255;
    lineStrokeR = 63;
    lineStrokeG = 205;
    lineStrokeB = 63;
  }
  print(mouseIsPressed);
}



function mouseClicked() { //when mouse is clicked, the color squares jump to mouse and start moving again
  redX = mouseX;
  redX2 = mouseX;
  blueY = mouseY;
  blueY2 = mouseY;
}

The background lines are constantly blinking to add an effect of constant movement. The mouse is followed by a vertical and horizontal line that changes colors from green to red when clicked. When clicked, the square in the center changes colors and shapes. Finally, four color blocks jump out of the crosshair when clicked.

Initially I wanted to create a code that would print a square wherever I clicked and the four blocks would collide into that square. However, I could not figure out a code that would let me keep the square after I clicked it.