Category: Section C

So yeah, I know: this project was all “don’t use random elements.”

And I tried that. But no matter how hard I tried, I couldn’t stop playing around with this piece of code. It’s a dynamic pattern-maker, based on the “rect ()” command and mouse locations.

While this program may seem to be very randomly generated, there is actually a lot of user input being taken into consideration.

I have divided the screen into four quadrants. When the mouse enters each of those quadrants, different things happen. Some of these effects include: box trajectory, size of boxes, color of boxes, and more. Also, the user may click at any time to generate boxes at any location on the canvas. One unfortunate thing is that it looks a lot more interesting on a bigger canvas! It resets when the Y variable for the boxes exceeds the canvas, so that’s why it’s a bit awkward in WordPress.

Here are some photos!

I have posted two versions of this program because I did a lot of stuff with it, and I really enjoyed its versatility. Enjoy!

Vanilla pattern-maker:

Jdbrown – p3

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project #3

// Setting up global variables for size and location of drawn shape

var nothingX = 0;
var nothingY = 0;
var bright = 0;
var nothingA = 0;
var nothingZ = 0;

function setup () {
  createCanvas (640, 480);
  background (255);
  stroke (255);
  fill (0);
}

function draw () {

  // Making function draw more quickly (default = 30), so this doesn't take forever;

  var rate = width / mouseY * 4 + 24;
  frameRate (rate);

  // Giving program a 50% chance of drawing one of each shape (variations on rectangle);

  if (random (1) > 0.5) {
    fill (mouseX/2, mouseY/2, random (255));
    rect (nothingX, nothingY, nothingX + random (30), nothingY + random (5));
    rect (nothingX + 30, nothingY + 50 + random (30), nothingX + random (30), nothingY + random (5));
    rect (nothingX + 60, nothingY + 100 + random (30), nothingX + random (30), nothingY + random (5));
  }
  else {
    rect (nothingX, nothingY + random (30), nothingX + random (50), nothingY);
  }

  // Making the program respond to mouse position,
  // Resets when leaving the frame (horizontally);

  nothingX += 5;
  if (nothingX > width) {
    nothingX = 0;
    nothingY += random (50);
  }

  if (mouseX > width/2) {
    nothingX -= 10;
  } else {nothingX += 5;}

  if (nothingX < 0) {
    nothingX = 640;
    nothingY += random (30);
  }

  if (nothingY > height) {
    background (255);
  }

  /* this piece of code makes the rectangles move up or down depending on mouse position;
  if (mouseY > height/2) {
    nothingY += 5;
  }

  if (mouseY < height/2) {
    nothingY -= 5;
  }
  */

  // Resets when leaving the frame (vertically);

  if (nothingY > height) {
    nothingX = 0;
    nothingY = 0;
  }
}

function mousePressed () {

  // When clicked, the program will relocate the "brush" (location at which DRAW is working)
  // to wherever the click occurred (mouse location at click);
  nothingX = mouseX;
  nothingY = mouseY;
}

Random fun stuff version, for example:

Jdbrown – p3

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project #3

// Setting up global variables for size and location of drawn shape

var nothingX = 0;
var nothingY = 0;
var bright = 0;
var nothingA = 0;
var nothingZ = 0;

function setup () {
  createCanvas (640, 480);
  background (255);
  stroke (255);
  fill (0);
}

function draw () {

  // Making function draw more quickly (default = 30), so this doesn't take forever;

  var rate = width / mouseY * 4 + 24;
  frameRate (rate);

  // Giving program a 50% chance of drawing one of each shape (variations on rectangle);

  if (random (1) > 0.5) {
    fill (mouseX/2, mouseY/2, random (255));
    rect (nothingX, nothingY, nothingX + random (30), nothingY + random (5));
    rect (nothingX + 30, nothingY + 50 + random (30), nothingX + random (30), nothingY + random (5));
    rect (nothingX + 60, nothingY + 100 + random (30), nothingX + random (30), nothingY + random (5));
  }
  else {
    rect (nothingX, nothingY + random (30), nothingX + random (50), nothingY);
  }

  // Making the program respond to mouse position,
  // Resets when leaving the frame (horizontally);

  nothingX += 5;
  if (nothingX > width) {
    nothingX = 0;
    nothingY += random (50);
  }

  if (mouseX > width/2) {
    nothingX -= 10;
  } else {nothingX += 5;}

  if (nothingX < 0) {
    nothingX = 640;
    nothingY += random (30);
  }

  if (nothingY > height) {
    background (255);
  }

  if (mouseY > height/2) {
    nothingY += 5;
  }

  if (mouseY < height/2) {
    nothingY -= 5;
  }

  // Resets when leaving the frame (vertically);

  if (nothingY > height) {
    nothingX = 0;
    nothingY = 0;
  }
}

function mousePressed () {

  // When clicked, the program will relocate the "brush" (location at which DRAW is working)
  // to wherever the click occurred (mouse location at click);
  nothingX = mouseX;
  nothingY = mouseY;
}

Thanks,
Josh

 

“Broken Telly”

