Project 11- Landscape

sketch
var peakvalue = [];
var noiseParam = 0;
var noiseStep = 0.005;
var x = [];
var y = [];
var dx = [];
var dx1 = 0;
var c = [];
var seacoralshape = 0.002;
var seacoralspeed = 0.005


function preload(){
  cloud = loadImage("https://i.imgur.com/ZtLcxL9.png");
}



function setup() {
  createCanvas(400, 400);
  for (var i = 0; i <=width/5; i++) {
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 300, height);
    peakvalue.push(value);
    noiseParam += noiseStep;
  }

   for (var i=0; i<50; i++){
      x[i]= random(10, width-10);
      y[i] = random(250, 400);
      dx[i] = random(-5,-1);
      c[i] = color(random(255),255,240);
    }
}

function draw() {

  background(251, 164, 153);
  fill(246, 189, 192);
  ellipse(200,200,320,320);
  fill(241, 149, 155);
  ellipse(200,200,290,290);
  fill(240, 116, 112);
  ellipse(200,200, 260);
  fill(234, 76, 70);
  ellipse(200,200,230,230);
  fill(220, 28, 19);
  ellipse(200,200, 200,200);
  seacoral();
  cloud.resize(70,0);
  tint(255,127);
  image(cloud, -250 + dx1, 40);
  image(cloud, -100 +dx1, 100);
  image(cloud, 180 + dx1, 40);
  image(cloud, 20 + dx1, 30);
  image(cloud, 100 + dx1, 100);
  image(cloud, 300 + dx1, 100);
  dx1 += 0.5;
  peakvalue.shift();
  var n2 = noise(noiseParam);
    var value = map(n2, 0, 1, 0, height*1.5);
    peakvalue.push(value);
    noiseParam += noiseStep;

  beginShape();
  vertex(0, height);
  for (var i = 0; i <= width/5; i++) {
    fill(102, 179, 255);
  noStroke();
    vertex(i*5, peakvalue[i]);
    
  }
  vertex(width, height);
   endShape(); 

    for (i = 0; i<50; i++){
      if(x[i] < -30){
        x[i] = 450
      }
      fish(x[i], y[i], dx[i],c[i]);
      x[i] += dx[i]
  }
  frameRate(10);

}


function fish(x,y, dx,c){
  fill(c);
  ellipse(x,y,20,10);
  if(dx >= 0){
    triangle(x - 10, y, x -15, y - 5, x - 15, y + 5);
  }else if(dx < 0){
    triangle(x+10,y, x + 15, y - 5, x + 15, y + 5);
  }
}

function seacoral(){
  noStroke();
  fill(119, 158, 203);
  beginShape();

  for(var i = 0; i < width; i ++){
    var x = (i * seacoralshape) + (millis() * seacoralspeed);
    var y = map(noise(x), 0, 1.2, 200, 250);
    vertex(i, y);
  }

  vertex(width, height);
  vertex(0, height);
  endShape();
  }


For this week’s project, I wanted to create a landscape that shows the ocean drifting and many fish swimming.

Looking Outwards 11

For this week’s blog post, I decided to write about Tina Frank, a graphic designer who focuses mainly on interaction and music within her work. Tina Frank is an Austrian designer, artist and professor at the University of Art and Design. As a designer, she collaborates with musicians to incorporate sound into her work. Within the years, her work has shifted from data visualizations for scientific projects. One work that I will be discussing today is a project called “What if.” This project is an interactive light installation in a building that raises the question of what our world would be like if XYZ was in action. For example, what if the world was inhabited by mosses and ferns? What if feminists ruled the world? The thing I admire the most about this project is how the one lighting installation changed completely the mood of a space. In the video included below, the lighting installation as well as the sound and the music gives the whole project a very surrealistic feeling.

Project-11-Landscape

For this project, I wanted to create a desert landscape with some cactus here and there.

sketch
//jiaqiwa2; Jiaqi Wang; Section C
var marketValue=[];
var noiseParam=0;

var noiseStep=0.03;
var cactus = [];

function setup() {
    frameRate(30);
    createCanvas(600, 240);
    stroke(89,158,90);
    noStroke();
    fill(89,158,90);
    //strokeWeight(5);
    //set up the y value for every 5 pixels across the canvas horizontally
    for(var i=0;i<=120;i++){
        var n=noise(noiseParam);
        var value=map(n,0,1,height/3,height);
    	marketValue.push(value);
    	noiseParam+=noiseStep;
    }
    frameRate(20);

    for (var i = 0; i < 10; i++){
        var rx = random(width);
        cactus[i] = makeCactus(rx);
    }

}

