Naomi Shimada Project 7

sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-07

var Y_AXIS = 1;
var X_AXIS = 2;
var Xpos;
var Ypos;
var r;
var t;
var b1, b2, c1, c2; //p5js
var rColor = 255;
var gColor = 255;
var bColor = 255;

function setup() {
  createCanvas(600, 600);
  //Defines the colors, p5js
  b1 = color(255);
  b2 = color(0);
  c1 = color(204, 102, 0);
  c2 = color(0, 102, 153);
}

function draw() {
  background(150);
  setGradient(0, 0, width/2, height, b1, b2, X_AXIS);       //sets background color p5js
  setGradient(width/2, 0, width/2, height, b2, b1, X_AXIS);      //sets background color p5js
  if(mouseX<width/3){
      rColor = map(random(0,255),mouseX,0,width/3,0);        //makes it flash if mouseX in first third
    }
    if(mouseX>2*width/3){
      gColor = map(random(0,255),mouseX,0,width/3,0);      //makes it flash if mouseX in last third
    }
  if(mouseIsPressed){
       rColor = random(0,255);
       gColor = random(0,255);       //changes the color randomly when the mouse is clicked
       bColor = random(0,255);
  }
  stroke(rColor,gColor,bColor);
  drawcurve(width/2, height/2);
}

function drawcurve(x, y) {
push()
translate(x, y);    //centers

  beginShape();
  for (var i = 0; i < 600; i++) {           //creates the number of verticies
     t = map(i, 0, mouseX, 0, PI);            //creates theta

    r = 150 * mouseY * tan(t*100) ;        //the equation and makes r

    Xpos = r * sin(t);      //the equation to define the x position
    Ypos = r * cos(t);      //the equation to define the y position

    vertex(Xpos,Ypos); //center of the shape
  } 
    endShape();
pop();
} 