(Note:If you expand your browser to fit your computer screen, you should be able to see the whole program)

sketch

//Isadora Krsek 
//Section C
//IKrsek@andrew.cmu.edu
//Project 03: Dynamic Drawings 
//Title: "Broken Telly"
   
//global variables
    var rotX = (453); //center of rotation for red ball (x-coordinate)
    var rotY = (390); //center of rotation for red ball (y-coordinate)
    var row = (50);
    var turnOffX = 1;
    var turnOffY = 1;
    var RB; //stands for "red-bit" as in the metal dial's indicator 
    var antLength = (166);
    var antX; 
    var antY; 
    var antX2;
    var antY2;
    var angle1;
    var angle2;
    var Bri;
    var ThiccThin;
    var Ang; 
    var Spacing; 
    var staticX = (0);
    var staticY = (0);
    var staticX2 = (0); 
    var staticY2 = (0);
    var staticX3 = (0); 
    var staticY3 = (0);
    var staticX4 = (0); 
    var staticY4 = (0);
    var staticX5 = (0); 
    var staticY5 = (0);
    var staticX6 = (0); 
    var staticY6 = (0);
    var last = -1; 
    var current; 
    
    
function setup() {
    createCanvas (640, 480);
    background(51,52,44);
    RB = new RedBit(rotX, rotY, 16); // (x,y,diameter) --> x,y represent the center of rotation
    antX = width/2-30;//origin point of left antennae's x
    antY = height/2-55;//origin point of left antennae's y
    antX2 = width/2-30;//origin point of right antennae's x
    antY2 = height/2-55;//origin point of right antennae's y
}

function tvFrame() {
    stroke(135,77,32); //the color of wood edge
    strokeWeight(16);
    line(600,400,600,0); //vertical right wood line
    line(0,0,600,0); //horizontal top wood line
    line(0,0,0,400); //vertical left wood line
    line(0,400,600,400); //horizontal bottom wood line
  //beggining of white OUTER plastic part ...  subtract each x/y value by 14
    strokeCap(PROJECT);
    stroke(236,221,188);
    strokeWeight(12);
    line(586,386,586,14); //vertical right white plastic line 
    line(14,14,586,14); //horizontal top white line
    line(14,14,14,386); //vertical left white line
    line(14,386,586,386); //horizontal bottom white line
  //beggining of black plastic part (no stroke) ... subtract each x/y value by 
    stroke(7,7,7);
    strokeWeight(150);
    line(505,225,505,95); // right side black big panel
    strokeWeight(22);
    line(31,31,564,31); // top black plastic line
    strokeWeight(20);
    line(31,31,31,290); // vertical left black plastic line
  //big plastic white part alternating with black (below)
    stroke(178,163,134);
    strokeWeight(80);
    line(60,340,540,340);
  //control panel
    stroke(208,207,187); 
    strokeWeight(4); // metal panel frame
    fill(166,162,150); // metal panel color
    rect(455,30,100,330); // metal panel 
    //sound holes 
    noStroke();
    fill(60);
    rect(468,row+10,75,5);
    rect(468,row+20,75,5);
    rect(468,row+30,75,5);
    rect(468,row+40,75,5);
    rect(468,row+50,75,5);
    rect(468,row+60,75,5);
    rect(468,row+70,75,5);
    rect(468,row+80,75,5);
    rect(468,row+90,75,5);
    rect(468,row+100,75,5);
    rect(468,row+110,75,5);
    rect(468,row+120,75,5);
    rect(468,row+130,75,5);
    rect(468,row+140,75,5);
    rect(468,row+150,75,5);
    rect(468,row+160,75,5);
    rect(468,row+170,75,5);
    rect(468,row+180,75,5);
    rect(468,row+190,75,5);
    rect(468,row+200,75,5);
    //back to the rest of the dial 
    stroke(208,207,187);
    fill(199,197,193); // metal dial color
    strokeWeight(3);
    ellipse(504,300,50,50); // metal dial
    rect(492,336,25,10); // small metal button 
  //beginning of inner white plastic part 
    noFill();
    stroke(200,188,166);
    strokeWeight(20);
    rect(51,51,370,264);
  //round rect frame for TV should have no fill but should have frame (add stroke back) 
    strokeWeight(10);
    stroke(0);
    rect(66,60,340,244,2);
}

//for left antennae movement 
function dragAntLeft(i, xin, yin) {
    if (mouseX<width/2-60 & mouseY<150 && mouseX>100){
        dx = mouseX - antX;
        dy = mouseY - antY;
        angle1 = atan2(dy, dx); //controls how the antennae moves 
      }
    ant(antX, antY, angle1); //the left antennae is born 
}

//for right antennae movement
function dragAntRight(iz, xin, yin) {
    if (mouseX>width/2+10 & mouseY<150 && mouseX<460){
        dx2 = mouseX - antX2;
        dy2 = mouseY - antY2;
        angle2 = atan2(dy2, dx2); //controls how the antennae moves 
          
        
      }
    ant2(antX2, antY2, angle2); //the left antennae is born 
    
}