function draw() {
	background(234,197,119);
  fill(249,242,215);
  noStroke();
  ellipse(width/2,height/2,100,100);
  //remove the first point
    marketValue.shift();
    var n=noise(noiseParam);
    var value=map(n,0,1,height/3,height);
    //and add it to the last point
    marketValue.push(value);
    noiseParam+=noiseStep;
    //start shape from (0,height)
    noStroke();
    fill(186,109,78);

  beginShape();
  curveVertex(0,height);
  curveVertex(0,height);
	for(var i=0;i<width/10;i++){
       
       vertex(i*10, marketValue[i]);
       //check if the hill is close to the right end
        if(i==59){
         i+=1;
         vertex(i*10, marketValue[i]);
         vertex(width, height);
         vertex(0,height);
         vertex(0,height);
         endShape();
       }
  }

  beginShape();
  curveVertex(0,height);
  curveVertex(0,height);



  

 

  updateAndDisplayCactus();
  removeCactusThatHaveSlippedOutOfView();
  addNewCactusWithSomeRandomProbability(); 
     
	   
	//noLoop();
}



function updateAndDisplayCactus(){
    // Update the building's positions, and display them.
    for (var i = 0; i < cactus.length; i++){
        cactus[i].move();
       cactus[i].display();
    }
}


function removeCactusThatHaveSlippedOutOfView(){
    // If a building has dropped off the left edge,
    // remove it from the array.  This is quite tricky, but
    // we've seen something like this before with particles.
    // The easy part is scanning the array to find buildings
    // to remove. The tricky part is if we remove them
    // immediately, we'll alter the array, and our plan to
    // step through each item in the array might not work.
    //     Our solution is to just copy all the buildings
    // we want to keep into a new array.
    var cactusToKeep = [];
    for (var i = 0; i < cactus.length; i++){
        if (cactus[i].x + cactus[i].breadth > 0) {
            cactusToKeep.push(cactus[i]);
        }
    }
    cactus = cactusToKeep; // remember the surviving buildings
}


function addNewCactusWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newCactusLikelihood = 0.007; 
    if (random(0,1) < newCactusLikelihood) {
         cactus.push(makeCactus(width));
    }
}


// method to update position of building every frame
function  cactusMove() {
    this.x += this.speed;
}
    

// draw the building and some windows
function  cactusDisplay() {
  
    push();
    fill(55,104,50);
    stroke(16,66,7);
    strokeWeight(5);
    translate(this.x, height+90);
    ellipse(0,-100,this.breadth,this.Tall);
    
    push();
    
    translate(this.breadth/2,-this.Tall/2);
    rotate(radians(-20));
    ellipse(0,-100,this.breadth/3*2,this.Tall/3*2);
    pop();

    translate(this.breadth/2,-this.Tall/2);

    push();
    rotate(radians(20));
    translate(-this.branch,0);
    ellipse(0,-100,this.breadth/3*2,this.Tall/3*2);
    pop();


   
    translate(-this.branch/5,-this.Tall/3);
    ellipse(0,-100,this.breadth/6*2,this.Tall/6*2);
    pop();

}


function makeCactus(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: round(random(20,40)),
                speed: -2,
                Tall:random(40,120),
                branch:random(30,40),
                theta: round(random(10,40)),
                move:  cactusMove,
                display:  cactusDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-50, width, height-50); 
}





LookingOutwards-11


The artist I want to talk about is Milica Zec. She is a New York City-based film and virtual reality director, editor, and screenwriter. One of her projects in the virtual reality medium was a short narrative piece called, “Giant,” which is a VR immersive experience based on true events during a war. “Giant” transports the viewer into a bomb shelter in an active war zone, where two parents are trying to distract their children from the war by telling a story. I admire how powerful and influential her work is in creating empathy. Many viewers indicated that they felt strongly connected to the refugees. I like how she used VR as a tool of storytelling, and the story she told is very meaningful.

Giant

Before entering the field of virtual reality, Milica has been collaborating for 9-years with the performance artist Marina Abramovic. Specifically, Milica has been Marina’s filmmaker, editor, and video-installation designer. As for her educational background, Milica is a graduate of The University of Dramatic Arts in Belgrade, Serbia, and SCPS NYU.

