Month: September 2017

Project 3, odh

odhP3

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 3

var R = 100; //"R" of RGB
var G = 100; //"G" of RGB
var W = 50; //Width of the ellipse
var H = 50; //height of the ellipse

function setup() {
    createCanvas(600, 480);
}
 
function draw() {
    background(50, 50, 100);
    noStroke();

    rectMode(CENTER);

    fill(100, 0, 0);
    rect(150, 240, 100, mouseX);

    fill(0, 100, 0);
    rect(450, 240, mouseY, 100);

    fill(R, G, 0);
    ellipse(mouseX, mouseY, W, H);

    H = mouseX;
    W = mouseY;


    //Changes the color of the ellipse depending on its location
    if (mouseX > 100) {
        G = 200;
    };
    if (mouseY > 100) {
        R = 200;
    };

}

I based all my changes on the location of the mouse, the change of size of the rectangles, the size of the ellipse, the color of the ellipse, and the location of the ellipse.

monicah1_lookingoutward_03

Digital Fabrication by Iris Van Herpen Collaborated with Neri Oxman and Julia Koerner at 2013 Paris Fashion week.

The inspiration of Iris Van Herpen coulture is inspired by nature, generating augmentation and thinking about form, materials, movement, and wearability. They work on designing algorithm that centered by humans’ moment and material behavior.

I am impressed by the high fidelity of work that is possible in computational and 3D fabrication. Often times, we may not be able to control what the computational work would produced base on algorithms. Here, the computational work is closely human form centered, which is amazing. High craftsmanship with 3D fabrication can powerfully apply on so many things. This fashion work of line show how technology is already advanced, hoping 3D fabrication can integrated to common people.

Sheenu-Looking Outwards 3



The Bizarre, Bony-Looking Future of Algorithmic Design

What you’re looking at are parts for a motorcycle made from algorithms in Autodesk’s software. According to Autodesk’s resident futurist Jordan Brandt, computers can help you create the ideas in your head faster and better.
Whether designing a building or a trashcan with certain criterion and aspects we want, computers with algorithms can help design them better because unlike people, computers have no bias. They simply have the goal to make what you want. “But a machine-Autodesk’s software, in this instance-is an unbiased agent.”[It’s] simply looking to optimize the criteria we set forward”.

With Autodesk’s algorithmic software, lighter and more organic looking motorcycle parts can be made. Not only will they make the bike perform better, but also look better. The software can also be used to design much better and smaller lattice structures for medical applications; working far better compared to other medical lattice structures that exist.

I find it interesting and inspiring that parts for machines and bodies that look so artistic and organic can also perform better than other parts. I used to believe that art and strength cannot mix well together. Either it be artistic and fragile or ugly and sturdy. I think it’s great that Autodesk is finding a way to bridge the gap between art and function along with man and machine. It will help creators out there to create.

dayoungc- Looking Outwards -03

“Making Information Beautiful”

This week, I was inspired by the work of David Wicks <sansumbrella.com>, who explores data visualization. I was struck specifically by his project “Drawing Water” <http://sansumbrella.com/works/2011/drawing-water/>, first because of its beauty and second because of how effective it is in helping people experience information in a new way.

http://sansumbrella.com/works/2011/drawing-water/winter2011.jpg

“A representation of rainfall vs. water consumption in Winter 2001.”

In the print representation above, lines going from blue to black represent the general direction of rainfall toward where it is consumed. Although Wicks cautions that the pathways themselves are imagined, he uses real data: Wicks uses water consumption data from the United States Geological Survey and rainfall data from the NOAA National Weather Service. He inputs this information into code that visualizes rain sources going toward areas of water consumption.

<iframe src=”https://player.vimeo.com/video/24157130″ width=”640″ height=”360″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

“A video showing a dynamic and interactive representation of the Drawing Water project.”

This is fascinating, as it allows viewers to see and understand data that would otherwise be mere numbers on a page. Only scholars would be able to understand the information properly. But Wicks allows normal people to comprehend it through a printed image generated through computation.