//for left antennae configuration
function ant(x, y, a) {
    push();
    translate(x, y);
    rotate(a);
    line(0, 0, antLength, 0); // first two numbers are the starting point, lenght , and 
    pop();
}

//for right antennae configuration
function ant2(x, y, b) {
    push();
    translate(x, y);
    rotate(b);
    line(0, 0, antLength, 0); // first two numbers are the starting point, lenght , and 
    pop();
}

//other controls that change image 
function TVonoff (){
//tv power off black screen
    fill(51,52,44);
    noStroke();
    push();
    rectMode(CENTER);
    rect(width/2-60,290,turnOffX,turnOffY);//the size that it increases to when hovering over area that the metal button is in 
//the rect will increase to size (width/2-60,290,300,210)
    pop();
    if (dist(mouseX,mouseY,450,414)<8){
      turnOffX = 300;
      turnOffY = 210;
    }    else if(dist(mouseX,mouseY,450,425)>10){ //when mouse not near, TV powered ON 
           turnOffX = 1;
           turnOffY = 1;
          }
}

//specifics for the red circle/dial thigny
function RedBit(tx, ty, ts) {
    this.x = tx; //x-value of point you want ball to rotate around
    this.y = ty; //y-value of point you want ball to rotate around
    this.size = ts; //balls's diameter
    this.angle = 0; 
    this.update = function (mx, my) {
      this.angle = atan2(my - this.y, mx - this.x);
    }
    this.display = function () {
      push();
      translate(this.x, this.y);
      rotate(this.angle);
      fill(255, 0, 0);
      ellipse(this.size/1.4, 0, this.size / 2, this.size / 2); //control the diamete that the circle travels by dividing this.size by something
      pop();
    }
}

//mapping values for controls stuff
function Mapping(){
    //mapping strokeweight
    if (mouseX>width/2+10 & mouseY<150 && mouseX<460){
    ThiccThin = map(mouseX,300,510,2,20);
    }
    //mapping angle of static
    if(mouseX>width/2+10 & mouseY<150 && mouseX<460 && mouseY>30){
    Ang = map(mouseY,20,150,.01,.05);
    }
    //mapping position of static (space between)
    if (mouseX<width/2-60 & mouseY<150 && mouseX>100){
    Spacing = map(mouseX,100,260,200,400);
    }
    //mapping color brightness to dial 
    if(dist(mouseX,mouseY,453,390)<25){
    Bri= map(mouseY,375,423,0,180);
    }
}