Project 11: Landscape

sketchDownload
var waveDetail = 0.003; // detail in shallow wave
var waveSpeed = 0.0002; // speed of waves
var waveDetail2 = 0.002; //detail of mid wave
var waveDetail3 = 0.001; //detail of deep wave
var seaGround = []
var sunset;

function preload() {
    sunset = loadImage("https://i.imgur.com/14AlgbU.png");
    seaweed = loadImage("https://i.imgur.com/JHftB8t.png");
    fish = loadImage("https://i.imgur.com/BFimCOm.png")
}
function setup() {
    createCanvas(600, 400);
    for (var i = 0; i < 5; i ++){
        var rx = random(width);
        var ry = random(10, 50)
        seaGround[i] = makeSeaweed(rx, ry);
    }
    frameRate(15);
}

function draw() {
    background(153, 153, 204);

    image(sunset, 0, 0, 600, 400);
    makeWaves();
    updateSeaweed();
    removeSeaweed();
    image(fish, 300, 200, 300, 200);  
    addSeaweed();

}

function makeWaves() {
    fill(95, 191, 254);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * waveDetail) + (millis() * waveSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    //second wave
    beginShape();
    fill(41, 160, 255);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * waveDetail2) + (millis() * waveSpeed);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    //third wave
    beginShape();
    fill(19, 138, 233);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t3 = (x * waveDetail3) + (millis() * waveSpeed);
        var y = map(noise(t3), 0, 1, 300, height);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

function updateSeaweed(){
    for (var i = 0; i < seaGround.length; i ++){
        seaGround[i].move();
        seaGround[i].display();
    }
}

function removeSeaweed(){
    var keepSeaweed=[];
    for (var i = 0; i < seaGround.length; i++) {
        if (seaGround[i].x < 600) {
            keepSeaweed.push(seaGround[i]);
        }
    }
}

function addSeaweed(){
    //little probability
    var newSeaweedLikelihood = 0.02; 
    if (random(0,1) < newSeaweedLikelihood) {
        seaGround.push(makeSeaweed(15, 15));
    }
}

function moveSeaweed(){
    this.x += this.speed;
}

function displaySeaweed(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, height-300);
    image(seaweed, 0, 0, 400, 320);
    pop();

}

function makeSeaweed(birthLocationX, birthLocationY){
    var seaweeds = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveSeaweed,
                display: displaySeaweed};
    return seaweeds;
}

I wanted to illustrate a fish swimming in the ocean, as the ocean waves and seaweed passed by. I was inspired by the sunset, and I started to think about how i can make the sunset a moving landscape. I drew the sunset, seaweed, and fish objects on Procreate.

No description available.
sunset that i drew that was the source of inspiration
No description available.
rough sketch
No description available.
final sketch

Project 11

For this project I decided to create a series of clouds and planes which would move across the blue sky. With the amount of time spent indoors the past few months, it’s helpful to remember what it’s like to look up.

sketchDownload
var clouds = [];
var xcNoise = [];
var ycNoise = [];
var scNoise = [];
var planes = [];

function setup() {
    createCanvas(480, 480);
//creating initial number of objects
    for (var i = 0; i < 4; i++){
        var rx = random(width);
        clouds[i] = makeClouds(rx);
    }

    for (var i = 0; i < 2; i++){
        var rx = random(width);
        planes[i] = makePlanes(rx);
    }

    for (var i = 0; i < 20; i++) {
        xcNoise[i] = random(-40,40);
        ycNoise[i] = random(-40,40);
        scNoise[i] = random(60,70)
    }

    frameRate(10);
}


function draw() {
    background(200,215,255);

    updateAndDisplayPlanes();
    updateAndDisplayClouds();
    offScreenPlanes();
    offScreenClouds();
    newPlanes();
    newClouds();
}

//making sure objects move across the screen
function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}
function updateAndDisplayPlanes(){
    for (var i = 0; i < planes.length; i++){
        planes[i].move();
        planes[i].display();
    }
}
//removing objects once they're no longer needed
function offScreenClouds(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}
function offScreenPlanes(){
    var planesToKeep = [];
    for (var i = 0; i < planes.length; i++){
        if (planes[i].x + planes[i].breadth > 0) {
            planesToKeep.push(planes[i]);
        }
    }
    planes = planesToKeep;
}