Matthew Erlebacher Project 3 Dynamic Drawing

Interactive Drawing

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-03

var mouseX
var mouseY
// Allows the location of the mouse to be a variable

var squareSide = 50
// Creates a variable to control the size of the square

function setup() {
    createCanvas(640, 480);
    // Creates a blank canvas

}

function draw() {
    background(125);
    // Creates a blue background

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(0, height / 2, 30, height);
    // Creates a vertical rectangle to the far left

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the left

    fill(mouseX / 2.5 - mouseY / 1.9, mouseX / 2.5, mouseY / 1.9);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, height);
    // Creates a vertical rectangle that splits the canvas

    fill(mouseX / 1.25 - mouseY / 0.95, mouseX / 1.25,
        mouseY / 0.95);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, height);
    // Creates a vertical rectangle a quarter to the right

    fill(mouseX - mouseY, mouseX, mouseY);
    rectMode(CENTER);
    rect(width, height / 2, 30, height);
    // Creates a vertical rectangle to the far right

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 0, width, 30);
    // Creates a horizontal rectangle at the top

    fill(mouseX / 2.5 - mouseY / 1.9, mouseY / 1.9, mouseX / 2.5);
    rectMode(CENTER);
    rect(width / 2, height / 2, width, 30);
    // Creates a horizontal rectangle that splits the canvas

    fill(mouseX - mouseY, mouseY, mouseX);
    rectMode(CENTER);
    rect(width / 2, 480, width, 30);
    // Creates a horizontal rectangle at the bottom

    fill(125);
    rectMode(CENTER);
    rect(0, 0, 30, 30);
    // Creates a gray square in the upper left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 4, 0, 30, 30);
    // Creates a gray square in the left quarter  top

    fill(125);
    rectMode(CENTER);
    rect(width / 2, 0, 30, 30);
    // Creates a gray square in the middle top

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, 0, 30, 30);
    // Creates a gray square in the quarter right top

    fill(125);
    rectMode(CENTER);
    rect(width, 0, 30, 30);
    // Creates a gray square in the upper right corner

    fill(125);
    rectMode(CENTER);
    rect(0, height / 2, 30, 30);
    // Creates a gray square in the far left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter left middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height / 2, 30, 30);
    // Creates a gray square in the middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(3 * width / 4, height / 2, 30, 30);
    // Creates a gray square in the quarter right middle of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height / 2, 30, 30);
    // Creates a gray square in the far right middle

    fill(125);
    rectMode(CENTER);
    rect(0, height, 30, 30);
    // Creates a gray square in the quarter far left bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width / 4, height, 30, 30);
    // Creates a gray square in the lower left corner

    fill(125);
    rectMode(CENTER);
    rect(width / 2, height, 30, 30);
    // Creates a gray square in the middle bottom of the canvas

    fill(125);
    rectMode(CENTER);

    rect(3 * width / 4, height, 30, 30);
    // Creates a gray square in the quarter right bottom of the canvas

    fill(125);
    rectMode(CENTER);
    rect(width, height, 30, 30);
    // Creates a gray square in the upper right corner

    fill(0, 0, 255);
    ellipse(width / 4, height / 2, mouseX / 5, mouseX / 5);

    fill(255, 0, 0);
    ellipse(3 * width / 4, height / 2, width / 5 - mouseX / 5, width / 5 - mouseX / 5);

    fill(255);
    rectMode(CENTER);
    rect(mouseX, height - mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseX and opposes mouseY

    fill(255);
    rectMode(CENTER);
    rect(width - mouseX, mouseY, squareSide * (2 * mouseY / 1000), squareSide * (2 * mouseY / 1000));
    // Creates a white square that follows mouseY and opposes mouseX

    fill(0);
    rectMode(CENTER);
    rect(width - mouseX, height - mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that opposes location of mouse

    fill(0);
    rectMode(CENTER);
    rect(mouseX, mouseY, squareSide * (1 - 2 * mouseY / 1000), squareSide * (1 - 2 * mouseY / 1000));
    // Creates a black square that follows the mouse
}

This project was fairly difficult for me. Apart from struggling with how to make it interactive, it was very hard for me to come up with something to create. I ended up making a transforming light show.

ifv-Project-03

sketch

//Isabelle Vincent
//Section E
//ifv@andrew.cmu.edu
//Project-03
function setup() {
    createCanvas(480, 640);
}

function draw() {
  background(189,246,255);
//background color change
  if (mouseX >= 180 & mouseX <= 280) {
    background(211,255,255);
  }
  var centerX = constrain(mouseX,100,380);
  var centerY = constrain(mouseY,180,460);
//multi-layed rotating square which follows the cursor as its pressed
  if(mouseIsPressed) {
    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 700, 700);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 600, 600);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 500, 500);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 400, 400);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 300, 300);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 200, 200);
    pop();

    push();
    translate(centerX, centerY);
    rotate(radians(frameCount));
    fill(255);
    rectMode(CENTER)
    rect(0, 0, 100, 100);
    pop();
  }