//The Tv static     
  function drawStatic(){
  noFill();
  //row 0 of static shit 
  beginShape();
  vertex(150,200);
  vertex(160,180);
  vertex(170,200);
  vertex(180,180);
  vertex(190,200);
  vertex(200,180);
  vertex(210,200);
  vertex(220,180);
  vertex(230,200);
  vertex(240,180);
  vertex(250,200);
  vertex(260,180);
  vertex(270,200);
  vertex(280,180);
  vertex(290,200);
  vertex(300,180);
  vertex(310,200);
  vertex(320,180);
  vertex(330,200);
  vertex(340,180);
  vertex(350,200);
  vertex(360,180);
  vertex(370,200);
  vertex(380,180);
  vertex(390,200);
  vertex(400,180);
  vertex(410,200);
  vertex(420,180);
  vertex(430,200);
  vertex(440,180);
  vertex(450,200);
  vertex(460,180);
  vertex(470,200);
  vertex(480,180);
  vertex(490,200);
  vertex(500,180);
  vertex(510,200);
  vertex(520,180);
  vertex(530,200);
  vertex(540,180);
  vertex(550,200);
  vertex(560,180);
  vertex(570,200);
  vertex(580,180);
  vertex(590,200);
  vertex(600,180);
  endShape();
  //row 1 of static shit 
  beginShape();
  vertex(150,240);
  vertex(160,220);
  vertex(170,240);
  vertex(180,220);
  vertex(190,240);
  vertex(200,220);
  vertex(210,240);
  vertex(220,220);
  vertex(230,240);
  vertex(240,220);
  vertex(250,240);
  vertex(260,220);
  vertex(270,240);
  vertex(280,220);
  vertex(290,240);
  vertex(300,220);
  vertex(310,240);
  vertex(320,220);
  vertex(330,240);
  vertex(340,220);
  vertex(350,240);
  vertex(360,220);
  vertex(370,240);
  vertex(380,220);
  vertex(390,240);
  vertex(400,220);
  vertex(410,240);
  vertex(420,220);
  vertex(430,240);
  vertex(440,220);
  vertex(450,240);
  vertex(460,220);
  vertex(470,240);
  vertex(480,220);
  vertex(490,240);
  vertex(500,220);
  vertex(510,240);
  vertex(520,220);
  vertex(530,240);
  vertex(540,220);
  vertex(550,240);
  vertex(560,220);
  vertex(570,240);
  vertex(580,220);
  vertex(590,240);
  vertex(600,220);
  endShape();
  //row 2 of static shit 
  beginShape();
  vertex(150,280);
  vertex(160,260);
  vertex(170,280);
  vertex(180,260);
  vertex(190,280);
  vertex(200,260);
  vertex(210,280);
  vertex(220,260);
  vertex(230,280);
  vertex(240,260);
  vertex(250,280);
  vertex(260,260);
  vertex(270,280);
  vertex(280,260);
  vertex(290,280);
  vertex(300,260);
  vertex(310,280);
  vertex(320,260);
  vertex(330,280);
  vertex(340,260);
  vertex(350,280);
  vertex(360,260);
  vertex(370,280);
  vertex(380,260);
  vertex(390,280);
  vertex(400,260);
  vertex(410,280);
  vertex(420,260);
  vertex(430,280);
  vertex(440,260);
  vertex(450,280);
  vertex(460,260);
  vertex(470,280);
  vertex(480,260);
  vertex(490,280);
  vertex(500,260);
  vertex(510,280);
  vertex(520,260);
  vertex(530,280);
  vertex(540,260);
  vertex(550,280);
  vertex(560,260);
  vertex(570,280);
  vertex(580,260);
  vertex(590,280);
  vertex(600,260);  
  endShape();
  //row 3 of static shit 
  beginShape();
  vertex(150,320);
  vertex(160,300);
  vertex(170,320);
  vertex(180,300);
  vertex(190,320);
  vertex(200,300);
  vertex(210,320);
  vertex(220,300);
  vertex(230,320);
  vertex(240,300);
  vertex(250,320);
  vertex(260,300);
  vertex(270,320);
  vertex(280,300);
  vertex(290,320);
  vertex(300,300);
  vertex(310,320);
  vertex(320,300);
  vertex(330,320);
  vertex(340,300);
  vertex(350,320);
  vertex(360,300);
  vertex(370,320);
  vertex(380,300);
  vertex(390,320);
  vertex(400,300);
  vertex(410,320);
  vertex(420,300);
  vertex(430,320);
  vertex(440,300);
  vertex(450,320);
  vertex(460,300);
  vertex(470,320);
  vertex(480,300);
  vertex(490,320);
  vertex(500,300);
  vertex(510,320);
  vertex(520,300);
  vertex(530,320);
  vertex(540,300);
  vertex(550,320);
  vertex(560,300);
  vertex(570,320);
  vertex(580,300);
  vertex(590,320);
  vertex(600,300);
  endShape();
  //row 4 of static shit 
  beginShape();
  vertex(150,360);
  vertex(160,340);
  vertex(170,360);
  vertex(180,340);
  vertex(190,360);
  vertex(200,340);
  vertex(210,360);
  vertex(220,340);
  vertex(230,360);
  vertex(240,340);
  vertex(250,360);
  vertex(260,340);
  vertex(270,360);
  vertex(280,340);
  vertex(290,360);
  vertex(300,340);
  vertex(310,360);
  vertex(320,340);
  vertex(330,360);
  vertex(340,340);
  vertex(350,360);
  vertex(360,340);
  vertex(370,360);
  vertex(380,340);
  vertex(390,360);
  vertex(400,340);
  vertex(410,360);
  vertex(420,340);
  vertex(430,360);
  vertex(440,340);
  vertex(450,360);
  vertex(460,340);
  vertex(470,360);
  vertex(480,340);
  vertex(490,360);
  vertex(500,340);
  vertex(510,360);
  vertex(520,340);
  vertex(530,360);
  vertex(540,340);
  vertex(550,360);
  vertex(560,340);
  vertex(570,360);
  vertex(580,340);
  vertex(590,360);
  vertex(600,340);
  endShape();
  //row 5 of static shit 
  beginShape();
  vertex(150,400);
  vertex(160,380);
  vertex(170,400);
  vertex(180,380);
  vertex(190,400);
  vertex(200,380);
  vertex(210,400);
  vertex(220,380);
  vertex(230,400);
  vertex(240,380);
  vertex(250,400);
  vertex(260,380);
  vertex(270,400);
  vertex(280,380);
  vertex(290,400);
  vertex(300,380);
  vertex(310,400);
  vertex(320,380);
  vertex(330,400);
  vertex(340,380);
  vertex(350,400);
  vertex(360,380);
  vertex(370,400);
  vertex(380,380);
  vertex(390,400);
  vertex(400,380);
  vertex(410,400);
  vertex(420,380);
  vertex(430,400);
  vertex(440,380);
  vertex(450,400);
  vertex(460,380);
  vertex(470,400);
  vertex(480,380);
  vertex(490,400);
  vertex(500,380);
  vertex(510,400);
  vertex(520,380);
  vertex(530,400);
  vertex(540,380);
  vertex(550,400);
  vertex(560,380);
  vertex(570,400);
  vertex(580,380);
  vertex(590,400);
  vertex(600,380);
  endShape();
  }