//different probabilities for adding new objects
function newClouds() {
    var newCloud = 0.0095;
    if (random(0,1) < newCloud) {
        clouds.push(makeClouds(width+100));
    }
}
function newPlanes() {
    var newPlane = 0.007;
    if (random(0,1) < newPlane) {
        planes.push(makePlanes(width+100));
    }
}
//moving the objects across the screen at different speeds
function cloudMove() {
    this.x += this.speed;
}
function planeMove() {
    this.x += this.speed;
}
//creating the actual objects for clouds and planes
function cloudDisplay() {
    fill(255);
    stroke(0);
    push();
    translate(this.x, this.placement);
    stroke(200);
    noStroke();
    fill(255);
    for (let i = 0; i < this.nFloors; i ++) {
        circle(xcNoise[i], ycNoise[i], scNoise[i]);
    }
    pop();
}

function planeDisplay() {
    push();
    stroke(0);
    fill(0);
    translate(this.x, this.placement);
    ellipse(0,0,40,8);
    triangle(2,0,5,-25,-10,0);
    triangle(2,0,5,25,-10,0);
    triangle(15,0,15,8,10,0);
    triangle(15,0,15,-8,10,0);
    pop();
}

//creating the objects for clouds and planes, and their parameters
function makeClouds(birthLocationX) {
    var cld = {x: birthLocationX,
                breadth: 50,
                speed: random(-2,-.8),
                nFloors: round(random(4,10)),
                move: cloudMove,
                display: cloudDisplay,
                placement: random(0,height)}
    return cld;
}
function makePlanes(birthLocationX) {
    var pln = {x: birthLocationX,
                breadth: 20,
                speed: random(-4,-2),
                move: planeMove,
                display: planeDisplay,
                placement: random(0,height)}
    return pln;
}

Looking Outwards 11

For this looking outwards, I took a closer look at a project and architect that I knew of, but not about, Jenny Sabin. She began her career with two arts degrees from the University of Washington, and went back to school a few years later and received a Masters in Architecture from the University of Pennsylvania. She has her own studio based in Philadelphia, and is now also a part of the Department of Architecture at Cornell University. Her work focuses on computational design, as well as digital fabrication. The project below is titled Lumen, and was on display in the summer of 2017 at MoMA PS1. The project is a great example of how digital fabrication can create precise spaces without giving way to corners or flat walls. Lumen is a knitted structure which serves to create private and shaded spaces in the summer heat, while lighting up to create dynamic and exciting spaces at night. The project was successful enough that it became one of a series of similar works from her and her studio.

Website

Looking Outwards 11

The female new media artist that I chose to highlight is Mimi Son. She studied interactive design at the Copenhagen Institute of Interaction Design before starting a design firm alongside Elliot Woods named Kimchi and Chips. Mimi’s fascination with geometry and Buddhist philosophy play a large role in inspiring her work and the elements of time and space.

Line Segments Space is a work by Mimi Son displayed in nylon string and digital emulsion. This display is shown in the Vimeo above where you can see the interaction between the light display and sound. I found this to be such a captivating form of line art. Each of lines represents a transformed 2 dimensional canvas which is also represented in different dimension, sound.

Looking Outwards 11

Looking Outwards 11: A Focus on Women Practitioners

This week, I took a look at Nathalie Miebach’s Sculptural Musical Scores, “Weather Score Project.” She translated weather data into musical scores, and then translate those into sculptures. It is a mapped meteorological conditions of a specific time and place, and functional musicals scored played by musicians as well. Nathalie studied political science, art education, visual arts, astronomy, physics, and sculpture. She is now an innovator in residence at Rutgers University. She has been working a lot with data and translating them into artistic forms. This Weather Score project was particularly interesting to me because of its interesting translation between different medium. It is very interesting how she translated a set of data into a visual art form, and then translated them into a musical art form. I was amazed by how borderless it is between the different kinds of arts and medium. I like how she takes a meaningful data and make them more interesting in their forms.

http://nathaliemiebach.com/musical28.html

http://nathaliemiebach.com/weatherscores.html

Project 11 Landscape

sketch
sketch for the composition
//Jae Son, section C 

var bike;
var clouds = [];
var buildings1 = [];
var buildings2 = [];
var lines = [];

function preload(){
  bike = loadImage("https://i.imgur.com/NCg0ju7.png");
}