//white dots that change size according to mouseX
  fill(255);
  stroke(255);
  strokeWeight(mouseX/10);
  point(centerX + 50, centerY);
  point(centerX - 50, centerY);
  point(centerX + 100, centerY);
  point(centerX - 100, centerY);
  point(centerX + 150, centerY);
  point(centerX - 150, centerY);
  point(centerX + 200, centerY);
  point(centerX - 200, centerY);
//Color and shape-changing Triangle
  fill(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  stroke(mouseX/5,mouseY/7,mouseX/2 + 5,mouseY);
  strokeWeight(3);
  triangle(100,0,centerX,centerY-70,380,0);
  triangle(100,640,centerX,centerY+70,380,640);

//lines orig from each corner and connect at cursor
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  strokeWeight(6);
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  line(0,0,centerX,centerY);
  line(0,640,centerX,centerY);
  line(480,0,centerX,centerY);
  line(480,640,centerX,centerY);
//Centercircle
  fill(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  stroke(mouseX/4,mouseY/4,mouseX,mouseX + 0.2);
  ellipseMode(CENTER);
  ellipse(centerX,centerY,50,50);

}

MouseX and MouseY are used to change the position of the center circle and the intersection of the four lines along with their color. These coordinates also affect the shape of the two triangles and the color of their stroke and fill. The white dots also follow these points and the stroke weight changes in thickness based on mouseX. When the Mouse is pressed multiple overlapped rotating squares appear. The position in which the mouse X&Y can effect the above elements is restrained. Transparency of certain elements is also affected. The background color lightens when the mouse is near the middle x-coordinates.

Ziningy1 – Section C – Project 03 – Dynamic Drawing

Inspired by how planets in solar system orbit around the sun, I made the visualization base on orbiting and pulsing movement. The aspects of image elements that the mouse movement controls include: background color, planet color, halo size(sun), the self-orbiting speed(moon), the stroke weight of the connecting line. I utilized a lot of sin() and cos() in this project to make the change more dynamic instead of one way. It is also my first time experimenting with the time elements in programing to create graphics.

ziningy1 – project 03

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-03   

var sunx = 300
var suny = 240
var sunw = 130
var sunh = 130
var t = 1; //time





function setup() {
    createCanvas(600,480);
    

    
} 



function draw() { 
   

    angleMode(DEGREES); 

    background(32,50,74+(mouseX-mouseY)/13);
 
    noStroke();

    //multiple pulsing halo 

    fill(50+mouseY,100+mouseX,0,30);

    ellipse(sunx,suny,sunw+50*cos(-mouseX)+50,sunh+50*cos(-mouseX)+50); //halo changes size and color with the mouse moverment 

    fill(100+mouseX,mouseX/2,30,40);

    ellipse(sunx,suny,sunw+20*sin(mouseY)+40,sunh+20*sin(mouseY)+40); 

    fill(150+mouseY,mouseY,30,70);

    ellipse(sunx,suny,sunw+20*cos(mouseX)+10,sunh+20*cos(mouseX)+20); 


    

   
    
  

    //mercury, closest ball to the sun

    var merx = 100*cos(mouseX)+sunx 
    var mery = 100*sin(mouseX)+suny // the x, y coordinates of the first circle will move in a circle with the mouse movement, same for other orbiting circle


    fill(60+mouseX/2);

    stroke(210);
    strokeWeight(1+7*sin(mouseX)); //stroke line of the first orbiting ball changes with the mouse 
    line(merx,mery,sunx,suny);

    strokeWeight(2);
    ellipse(merx, mery, 20, 20);



    //venice 

    var venx = 140*cos(0.5*mouseX)+sunx //same with the first ball 
    var veny = 140*sin(0.5*mouseX)+suny

    fill(150+mouseX,mouseX/4,20);

    stroke(180);
    strokeWeight(1+5*sin(-mouseY));
    line(venx,veny,sunx,suny);

    strokeWeight(1+10*sin(-mouseY))

    ellipse(venx, veny, 30, 30);



    // earth

    fill(40,40+mouseY,100+mouseX);


    var earthX = 190*cos(-mouseX)+sunx;
    var earthY = 210*sin(-mouseX)+suny;


    stroke(200);
    strokeWeight(1+5*cos(-mouseX));
    line(earthX,earthY,sunx,suny);

    ellipse(earthX ,earthY, 50, 50);

    
    //the sun 

    fill(100+mouseX/3,mouseY/2,20);

    ellipse(sunx,suny,sunw,sunh);

  

    //self orbiting moon 
   

    t = t+(mouseY+mouseX)/80; // change the orbiting speed with the mouse movement 

    stroke(150)
    strokeWeight(1+3*sin(2*mouseX));
    noFill();
    ellipse(earthX,earthY,100,100)

    fill(100+mouseX/2,80+mouseX/4,40);




    ellipse(50*cos(t)+earthX ,50*sin(t)+earthY, 15, 15);



}

aboyle-Project 03-Dynamic Drawing

aboyle-Dynamic drawing

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

//Snow variables
    var snow=0
    var snowTwo=0
    var snowThree=0

function draw() {
    background(45,138,185)

//Tree variables
    var trunkWidth=30
    var trunkHeight=430-mouseY
    var leafHeight=mouseY-40
    var leafWidth=70+mouseY
    strokeWeight(0);

//Limits the trees' growth
    if(mouseY<250){
      trunkHeight=180
      leafHeight=210
      leafWidth=320}

//Summer sun
    if(mouseX<=160){
      fill(63,147,169);
      triangle(660,-30,0,480,400,480)
      fill(78,156,155);
      triangle(650,-10,100,480,300,480);
      fill(45,138,185)
      rect(575,0,90,90)
      fill(255,252,0);
      ellipse(575,70,60);
    }


//Trunks--as mouse moves up, the trunks grow
    fill(115,72,22);
    rect(75,480-trunkHeight,trunkWidth,trunkHeight);
    rect(210,480-trunkHeight,trunkWidth,trunkHeight);
    rect(345,480-trunkHeight,trunkWidth,trunkHeight);
    rect(480,480-trunkHeight,trunkWidth,trunkHeight);

//Leaves--as mouse moves up, position of leaves moves up
    fill(21,148,42)
    //tree one
    triangle(25,leafWidth,90,leafHeight,155,leafWidth);
    triangle(30,leafWidth-70,90,leafHeight-70,150,leafWidth-70);
    triangle(35,leafWidth-140,90,leafHeight-140,145,leafWidth-140);
    triangle(40,leafWidth-210,90,leafHeight-210,140,leafWidth-210);
    //tree two
    triangle(160,leafWidth,225,leafHeight,290,leafWidth);
    triangle(165,leafWidth-70,225,leafHeight-70,285,leafWidth-70);
    triangle(170,leafWidth-140,225,leafHeight-140,280,leafWidth-140);
    triangle(175,leafWidth-210,225,leafHeight-210,275,leafWidth-210);
    //tree three
    triangle(295,leafWidth,360,leafHeight,425,leafWidth);
    triangle(300,leafWidth-70,360,leafHeight-70,420,leafWidth-70);
    triangle(305,leafWidth-140,360,leafHeight-140,415,leafWidth-140);
    triangle(310,leafWidth-210,360,leafHeight-210,410,leafWidth-210);
    //tree four
    triangle(430,leafWidth,495,leafHeight,560,leafWidth);
    triangle(435,leafWidth-70,495,leafHeight-70,555,leafWidth-70);
    triangle(440,leafWidth-140,495,leafHeight-140,550,leafWidth-140);
    triangle(445,leafWidth-210,495,leafHeight-210,545,leafWidth-210);

//Summer birds--change position depending on mouse
    if(mouseX<=160){
      strokeWeight(5);
      line(mouseX,mouseY-50,mouseX+10, mouseY-40);
      line(mouseX+10,mouseY-40,mouseX+20,mouseY-50);
      line(mouseX-30,mouseY-30,mouseX-20,mouseY-20);
      line(mouseX-20,mouseY-20, mouseX-10,mouseY-30);
      line(mouseX-30,mouseY-70,mouseX-20,mouseY-60);
      line(mouseX-20,mouseY-60, mouseX-10,mouseY-70);
      line(mouseX-60,mouseY-90,mouseX-50,mouseY-80);
      line(mouseX-50,mouseY-80,mouseX-40,mouseY-90);
      line(mouseX-60,mouseY-10,mouseX-50,mouseY);
      line(mouseX-50,mouseY,mouseX-40,mouseY-10);

//Summer text
      textSize(30)
      fill(0);
      text("Summer", 40,40)
    }

//Autumnn
      if(mouseX>160 & mouseX<=320){
      //pumpkins
      fill(205,123,28)
      ellipse(0,460,80,90)
      ellipse(95,460,75,75)
      ellipse(170,460,50,50);
      ellipse(250,460,100,100)
      ellipse(345,460,60,60)
      ellipse(450,460,120,100)
      ellipse(560,460,75,75)
      ellipse(640,460,60,60)
      //ghost--changes position depending on mouse
      //and the mouth changes shape depending on x coordinates
      fill(256);
      rect(mouseX,mouseY-90,60,80);
      ellipse(mouseX+30,mouseY-95,60)
      fill(0);
      ellipse(mouseX+15,mouseY-100,20)
      ellipse(mouseX+45,mouseY-100,20)
      ellipse(mouseX+30,mouseY-60,40,mouseX-250)
      text("Autumn",40,40)
            }

//Snow and rain
    //three different speeds for snow
    snow+=6;
    snowTwo+=5;
    snowThree+=3;

    if(mouseX>320){
      //if it's winter, make snow on the ground
      if(mouseX<=480){
        fill(256);
        ellipse(320,480,640,100);}
      //if it's spring, make rainclouds in the sky
      else{
        fill(100);
        ellipse(0,0,130,70);
        ellipse(100,20,150,80);
        ellipse(200,10,140,90);
        ellipse(300,0,130,70);
        ellipse(400,10,140,80);
        ellipse(500,0,130,90);
        ellipse(600,20,150,70)
      }
      //if it's winter, make snow white
      if(mouseX<=480){
        fill(256);}
      //if it's spring, make rain blue
      else{
        fill(18,38,169)
      }
      //droplets of snow/rain
      ellipse(10,snow,10);
      ellipse(10,snowTwo+30,10);
      ellipse(40,snow+30,10);
      ellipse(40,snowThree,10);
      ellipse(70,snowTwo+30,10);
      ellipse(70,snowThree,10);
      ellipse(100,snow+60,10);
      ellipse(100,snowTwo+30,10);
      ellipse(130,snow+60,10);
      ellipse(130,snowThree+30,10);
      ellipse(160,snowThree+60,10);
      ellipse(160,snowTwo+40,10);
      ellipse(190,snow,10);
      ellipse(190,snowTwo+70,10);
      ellipse(220,snow+20,10);
      ellipse(220,snowThree,10);
      ellipse(250,snowTwo+60,10);
      ellipse(250,snowThree,10);
      ellipse(280,snowThree+60,10);
      ellipse(280,snowTwo+10,10);
      ellipse(310,snowTwo,10);
      ellipse(310,snow+30,10);
      ellipse(340,snow,10);
      ellipse(340,snowThree+60,10);
      ellipse(370,snowThree+20,10);
      ellipse(370,snowTwo,10);
      ellipse(400,snowTwo+30,10);
      ellipse(400,snowThree+50,10);
      ellipse(430,snow+30,10);
      ellipse(430,snowTwo+60,10);
      ellipse(500,snowThree,10);
      ellipse(500,snow+60,10);
      ellipse(530,snowTwo+30,10);
      ellipse(530,snowThree,10);
      ellipse(560,snow+20,10);
      ellipse(560,snowTwo,10);
      ellipse(590,snowThree+60,10);
      ellipse(590,snow+10,10);
      ellipse(620,snowTwo+20);
      ellipse(620,snowThree+40,10);

//Winter text
      if(mouseX<=480){
        fill(0);
        text("Winter",40,40);}
      if(mouseX>480){

//Spring flowers
      //stems
      fill(52,108,8)
      rect(145,575-trunkHeight,10,trunkHeight);
      rect(295,575-trunkHeight,10,trunkHeight);
      rect(420,575-trunkHeight,10,trunkHeight);
      //petals--mouseX makes color change
      fill(215,mouseX-500,32);
      ellipse(140,580-trunkHeight,20);
      ellipse(145,565-trunkHeight,20);
      ellipse(153,585-trunkHeight,20);
      ellipse(160,573-trunkHeight,20);
      ellipse(290,580-trunkHeight,20);
      ellipse(295,565-trunkHeight,20);
      ellipse(303,585-trunkHeight,20);
      ellipse(310,573-trunkHeight,20);
      ellipse(415,580-trunkHeight,20);
      ellipse(420,565-trunkHeight,20);
      ellipse(427,585-trunkHeight,20);
      ellipse(435,573-trunkHeight,20);
      //centers
      fill(85,47,27);
      ellipse(150,575-trunkHeight,15);
      ellipse(300,575-trunkHeight,15);
      ellipse(425,575-trunkHeight,15);

//Spring text
      textSize(30);
      fill(0);
      text("Spring",40,40)
        }
    }

//Loops the snow
    if(snow>480){
      snow=-60}
    if (snowTwo>480){
      snowTwo=-60}
    if(snowThree>480){
      snowThree=-60}

  }

This assignment was very cool! I didn’t use as many variables as I thought I would, mainly because I thought it made more sense to input mouseX and mouseY instead of setting them equal to a variable and then inputting that variable. I forgot that wordpress doesn’t allow a width of 640, which unfortunately means that you can’t see the sun or the flowers change color on the blog. I also wish I had been able to make the rain and snow look more random, but since that wasn’t the point of the exercise I decided to spend more time on adding aspects that changed according to the mouse–the birds, the ghost, the flowers, etc. Overall I’m pretty pleased with how it came out!

gyueunp – Project-03: Dynamic Drawing

Dynamic Drawing

//GyuEun Park
//15-104 B
//gyueunp@andrew.cmu.edu
//Project-03-Dynamic-Drawing

var x1;
var backgroundColor;
var spot = {
  x: 100,
  y: 50
}
var size = {
  w: 10,
  h: 10
}
var col = {
  r: 162,
  g: 174,
  b: 185
}
var angle = 0;

function setup() {
  createCanvas (480,640);
  backgroundColor = 0;
}
 
function draw() {
  background(backgroundColor);
  backgroundColor = map(mouseX,0,width,0,200);

//set points for ellipse
  spot.x = x1
	spot.y = 530
	size.w = 70
	size.h = 70

	x1 = map(mouseY,0,height,width/2,mouseX);
  
  fill(255,100);
 	stroke(255,50);
 	strokeWeight(4);
//black center ellipse
  ellipse(x1,spot.y,size.w,size.h);
  push();
  fill(0,2)
  ellipse(x1,spot.y,size.w-20,size.h-20);
  pop();
//ellipse with ring
  ellipse(x1-100,spot.y-100,size.w-10,size.h-10)
 	ellipse(x1-100,spot.y-100,size.w-0,size.h-60);

//ellipse near center of canvas
  ellipse(x1-20,spot.y-150,size.w-40,size.h-40);
 	ellipse(x1-20,spot.y-150,size.w-90,size.h-90);

//white center ellipse
  ellipse(x1+100,spot.y-370,size.w-30,size.h-30);
  ellipse(x1+100,spot.y-370,size.w-90,size.h-90);
  ellipse(x1+100,spot.y-370,size.w-110,size.h-110);

//top right simple ellipse
  ellipse(x1+160,spot.y-290,size.w-50,size.h-50);
  
//cursor 
 	angleMode(DEGREES);
 	angle = angle + 20;
 	translate(mouseX,mouseY);
 	rotate(angle);
 	rectMode(CENTER);
 	rect(0, 0, 20, 30);
 	rotate(angle);
 	rect(0, 0, 20, 30);
 	rotate(angle);
 	rect(0, 0, 20, 30);
 
//set points for function a
  	a(30,260);
  	a(10,130);
  	a(70,15);
  
//ellipses if cursor on the upper left corner
  if (mouseY < height/2){
    fill(255);
    stroke(255,10);
    strokeWeight(150);
    ellipse(width/4,height/4,50,50);
    noStroke(0);
    fill(255,40);
    ellipse(width*3/4,height*3/4,50,50);
  }
//thin lines if cursor on the lower right corner
  else if (mouseY > height/2){
    fill(col.r, col.g, col.b);
    stroke(255,5);
    strokeWeight(150);
    ellipse(width*3/4,width*3/6,2,10);
    ellipse(width/4,width/4,4,15);
}

function a(x,y) {
  	push();
  	translate(mouseX,y);
  	ellipse(40,70,20,20);
  	pop();
}
}

I decided to use a limited set of colors in order to draw further attention to the dynamic quality of the work. I focused on making factors such as shapes, sizes, transparencies, positions, and colors vary subtly, while maintaining a sense of unity.

Sheenu You-Project 03-Dynamic Drawing

sketch

//Sheenu You
//Section E
//Project-04
//sheenuy@andrew.cmu.edu
function setup() {
    createCanvas(400, 300);
    strokeWeight(2);
}

function draw() {
	background(0);
	//Line 1
	for (var i = 20; i <400; i+= 20) {
		stroke("yellow");
		line(0,i,i*mouseX/5,400);
		line(400,i,i*mouseX/5,0);
	}
	//Line 2
	for (var b = 10; b<600; b+=5){
		strokeWeight(1);
		stroke("red");
		line(0+b,0,0+b,300);
	}
	//Line 3
for (var a = 20; a <400; a+= 10) {
		stroke("blue");
		line(0,a,a,400);
		line(400,a,a,0);
	}
}

This project was a little bit tough since I had a lot of ideas and I really didn’t know which one to pick and how to actually make it happen. Some ideas were too overambitious and exceed the boundaries of my knowledge in P5. I was experimenting with lines and how variables affected them and made this discovery when I put two lines together and divided one of the lines’ X-coordinate by 2. It really reminded me of geometric 80’s art, so I picked a hot pink for the lines and a dark blue/purple for the background. The colors switch for the lines and background just to make it more interesting. I really love this and it looks like I am looking at a wave or a cylinder. It was really a great and also surprisingly simple discovery.