function draw() {
  background(245);  
  Mapping();
    
    push();
    strokeWeight(1+ThiccThin);
    stroke(Bri+40)
    translate(200-Spacing,0)
    rotate(Ang);
    drawStatic()
    pop();
  
//blocks to cover movement of the static behind TV 
    fill(245)
    push();
    noStroke();
    rectMode(CORNER);
    rect(0,170,140,280);
    rect(520,180,200,280);
    rect(0,140,width,50)
    pop();
    
//antennae shit (movement & base)
    fill(10);
    noStroke();
    ellipse(width/2-30,height/2-55,100,70); //antennae base
    strokeWeight(4.2);
    stroke(10);
  //left antennae
    dragAntLeft(0, mouseX, mouseY);
    for( var i=0; i<antX.length-1; i++) {
    dragAntLeft(i+1, antX[i], antY[i]);
    }
  //right antennae
     dragAntRight(0, mouseX, mouseY);
    for( var iz=0; iz<antX2.length-1; iz++) {
    dragAntRight(iz+1, antX2[iz], antY2[iz]);
    }
    
//turns tv on and off 
  TVonoff();
    
//TV frame/illustration 
    push();
    translate(100,180); 
    scale(0.7,0.7); //scaling down the size of the TV so that antennae can fit on screen 
    tvFrame();
    pop();
  
//the red dial will only spin if the mouse gets close to it
    noStroke();
    if(dist(mouseX,mouseY,453,390)<25){
    RB.update(mouseX, mouseY);
    }
    RB.display();
    fill(255,0,0);
    ellipse(164,185,1,1);
  
}

*the left and right antennae do not appear until they are in vicinity of the mouse
The left antennae controls the position of the static, and moving it appears to animate it
the right antennae controls both the rotation and the thickness of the static
The little red-studded dial controls the brightness/color
and the button below the dial controls the size of a minuscule black square in the middle of the screen which gets large when you hover over it, simulating the tv turning off.

(Explanation coming soon)

sketch
To interact: slowly move mouse Y up and down the top half of the image.
I was interested in experimenting with color palettes I usually don’t use in my work for this project. After making the code, I realize my approach doesn’t quite take advantage of “code’s grain”– that is, this interaction may have been better executed in a platform that uses keyframes such as after effects. While the growth of blocks are smooth, the color change is abrupt because I couldn’t quite math out how to change the particular RGB values to match mouse Y.

function setup() {
  createCanvas(480,640);
}

//colors
var ochre='#D0B268'
var LightSalmon='#F8ADA3'
var DarkSalmon='#D06870'
var Navy='#213468'
var Navy9='#213468'
var Green='#084E5A';
var Navy10=Navy;
var DarkSalmon31315=DarkSalmon;
var LightSalmon12=LightSalmon;
var LightSalmon4=LightSalmon;
var LightSalmon2=LightSalmon
var rectXone=0;
var ochre17=ochre;
var rectXtwo=480;
var ochreStripe=LightSalmon;

//shape variables
var rectX=0;
var rectY=0;

function draw() {
  var myc= constrain(mouseY,0,142.5);
  var rectX=myc/.53;
  var rectY=myc*2.5;
  var rectXone=myc*.753;
  var rectXtwo=480-(myc*1.495);
  noStroke();
  rectMode(CORNER);
  fill(ochre);
  rect(0,0,267,71); //box 1
  fill(LightSalmon2);
  rect(267,0,273,284); //box 2
  fill(DarkSalmon31315);
  rect(0,71,160,143); //box 3
  fill(LightSalmon4);
  rect(160,71,53,71); //box 4
  fill(Navy);
  rect(213,71,54,71); //box 5
  rect(0,214,160,71);//box 6
  fill(255);
  rect(160,142,107,142);
  fill(ochre);
  push();
  rect(160,160,107,13); //box 7 stripe 1
  translate(0,30);
  rect(160,160,107,13); //box 7 stripe 2
  translate(0,30);
  rect(160,160,107,13); //box 7 stripe 3
  translate(0,30);
  rect(160,160,107,13); //box 7 stripe 4
  pop();
  fill(LightSalmon); 
  rect(0,284,160,213.5) //box 8
  fill(Navy9);
  if (mouseY>142.5) {
    Navy9='#86B5C6';
    Navy10=ochre;
    DarkSalmon31315='#ECA1C0';
    LightSalmon12=ochre;
    LightSalmon4=Green;
    DarkSalmonGreen=Green;
    LightSalmon2=Green;
    ochre17='#ECA1C0';
    ochreStripe=Navy;
  }
  if (mouseY<=142.5) {
    Navy9=Navy;
    Navy10=Navy;
    DarkSalmon31315=DarkSalmon;
    LightSalmon12=LightSalmon;
    LightSalmon4=LightSalmon;
    DarkSalmonGreen=DarkSalmon;
    LightSalmon2=LightSalmon;
    ochre17=ochre;
    ochreStripe=LightSalmon;
  }
  push();
  translate(0,-myc);
  rect(160,284,214,142.5); //box 9
  pop();
  push();
  fill(Navy10);
  rect(397,284,18,70.5); //box 10 stripe 1
  translate(40,0);
  rect(397,284,18,70.5); //box 10 stripe 2
  pop();
  fill(ochre);
  rect(160,426,107,71.5); //box 11
  fill(LightSalmon12);
  rect(267,426,107,142); //box 12
  fill(DarkSalmon31315);
  rect(374,354.5,107,213.5); //box 13
  fill(Navy);
  rect(0,497,267,143); //box 14
  fill(DarkSalmon31315);
  rect(267,568,107,72); //box 15
  fill(Navy);
  rect(374,568,107,72); //box 16
  fill(DarkSalmonGreen);
  rect(0,284,rectX,rectY);
  fill(ochre17);
  rect(267,71,rectXone,71);
  fill(255);
  rect(rectXtwo,0,213.5,71);
  fill(ochreStripe);
  rect(285,0,18,71);
  push();
  translate(50,0);
  rect(285,0,18,71);
  translate(50,0);
  rect(285,0,18,71);
  translate(50,0);
  rect(285,0,18,71);
  translate(50,0);
  rect(285,0,18,71);
  
  
}

