mdambruc-Project-03-Dynamic Drawing

project-03

//Mairead Dambruch
//mdambruc@andrew.cmu.edu
//Section C
//Project-03
var xT;// x value for turquoise circles
var yT; // y value for turquoise circles

var diamx = 30; //x value diameter
var diamy = 30; // y value diameter

var diffx = 0;
var diffy = 0;// x and y values to get dragging effect

var drag = .05; //speed of dragging effect

var swarmX = 300;
var swarmY = 300;// original ball orientation

var swarmXA = 200;
var swarmYA = 200;//copy A ball orientation

var swarmXB = 100;
var swarmYB = 100;//copy B ball orientation

var swarmXC = 400;
var swarmYC = 400;//copy C ball orientation

function setup() {
    createCanvas(640, 480);
    xT = width/2;
    yT = height/2; // original orientation of turqoise circles
}

function draw() {

  var colR = map(mouseY, 0, height, 0, 255);
  var colG = map(mouseY, 0, height, 95, 95);
  var colB = map(mouseY, 0, height, 120, 120); //magic numbers are being used for color
    background(colR, colG, colB);

  diffx = mouseX - swarmX;
  diffy = mouseY - swarmY; // subtracting to get same position

  swarmX = swarmX + drag*diffx;
  swarmY = swarmY + drag*diffy; //specific speed of drag

  noStroke();
  fill(255);
  ellipse(swarmX, swarmY, diamx, diamy);//original circle

  diffx = mouseX - swarmXA;
  diffy = mouseY - swarmYA;
  swarmXA = swarmXA + (drag*2) *diffx;
  swarmYA = swarmYA + (drag*2) *diffy;
  noStroke();
  fill(255);
  ellipse(swarmXA, swarmYA, diamx, diamy);//altered circle A

  diffx = mouseX - swarmXB;
  diffy = mouseY - swarmYB;
  swarmXB = swarmXB + (drag/2)*diffx;
  swarmYB = swarmYB + (drag/2)*diffy;
  noStroke();
  fill(255);
  ellipse(swarmXB, swarmYB, diamx, diamy);//altered circle B

  diffx = mouseX - swarmXC;
  diffy = mouseY - swarmYC;
  swarmXC = swarmXC + (drag/4) *diffx;
  swarmYC= swarmYC + (drag/4) *diffy;
  noStroke();
  fill(255);
  ellipse(swarmXC, swarmYC, diamx, diamy);//altered circle C

  if (mouseIsPressed) //changes x diameter of ellipses
   diamx = 50;
   else {
     diamx = 30;
   }

  noStroke();
  fill("Turquoise");
  ellipse(xT, yT, diamx, diamy); //original turquoise circle
  noStroke();
  fill("Turquoise");
  ellipse(xT, yT/2, diamx, diamy); // altered position
  noStroke();
  fill("Turquoise");
  ellipse(xT/2, yT/2, diamx, diamy);//Altered position
  noStroke();
  fill("Turquoise");
  ellipse(xT/2, yT, diamx, diamy);//altered position

  if (mouseX > xT) {
    xT -= 1;
    offset = 5;//moves circles to the left if x variable of mouse is greater
  }

  if (mouseX < xT){
    xT += 1;
    offset = 5; // moves circles to the right if x variable of mouse is lesser
  }
}

I struggled a lot with many aspects of this assignment – mostly the functions and how they are able to be used without effecting other parts of the drawing. My drawing uses a few functions to vary different aspects of the piece and I am hoping to get better at being efficient at variables and hopefully more elaborate with designs. My drawing uses both the position of the mouse and the mousePressed function.