function setGradient(x, y, w, h, c1, c2, axis) {      //from p5js

  noFill();

  if (axis == Y_AXIS) {  // Top to bottom gradient
    for (var i = y; i <= y+h; i++) {
      var inter = map(i, y, y+h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x+w, i);
    }
  }  
  else if (axis == X_AXIS) {  // Left to right gradient
    for (var i = x; i <= x+w; i++) {
      var inter = map(i, x, x+w, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(i, y, i, y+h);
    }
  }
}


I started browsing the Mathworlds curve site to start my program.  Most of them were too complicated for me to understand but I finally found one and then asked a math major to explain it to me and two fellow programmers to help me so I would know how to incorporate the equation into my code.  After that I just added in some constants,had the mouseX position dictate whether or not the colors flashed, made the color change if the mouse is pressed, and mapped different parameters to the mouseX and mouseY positions.

Looking Outwards 7

Santiago Oritz’s Ross Spiral curriculum visualizes the “history of humankind and all its interconnections.” The screen is split into three distinct sections: the leftmost third being the visual spiral itself, the thin middle third is reveal timeline, panel, and units, the rightmost third is the description. The information is broken down and categorized into: subject, grade, course, unit, learning experience. Each piece of information is displayed differently on the spiral; location, ellipse, color, and size all represent different categories. I really like the artistic implications that the spiral’s radius grows as the grade grows suggesting that the implications and breadth of knowledge expands as age and maturity increases. To me, the program looks incredibly complicated: mapping the ellipse and the timeline to moving the image and mapping the zoom to the mouse scrolling.

Link to Work

More of Santiago’s Work

Project 06 Abstract Clock

 

I went with the idea of a ballerina.  Her point shoe on the stationary leg gives the seconds and the theatre curtain behind her also moves in seconds.  The shoe moves back and forth every second; the curtain moves down every second.  The floorboards on the stage tell the hour by adding an extra floorboard every hour.  The “clock” gives the minute time by moving with the leg from different positions.  Every hour it resets back to the first position.  The rest of the body and the head was made by lines, triangles, and ellipses.  The skirt was made by creating a shape using vertices.

The whole thing was incredibly difficult, and I felt like crying.  In the end it worked out, though. I would’ve liked to have just faces of the audience appear to count the minutes instead of having the legs move but I couldn’t figure out a way for that to work (I went through five different approaches but they didn’t work out).sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-06

var dressX;    //Skirt X Coordinates
var dressX1a;
var dressX1b;
var dressX2a;
var dressX2b;

var dressY;   //Skirt Y Coordinates
var dressYa;
var dressYb;
var dressYc;
var dressYd;



 var x = 280;
 var y = 580;
 var h;
 var m;
 var s;
 var footHeight = 40;
 var footWidth = 90;
 var footX = 420;
 var spacing = 5;
 var floorSpacing = 50;
 var floorX = 10;
 var floorY = 780;
 var audienceSpacing = 80;
 var audienceSpacing2 = 50;
 var hbx = 0;
 var vbx = 156;
 var hby = 156;
 var legX = 350;
 var legY = 700;
 

function setup() {
    createCanvas(800,800);  
}

function draw() {
    background(0);

    dressX = (0);
    dressX1a= dressX - 70; 
    dressX1b= dressX1a - 10; 
    dressX2a= dressX+50; 
    dressX2b= dressX2a+10;

    dressY = (0)+ 120;
    dressYa =  dressY+ 80;
    dressYb = dressYa + 20;
    dressYc = dressY +50;
    dressYd = dressYc + 20;

    angleMode(DEGREES);
    h = hour();
    m = minute() ;
    s = second();

   
   curtains();
   Floor();
   floorBoards();
 
   push();
   translate(width/2,height/7);
   scale(2.0);
   skirt();
   pop();
   
   standingLeg();
   movingLeg();
   body();
   foot(); 

   if (s%2==0){
      footHeight = 90;
      footWidth = 40;     //seconds
      footX = 400;
   }
   else{
    footHeight = 40;     //seconds
    footWidth = 90;
    footX = 420;
   }


}



function skirt (){
    strokeWeight(0);
   fill(250,152,189);
    beginShape();
    vertex(dressX,dressY);
    vertex(dressX1a,dressYc);
    vertex(dressX1b,dressYd);
    vertex(dressX2b,dressYb);
    vertex(dressX2a,dressYa);
    vertex(dressX,dressY);
    endShape();     //skirt
}

function standingLeg(){
   stroke(250,152,189);
   strokeWeight(45);         //standing leg
   line(400,420,400,700);      
}

function movingLeg(){
   stroke(250,152,189);
   strokeWeight(45);         //moving leg 
    push();
    translate(350,460);
    if (m<60){
      rotate(3*m);
       
    }

    else if (m>=60){
      rotate(180);
       
    }
    
    line(0,0,0,280);
    strokeWeight(0);
    fill(250,152,189);
    ellipse(0, 280,40,90);
    //minute hand
    pop();

}


function body(){
    strokeWeight(0);
    fill(250,152,189)         //actual body
    triangle(400,460,470,300,320,300);

   stroke(250,152,189);
   strokeWeight(25);         //right arm
   line(320,300,270,200); 
   line(270,200,350,100);

   stroke(250,152,189);
   strokeWeight(25);         //left arm
   line(470,300,520,200);
   line(520,200,450,100); 

   ellipse(440,230,20,20);  //hair bun

   strokeWeight(0);           //head
   fill(250,152,189);
   ellipse(400,235,80,100);

   strokeWeight(45);  //neck
   line(400,300,400,320);
}

function foot(){
    strokeWeight(0);
    ellipse(footX,730,footWidth,footHeight);
}

function curtains(){
  for (i=0;i<s;i++){           //curtains
    fill(198,42,42);
    ellipse(width/2,1+(i*spacing),width+40,10);
   }
}
 
 function Floor(){
    fill(66,47,45);   //floor
   ellipse(400,800,1300,450);
 }

 function floorBoards(){
  for (i=0;i<h;i++){           //floorbaords
    stroke(0);
    strokeWeight(5);
    line(0-200+(i*floorSpacing),545,width/2,1000);
   }
 }



/* 
   for (i=0;i<10;i++){
    for (var j = 0; j < 6; j ++) {
            fill(255, 140);
            strokeWeight(0);
            noStroke();
            fill(252,185,139);       //audience
           ellipse(35+(i*audienceSpacing),270+(j*audienceSpacing2),40,40);
        }    
   } 


     
     fill(255,155,220,50);                     //horrizontal black box
     rect(hbx,100+hby,width,310); 


     fill(255,0,255,50); 
     rect(0,vbx,width,310); //vertical black box
     
     if((s<10)&(s%10!=0)){
      hbx = secs*95;
    }else if(s%10!=0){
      hbx = 0;
      secs= s-10;
    }

    push();
    frameRate(1);
    if(s%10==0){
     vbx = vbx-65;
    }
    pop();

    */




(The image is cut off for some reason. However, it works on my computer and is 800×800.)

Looking Outwards-06

all-see-eye-no_post

I was instantly drawn to Hailei Wang’s art piece All See Eye. I was especially drawn to the dark palette and the feeling that I was staring into someone’s eye and thus their soul. After I researched more, I found Wang’s blog post describing how he created the piece. He talks about his method, programming within python, and the use of randomness within the piece. He goes on to describe the relationship he sees between digital art and the traditional painting styles. Wang makes an observation in his blog post that I really liked about the randomness in his images. He says, “The random parameters are not only unpredictable, but also non-reiterative, so these images cannot be recreated—they are completely unique.”

Wang’s Blog Post

Project-05

I was inspired by Lilly Pulitzer’s famous prints for this project.  I spent a few hours looking through her prints and identifying the key aspects in them.  They all have a beach theme, use bright colors, and are relatively simple in the patterns.  To create the code, I made functions for each of the different elements and then called them within a for loop in the draw function.  The only exception was the wave function which I called in the setup so that it would act more like a background than an element in the foreground.

Preliminary Sketch:

img_7438

sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-05

   var spacing = 100;


function setup() {
    createCanvas(800,600);
    background(150,225,249);
    wave(0,100);
    wave(0,300);
    wave(0,450);
}

function draw() {
for (var i = 0; i<=8; i++){
	star(i+ i*spacing+50,190);
	palmTree(i+ i*spacing-50,40);
	star(i+ i*spacing+50,490);
	beachBall(i + i*spacing+10,360);
}
}


function palmTree(x,y){
	push();
	translate(x,y);
	fill(250,9,162);
	stroke(135,0,36);
	strokeWeight(0);
	rect(x,y,25,80);
	fill(229,77,174);
	strokeWeight(12);
	line(x,y-12,x-20,y-16); //first half of lower left palmleaf
	line(x-20,y-16,x-45,y); //second half of lower left palmleaf
	line(x+25,y-12,x+45,y-16); //first half of lower right palmleaf
	line(x+45,y-16,x+70,y); //second half of lower right palmleaf
	strokeWeight(0);
	ellipse(x+17,y-8,20,20); //leftmost coconut
	ellipse(x+25,y+8,20,20); //lowermost coconut
	ellipse(x+30,y-5,20,20); //rightmost coconut
	strokeWeight(12);
	line(x,y-32,x-20,y-36); //first half of upper left palmleaf
	line(x-20,y-36,x-45,y-25); //second half of upper left palmleaf
	line(x+25,y-32,x+45,y-36); //first half of upper right palmleaf
	line(x+45,y-36,x+70,y-25); //second half of upper right palmleaf
	pop();
}

function star(x,y){
	push();
	strokeWeight(0);
    fill("Yellow");
    ellipse(x,y,20,50);   //x = 150, y = 100

    push();
    translate(x+10,y);
    rotate(45);
    fill("Yellow");
    ellipse(20,0,20,50);
    pop();

    push();
    translate(x+20,y+40);
    rotate(15);
    fill("Yellow");
    ellipse(0,0,20,50);
    pop();

    push();
    translate(x,y+43);
    rotate(0);
    fill("Yellow");
    ellipse(0,0,20,50);
    pop();

    push();
    translate(x-30,y+33);
    rotate(225);
    fill("Yellow");
    ellipse(20,0,20,50);
    pop();

    push();
    translate(x-12,y+35);
    rotate(180);
    fill("Yellow");
    ellipse(0,0,20,50);
    pop();
    pop();
}

function beachBall(x,y){
	fill(253,55,85);
	noStroke();
    ellipse(x,y,60,60);
}

function wave(x,y){
    for (var x = 0; x < width; x = x + 1) {
        stroke(11,11,249);
        strokeWeight(5);
        point(x, y - 50 * sin(radians(x)));
        stroke(8,70,117);
        strokeWeight(5);
        point(x, y - 50 * cos(radians(x)));
    }
}




 

 

Looking Outwards-05

The stunning images in James Cameron’s Titanic captivated audiences when it came out. While Cameron and his production team built half of the Titanic, for the iconic scoping shots, a 3d rendering of the full RMS Titanic was needed. Digital Domain, Cameron’s own CG company, did the majority of the effects and even went so far as to create new ones. Titanic was the first time that motion capture was used so algorithms had to be created to translate the movement of actors to the 3d animation. In addition, the full length iconic shots of the ship itself were mostly produced through animation. While a lot of the ship had been physically built, animators had to add extra sections to the ship and sometimes even render the whole ship.

I suppose that the algorithms created to produce the work dealt with looking at the movement of real ships, flags, people, etc and then animating the scenes appropriately. I don’t know how the animators would control the camera angles with the ship, but I assume that keeping the animation consistent while changing the camera angles was a big obstacle.

Titanic VFX

Behind the Scenes of Titanic

Creating Titanic

Looking Outwards-04

As a circus performer, one of the many challenges of choreographing is finding a balance between the visual motions and the music. In SWEATSHOPPE’s video, instead of balancing music with dance, they are balancing music with creating art. A choreographer’s biggest job is making sure that the music meets the movements: a moment of silence in the music should be a moment of silence in the dance, usually following an explosive movement. SWEATSHOPPE has had to combine finding that balance with coding – something I admire incredibly.
I know that they have to create their own software to track the motion of the paintbrush to generate the images on the wall, but then they have to match up the music to the motion of the brush and the manifestation of the art on the wall. I suppose that part of this is human choice and part of it relies on adjusting the timing of the art’s generation to the moments in the music.

https://vimeo.com/39765217

Project-04-String-Art

I wanted to do a silhouette of Disney’s Ariel so I worked from a reference photo to sketch out the original plan.  However, after I was done with the silhouette, I realized she looks more like Aurora.  The overall coding was difficult but after I settled into a rhythm with her profile, it became a little easier.

Original sketch:

img_7424
sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-04

var y = 100;
var x = 150;
var a = 250;
var b = 225;
var c = 280;
var d = 250;
var e = 325;
var f = 320;
var g = 390;
var j = 400;

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

function draw() {
 
 //right hand corner starting at (480,100)
   
   for (var i = 480; i>380; i = i-3){
    y = y-3;
    stroke(255);
    line(480,y,i,0);
 }

 //starts line of forehead 
 line(380,150,480,150); 

//lower right hair swoop
 while (x>100){
 for (var z = 380; z<480; z = z+3){
    stroke(255);
    line(z,150,480,x);
    x = x-3;
   }
 }

 //lefthairswoop
  for (var i = 0; i<280; i = i+3){
    d = d-3;
    stroke(255);
 line(0,d,i,0);
 }

 //forehead
 for (var i = 380; i<480; i = i+3){
 	 line(i,150,i,225);
 }

//nose
while (b<=230){
for (var i = 380; i<440; i = i+3){
	 line(i,225,i,b)
	 b = b+1;
    }
}

 for (var i = 440; i<480; i = i+3){
      line(i,225,i,304);
  }
 
 while (a<280){
 for (var i = 440; i>400; i = i-3){
 	 line(i,a,i,304);
 	 a = a+2;
    }
 }

 //nose to lip
 while (c<290){
 for (var i = 400; i>390; i = i-3){
 	 line(i,c,i,305);
 	 c = c+2;
    }
 }

 //upper lip
 while (e>=320){
 for (var i = 385; i<400; i = i+3){
	 line(i,f,i,e)
	 e = e-1;
   f = f+1;
    }
 }
 
 //filler background
 for(var i = 400; i<480; i = i+3){
  line(i,305,i,330);
 }

//filler background
 //for(var i = 385; i<400; i = i+3){
  //line(i,390,i,344);
// }

 //filler background
 for(var i = 400; i<480; i = i+3){
  line(i,331,i,390);
 }

 //lower right hair swoop
 while (g>344){
 for (var i = 375; i<400; i = i+3){
    stroke(255);
    line(i,390,400,g);
    g = g-3;
   }
 }

//neck
while(j<600){
 for(var i = 355; i<480; i = i+3){
    line(i,390,i,j);
    j = j + 3;
  }
 }

 //eyelashes
 push();
 stroke(0);
 strokeWeight(5);
 line(380,190,390,185);
 line(390,185,395,180);
 pop();

 push();
 stroke(0);
 strokeWeight(5);
 line(378,190,390,175);
 line(390,175,393,170);
 pop();

 }






 

Project-03

sketch


//Naomi Shimada
//Section D
//nshimada@andrew.cmu.edu
//Project-03

var x1 = 140;
var y1 = 160;
var r1 = 30;

var x2 = 550;
var y2 = 300;
var r2 = 100;

var R = 150;
var G = 35;
var B = 75;

var num = 5;


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

function draw() {
 background("MistyRose");

fill("MediumSpringGreen");
 ellipse(110,210,90,90);      //background pokadots

 ellipse(310,110,70,70);

 ellipse(600,40,10,10);

 ellipse(350,390,20,20);

 ellipse(50,50,60,60);

 ellipse(210,420,50,50);

 ellipse(250,240,80,80);

 ellipse(620,460,25,25);

 ellipse(500,190,45,45);

 ellipse(30,460,8,8);

 ellipse(450,100,35,35);

 ellipse(90,350,55,55);

 ellipse(640,380,100,100);

 ellipse(400,290,25,25);

  fill(R,G,B);

  ellipse(x1,y1,r1,r1);         //draws left side ellipse

  for (var i = 0; i<num;i++) {      //makes the motion effect

  ellipse(x2-(10*i),y2,r2,r2);       //draws right side ellipse
  

  }


  if ((mouseX >= x1-r1) & (mouseX<=x1+r1) && (mouseY<=y1+r1) && (mouseY>=y1-r1) && (num>1)){

   x1 = x1+1;
   y1 = y1+1;
   r1 = r1+1;
                             //right side ellipse
   x2 = x2-1;
   y2 = y2-1;
   r2 = r2-1;

   num = num-1;


  }

   if ((mouseX >= x2-r2) & (mouseX<=x2+r2)){
   

   x2 = x2+0.5;
   y2 = y2+0.75;
   r2 = r2+0.1;
                         //left side ellipse
   x1 = x1-0.8;
   y1 = y1-0.4;
   r1 = r1-0.2;
   
   num =num+1;

  }

}

 

This was a challenge for me because I had a lot of trouble getting my if statements to work.  Luckily after many hours of perseverance it came together!

LookingOutwards-03

My dad is a Mechanical Engineering professor here at CMU, and for the longest time I assumed that, being a humanities person, I would never understand exactly what my dad does. A few months ago, he brought home some metal rings and some plastic bracelets and necklace pendants. I’d been amazed when he told me that it was a computer algorithm that made aesthetically pleasing patterns. This was the kind of programming that I could be interested in. I’m sorry to admit that I know very little about the actual algorithm other than my dad and some of his students created it.  The goal is for users to be able to design their own creations from home and then be able to print them themselves.

screen-shot-2016-09-13-at-6-36-56-pm

http://phys.org/news/2016-05-complex-d-jewelry.html