sketch

var topX = 320; //original triangle
var topY = 190;
var leftX = 260;
var leftY = 290 ;
var rightX = 380;
var rightY = 290;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(256);
    noStroke()
    fill(0);
    triangle(topX, topY, leftX, leftY, rightX, rightY); //draw original triangle
    
    if(dist(mouseX, mouseY, topX, topY) > 25 || //return original triangle after transformations
    dist(mouseX, mouseY, rightX, rightY) > 25 || 
    dist(mouseX, mouseY, leftX, leftY) > 25) {
      topX = 320;
      topY = 190;
      leftX = 260;
      leftY = 290 ;
      rightX = 380;
      rightY = 290
    }
    
    if(dist(mouseX, mouseY, rightX, rightY) <= 25) { //build 1st itteration of large triangle
      rightX = 200;
      rightY = 190;
      fill(0, 256, 256);
      triangle(320, 190, 260, 290, 380, 290);
      fill(256, 256, 0);
      triangle(440, 190, 320, 190, 380, 290);
      fill(256, 0, 256);
      triangle(260, 290, 380, 290, 320, 390);
    }
    
    if(dist(mouseX, mouseY, topX, topY) <= 25) { //build 2nd itteration of large triangle
      topX = 320;
      topY = 390;
      fill(256, 0, 256);
      triangle(320, 190, 260, 290, 380, 290);
      fill(0 ,256, 256);
      triangle(440, 190, 320, 190, 380, 290);
      fill(256, 256, 0);
      triangle(200, 190, 320, 190, 260, 290);
    }
    
    if(dist(mouseX, mouseY, leftX, leftY) <= 25) { //build 3rd itteration of large triangle
      leftX = 440;
      leftY = 190;
      fill(256, 256, 0);
      triangle(320, 190, 260, 290, 380, 290);
      fill(256, 0, 256);
      triangle(200, 190, 320, 190, 260, 290);
      fill(0, 256, 256);
      triangle(260, 290, 380, 290, 320, 390);
    }
    
    if(dist(mouseX, mouseY, 320, 240) <= 25) { 
      triangle(320, 190, 260, 290, 380, 290);
      triangle(200, 190, 320, 190, 260, 290);
      triangle(260, 290, 380, 290, 320, 390);
      triangle(320, 190, 380, 290, 440, 190);
    }
}

For this project I kept it simple, after using them in the pong exercise I got very comfortable using if statement and they were the easy part of this project. Hardest part was finding coordinates, I assume I could have used some sort of relationships in place of numbers to save time in writing the code.

lrospigl_project3

var r;
var t;
var a = 100;
var headx;
var discox;
var p;

function setup() {
  createCanvas(640, 480)

}

function draw() {
  var x = mouseX + (width / 2);
  var y = mouseY;

  background(230, x, y);

  strokeWeight(0);
  fill(a, 200, 200);
  ellipse(r, t, 20, 20);
  ellipse(r * 2, t, 20, 20);
  ellipse(r / 2, -t, 20, 20);
  ellipse(r, t / 2, 20, 20);

  if (mouseIsPressed) {
    ellipse(r, t, 50, 50);
    r = random(20, 500);
    t = random(20, 460);
    a = random(1, 250);
  }

  //disco man
    //shirt
  fill(255);
  rect (headx - 15, 360, 130, 100, 20);
  
  //hair
  fill(40);
  arc(headx + 50, 250, 200, 200, PI-QUARTER_PI, TWO_PI+QUARTER_PI, CHORD);
  //neck
  fill(254, 213, 192);
  rect(headx + 35, 300, 30, 80, 20);
  //face
  fill(254, 213, 192)
  rect(headx, 250, 100, 100, 20);
  //glasses
  fill(0)
  arc(headx + 30, 290, 30, 30, TWO_PI, PI, CHORD);
  arc(headx + 70, 290, 30, 30, TWO_PI, PI, CHORD);
  rect (headx + 30, 290, 40, 5);


  fill(0, 102, 153, 51);
  text("click and drag mouse accross canvas", 5, 480);
  
  if (100 < mouseX & mouseX < (width - 100)) {
    headx = mouseX - 50;
  }
  strokeWeight (0.5)
  fill (255, mouseX)
  ellipse (p, 50, discox, discox)
  
  if (100 < mouseX & mouseX < (width/2)) {
    p = mouseX;
    discox = mouseX/3
  }
    if ((width/2) < mouseX & mouseX < (width - 100)) {
    p = mouseX;
    discox = (width - mouseX)/3
  }
}