function setup() {
    createCanvas(400, 300);
    background(11,92,146);
    var cloudn = 0;
    var building1n = 0;
    var building2n = 0;
    var linesn = 0;
    for (var i = 0; i < 500; i++) {
      clouds[i] = createCloud(cloudn);
      cloudn += 180;
      buildings1[i] = createBuilding1(building1n);
      building1n += 140;
      buildings2[i] = createBuilding2(building2n);
      building2n += 110;
      lines[i] = createlines(linesn);
      linesn += 400;
    }
    frameRate(15);
}

function draw() {
  imageMode(CENTER);
  background(153,225,254);
  noStroke();
  //cloud displayed
  displayCloud();
  //back layer buildings displayed
  displayBuilding1();
  //front layer buildings displayed
  displayBuilding2();
  //green ground
  fill(98,142,62);
  rect(0,209,width,91);
  //dark gray road
  fill(31,42,45);
  rect(0,238,width,62);
  //white line on the road displayed
  displaylines();
  //person on the bike
  image(bike,200,228,125,83);
}

//cloud
function displayCloud(){
  for (var i = 0; i < clouds.length; i++){
    clouds[i].move();
    clouds[i].display();
  }
}

function moveCloud() {
  this.x += this.speed;
}

function createCloud(cloudx){
  var cloud = {x: cloudx,
               cloudy: random(20,70), //so the y coordinate of the clouds vary
               cloudw: random(28,42), //so the size of the clouds vary
               speed: -3.0,
               move: moveCloud,
               display: drawCloud
               }
  return cloud;
}

function drawCloud(){
  noStroke();
  push();
  fill(255);
  ellipse(this.x-20,this.cloudy,this.cloudw,this.cloudw);
  ellipse(this.x,this.cloudy,this.cloudw,this.cloudw);
  ellipse(this.x+20,this.cloudy,this.cloudw,this.cloudw);
  pop();
}

//back layer buildings
function displayBuilding1(){
  for (var i = 0; i < buildings1.length; i++){
    buildings1[i].move();
    buildings1[i].display();
  }
}

function moveBuilding1() {
  this.x += this.speed;
}

function createBuilding1(buildingx){
  var building1 = {x: buildingx,
               building1ay: 106,
               building1aw: 40,
               building1ah: 133,
               building1by: 91,
               building1bw: 54,
               building1bh: 126,
               building1cy: 117,
               building1cw: 48,
               building1ch: 140,
               speed: -8.5,
               move: moveBuilding1,
               display: drawBuilding1
               }
  return building1;
}

function drawBuilding1(){
  noStroke();
  push();
  fill(119,181,183);
  rect(this.x,this.building1ay,this.building1aw,this.building1ah);
  rect(this.x+40,this.building1by,this.building1bw,this.building1bh);
  rect(this.x+92,this.building1cy,this.building1cw,this.building1ch);
  pop();
}

//front layer buildings
function displayBuilding2(){
  for (var i = 0; i < buildings2.length; i++){
    buildings2[i].move();
    buildings2[i].display();
  }
}

function moveBuilding2() {
  this.x += this.speed;
}

function createBuilding2(building2x){
  var building2 = {x: building2x,
               building2y: random(100,140),
               building2w: random(30,50),
               building2h: random(100,145),
               speed: -6.5,
               move: moveBuilding2,
               display: drawBuilding2
               }
  return building2;
}

function drawBuilding2(){
  noStroke();
  push();
  //building structure
  fill(156,218,191);
  rect(this.x,this.building2y,this.building2w,this.building2h);
  //windows (strips) on the building
  fill(130,182,187);
  rect(this.x+this.building2w/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  rect(this.x+this.building2w*3/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  rect(this.x+this.building2w*5/7,this.building2y+this.building2h*0.1,this.building2w/7,this.building2h*0.8);
  pop();
}

//white lines on the road
function displaylines(){
  for (var i = 0; i < lines.length; i++){
    lines[i].move();
    lines[i].display();
  }
}

function movelines() {
  this.x += this.speed;
}

function createlines(linesx){
  var lines = {x: linesx,
               linesy: 273,
               linesw: 73,
               linesh: 5,
               speed: -7.0,
               move: movelines,
               display: drawlines
               }
  return lines;
}

function drawlines(){
  noStroke();
  push();
  fill(255);
  for (i = 0; i < 3; i++) {
    fill(255);
    rect(this.x+135*i,this.linesy,this.linesw,this.linesh);
  }
  pop();
}