sketch

//Ashley Chan
//Section C
//ashleyc1@andrew.cmu.edu
//Project-03-Dynamic-Drawing.



//PARAMETERS THAT I AM CHANGING
//Color
//Ball Size
//Ball angle: rotation of the spiral
//Spacing between balls
//Size of spiral

    var angle;
    var positionX;
    var positionY;
    var ballWidth;
    var ballHeight;
    var isDrawing;
    var r;
    var g;
    var b;

//setup with default values for rgb color values
function setup(/*red = 213, green = 23, blue = 23*/) {
    createCanvas(640, 480);
    background(0);

    //rotate circles based on mouse position
    //#gotta love trig 
    angle = (atan((mouseY - 240) / (mouseX - 320)) / 500);
    
    positionX = 0;
    positionY = 0;
    ballWidth = 5;
    ballHeight = 5;

   //as you increment i, draw a circle
    for (var i = 0; i < 600; i++) {

        fill(r, g, b); 
        stroke(255);

        //As i increases, we draw a ball with increasing width
        //untill we reach maximum growth
        ballWidth += (30/600) * ((480 - mouseY) / 480);
        ballHeight += (30/600) * ((480 - mouseY) / 480);

        //start point
        push();
        translate(width/2, height/2); 
        rotate(degrees(angle));
        ellipse(positionX, positionY, ballWidth, ballHeight);
        pop();
    
    
        drawOut();

    }
    

}

function draw() {

    changeColor();

}


function changeColor() {

    //if mouse is on right side of canvas, red
    if (mouseX > width/2) {

         r = map(mouseX, 0, width/2, 500, 213);
         g = map(mouseX, 0, width, 100, 32);
         b = map(mouseX, 0, width, 135, 255);

}
    //if mouse is on left side of canvas, blue                              
    if (mouseX < width/2) {
        
         r = map(mouseX, 0, width/2, 200, 100);
         g = map(mouseX, 0, width, 0, 32);
         b = map(mouseX, 0, width, 0, 255);

    }

    //have to call setup again if you want movement
    setup(r, g, b);

}


function drawOut() {
   //circles drawn outward

    positionX = positionX  + .5;
    positionY = positionY + .5;

    //controls the spacing between the balls 
    angle = angle + (mouseX/ 100000);


}

For this project, I wanted to expand on the spiral drawing exercise we did in lab because I found it a fun shape to play with and thought it would create a cool optical illusion. Although subtle, I am changing several parameters such as color, ball size, ball position and angle as well as the space in between the balls. One surprising result is how much had to tap into old trig knowledge in order to calculate how to rotate the spiral just right.

sketch

var flagX = 570;
var color1 = 255;
var color2 = 150;


function setup() {
    createCanvas(640, 480);
    
}


function draw() {
    //grass
    background(57,181,74); 
    
    //sky
    fill(102,193,242);
    ellipse(320,100,1300,400); 

    //cloud will move and change color relative to mouseX movement
    push(); 
    translate((width / 2) - mouseX, 0);
    fill(mouseX - color2);
    ellipse(370,100,80,80);
    ellipse(450,60,100,100);
    ellipse(400,60,60,60);
    ellipse(520,100,90,90);
    ellipse(450,100,100,100);
    ellipse(565,120,50,50);
    pop();

    //text
    push();
    textSize(20);
    fill(255,mouseX / 2,40);
    text("IT'S IN THE HOLE!",mouseX-60,100);
    pop() ;

    //green
    fill(141,198,63);
    ellipse(450,400,400,90); 

    //hole
    fill(0);
    ellipse(520,400,25,15); 

    //flag pole
    fill(225);
    rect(518,200,4, 200); 

    //flag
    fill(200,0,0);
    triangle(522,200,522, 250, flagX,225) ;

    //ball
    fill(color1);
    noStroke();
    ellipse(mouseX,mouseY,(600 - mouseX) / 7,(600 - mouseX) / 7); 




    //flag will move when mouse gets close
    if(mouseX > 0 & mouseX < 220) {
        flagX = 474
    }else(flagX = 570);

    //ball disappears when it is on top of the hole
    if(mouseX > 515 & mouseY < 525 && 
        mouseY > 398 && mouseY < 402){
        color1 = 0
    }else(color1 = 255);


}

First let me explain the drawing I created. The whole golf theme came to me a bit randomly. I was very interested in the pong game we made, so for the dynamic drawing I wanted to make another game. It is supposed to simulate a golfball getting closer to the hole. Once the ball is over the hole it disappears.

The part I found hardest about this project was coming up with an idea. I feel pretty confident with the concepts but just couldn’t get myself to come up with an idea. Once I expanded my thought from just moving patterns, this is what I came up with.

Dynamic Drawing

function setup() {
    createCanvas(640, 480);
    
}

function draw() {
    background(33, 32, 29);

    //clouds follow or pass by the mouse
    var cloudcover = -mouseX + 640;
    var cloudsize =  mouseY * 0.25;
    fill(140, 138, 146);
    noStroke();
    ellipse(mouseX, 100, cloudsize, cloudsize);
    ellipse(mouseX + 20, 150, cloudsize, cloudsize);
    ellipse(mouseX + 5, 200, cloudsize, cloudsize);
    ellipse(mouseX - 50, 207, cloudsize, cloudsize);
    ellipse(mouseX + 100, 200, cloudsize, cloudsize);
    ellipse(mouseX -15, 200, cloudsize, cloudsize);
    ellipse(cloudcover, 350, cloudsize, cloudsize);
    ellipse(cloudcover + 50, 340, cloudsize, cloudsize);
    ellipse(cloudcover - 8, 330, cloudsize, cloudsize);
    ellipse(cloudcover + 10, 315, cloudsize, cloudsize);
    ellipse(cloudcover - 10, 290, cloudsize, cloudsize);
    ellipse(cloudcover - 45, 350, cloudsize, cloudsize);
    
    //stage
    fill(0);
    rect(0, 420, 640, 60);
    rect(40, 360, 560, 60);

    //lights
    fill(255);
    quad(45, 480, 55, 420, 105, 450, 85, 480);
    quad(555, 480, 525, 450, 575, 420, 595, 480);
    quad(45, 0, 55, 60, 105, 30, 85, 0);
    quad(555, 0, 525, 30, 575, 60, 595, 0);

    //Edward
    fill(0);
    //head
    triangle( 80, 200, 95, 230, 110, 200);
    triangle( 80, 200, 75, 190, 85, 200);
    triangle( 105, 200, 110, 190, 110, 200);
    triangle( 75, 190, 70, 215, 100, 200);
    //shoulders
    triangle( 65, 230, 95, 275, 125, 230);
    //waist
    quad( 85, 260, 90, 280, 100, 280, 105, 260);
    //flair
    quad( 90, 280, 75, 310, 95, 330, 105, 260);
    //legs
    triangle(100, 255, 103, 360, 105, 260);
    triangle(85, 290, 88, 360, 90, 280);
    //arms
    triangle(75, 240, 70, 280, 77, 240);
    triangle(70, 280, 90, 300, 70, 280);
    triangle(120, 230, 135, 200, 125, 230);
    triangle(135, 200, 150, 190, 136, 200);

    // depending on the position of the mouse
    //different lights will turn on
    if ((mouseX < 320) & (mouseY > 240)){
        fill(252, 18, 58, 51);
        quad( 55, 420, 320, 0, 105, 0, 105, 450);
    } if((mouseX > 320) & (mouseY > 240)){
        fill(254,205,68,51);
        quad( 525, 450, 70, 0, 575, 0, 575, 420);
    } if((mouseX <320) & (mouseY < 240)){
        fill(252, 51, 170, 51);
        quad (55, 60, 250, 480, 270, 480, 105, 30);
    } else{
        fill( 52, 253, 47, 51);
        quad (525, 30, 200, 480, 260, 480, 575, 60);
    }

    // if mouse in canvas, reveal text
    textSize(40);
    var W = "Welcome to Wonderland!"
    if((mouseX < 640) & (mouseX > 0) & (mouseY > 0) & (mouseY < 480)){
        fill(162, 16, 110);
        } else {
            fill(33, 32, 29);
        }
    text(W, 100, 35, 500, 200);
    
    //Wheel of Misfortune
    //move origin to the center
    translate(320, 240);
    rotate(radians(2 * frameCount));
    //first wheel slice
    fill(162, 16, 110);
    arc(0, 0, 300, 300, PI + 3 * QUARTER_PI, TWO_PI);
    //second
    fill(243, 226, 53);
    arc(0, 0, 300, 300, PI + 2 * QUARTER_PI, 7 * PI/4);
    //third 
    fill(253, 99, 169);
    arc(0, 0, 300, 300, PI + QUARTER_PI, 3 * PI/2);
    //fourth
    fill(37, 213, 161);
    arc(0, 0, 300, 300, PI, 5 * PI/4);
    //fifth
    fill(37, 213, 161);
    arc(0, 0, 300, 300, 0, PI/4);
    //sixth
    fill(162, 16, 110);
    arc(0, 0, 300, 300, PI/4, PI/2);
    //seventh
    fill(243, 226, 53);
    arc(0, 0, 300, 300, PI/2, 3 * PI/4);
    //eighth 
    fill(253, 99, 169);
    arc(0, 0, 300, 300, 3 * PI/4, PI);

}

I was really inspired by the description of a dungeon in one of my favorite podcasts, “The Adventure Zone”, and I thought this would be a really fun project to try to realize that scene in simple shapes. I did my best to use a whimsical color scheme and incorporate a lot of motion. I think that out of what we’ve done so far this is the project I’m most proud of, and the one I’ve spent the most time on.