sntong-Project 10- Generative Landscape

sketch

//Scqrlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 10: Generative Landscape

var sheeps = [];
var sSheeps = [];


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

    // create an initial collection of objects
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        sheeps[i] = makeSheep(rx);
        sSheeps[i] = makeSmallSheep(rx);
    }
    frameRate(10);
}


function draw() {
    background(170,215,230);
    // changing hillscape
    Hill();
    // moving sun position
    Sun();
    // draw existing to new locationlarge sheeps
    updateSheeps();
    // draw new large sheeps
    addNewSheeps();
    updateSmallSheeps();
    addNewSmallSheeps();
}


function updateSheeps(){
    // Update and draw the large sheep positions
    for (var i = 0; i < sheeps.length; i++){
        sheeps[i].move();
        sheeps[i].display();
    }
}

function addNewSheeps() {
    // With a very tiny probability, add a new building to the end.
    var newSheepLikelihood = 0.05;
    if (random(0,1) < newSheepLikelihood) {
        sheeps.push(makeSheep(width));
    }
}


// shift sheeps
function oMove() {
    this.x += this.speed;
}


// draw large sheeps
function sheepDisplay() {
    push();
    translate(this.x+50,height-80+this.scatter);
    // legs
    stroke(60);
    strokeWeight(2);
    var loc1 = random (5,7);
    line(this.x-10,loc1-10,this.x-10,loc1+12);
    line(this.x+10,loc1-10,this.x+10,loc1+12);
    //body
    strokeWeight(0.5);
    fill(255);
    stroke(200);
    ellipse(this.x, loc1-3, this.fat+20, 20);
    fill(150);
    //head
    ellipse(this.x-18, loc1-6, this.fat-8, 12);
    stroke(120);
    pop();
}

// object large sheep
function makeSheep(make) {
    var sheep = {x: make,
                fat: 20,
                speed: -1.0,
                move: oMove,
                scatter: random(5),
                display: sheepDisplay}
    return sheep;
}


// update location of existing small sheeps
function updateSmallSheeps(){
    // Update the small sheep's positions, and draw them.
    for (var i = 0; i < sSheeps.length; i++){
        sSheeps[i].move();
        sSheeps[i].display();
    }
}

// generate new small sheeps
function addNewSmallSheeps() {
    // add a new small sheep to the end.
    var newSheepLikelihood = 0.05;
    if (random(0,1) < newSheepLikelihood) {
        sSheeps.push(makeSmallSheep(width));
    }
}

// draw farer (smaller) sheeps in the field
function smallSheepDisplay() {
    push();
    translate(this.x+20,height-150+this.scatter);
    // legs
    stroke(60);
    strokeWeight(1);
    var loc1 = random (5,6);
    line(this.x-5,loc1-5,this.x-5,loc1+6);
    line(this.x+5,loc1-5,this.x+5,loc1+6);
    //body
    strokeWeight(0.5);
    fill(255);
    stroke(200);
    ellipse(this.x, loc1-1.5, this.fat+10, 10);
    fill(150);
    //head
    ellipse(this.x-9, loc1-3, this.fat-4, 6);
    stroke(120);
    pop();
}

// smalls sheep object
function makeSmallSheep(pop) {
    var sSheep = {x: pop,
                fat: 10,
                speed: -0.5,
                move: oMove,
                scatter: random(20),
                display: smallSheepDisplay}
    return sSheep;
}

// function for drawing moving sun
function Sun (){
  for (var i = 0; i < width; i++) {
      var t = (i * 0.003) + (millis() * 0.0002);
      fill(250,200,100);
      ellipse(width-t-25,100,50,50);
  } noFill();
}

// to creste Landscape
function Hill(){
  fill(70,175,100);
  noStroke();
  beginShape();
  for (var x = 0; x < width; x++) {
      var t = (x * 0.003) + (millis() * 0.00002);
      var y = map(noise(t), 0,1, 100, height-100);
      vertex(x, y);
      vertex(0,height);
      vertex(width,height);
  }
  endShape();
}

I was imagining the view one could get while seating on a train and looking out to the fields in Australia. The larger and smaller sheep suggests their distance to the person. As time passes the sun also moves with the viewer. As I am not familiar with objects, this project is much harder for me as it is working with objects.

A quick sketch I made to visualize how things would look

Looking outwards-10

This is a work called Filtered Transparencies by Filipa Valente.

She is an architect, experience &environmental interaction designer. She has studied architecture and Media art. Her work shop is currently located at Los Angeles. She studied at Bartlett School of Architecture in London and Master in Media Art and Architecture MEDIASCAPEs at SciArc in L.A. She has collaborated with different architects, one of them are Zaha Hadid architects. Her project revolves around interest in immediate space that surround us, as in architecture, room ,a city, a crowd of people. This work is particularly admiring to me because of its abstraction and spatial quality it brings. Abstraction is one of my hardest challenge in designing. This combines bit of abstraction with the possible spatial quality that are generated with overlapping transparency of lights, which is not physical but rather abstract.

Project 10- Halloween

Halloween

//Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 10
var trees = []; //tree array
var houset = []; //house array
function setup() {
    createCanvas(480, 480); //canvas size
    strokeJoin(MITER); //set lines to be rectangular
    strokeCap(PROJECT) //set lines to be rectangular
    angleMode(DEGREES); //set angle to degrees
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width); // random value of rx
        trees[i] = makeTree(rx); //create tree at random rx 
        houset[i] = makeHouse(rx); //create house at random rx
    }
    
}


function draw() {
    var run = map(mouseX,0,width,20,60); //remap the x value to 20- 60
    frameRate(run);//set frame rate based on mouse position 
    noStroke(); //no stroke
    background(30); //background to 30
    fill(299,149,41,30) //create brown ground plance
    rect(0,280,width,height,80); //ground plane
    noFill(); //remove fill
    fill(0) //black fill
    rect(0,0,width,300); //black sky background
    noFill();
    displaybackground(); //display background elements

    updateAndDisplayobjects(); //display objects
    removeobjects(); //remove when at end
    addNewobjects();  //add new based on probaility
}


function updateAndDisplayobjects(){
    // Update the building's positions, and display them.
    for (var h = 0; h < houset.length; h ++){ // for length of the array, update house move value and display it
        houset[h].hmove();
        houset[h].hdisplay();
    }
    for (var i = 0; i < trees.length; i++){//for length of the array, update htree move value and display it
        trees[i].tmove();
        trees[i].tdisplay();

    }
    
}


function removeobjects(){
    var treesKeep = []; // tree keeping array
    var housekeep = []; //house keeping array
    for (var h =0; h < houset.length; h++){
        if(houset[h].hx + 50 >0){ //if the x value of the house +50 is larger than 0 then keep 
            housekeep.push(houset[h]);
        }
    }
    houset = housekeep;
    for (var i = 0; i < trees.length; i++){ //if the x value of the tree is larger than 0, keep 
        if (trees[i].x>0){
            treesKeep.push(trees[i]);

        }
    }
    trees = treesKeep;
   
// remember the surviving buildings
}


function addNewobjects() {
    var newobjprob = 0.4; //probability of 40 % for tree
    var houseprob =0.02; //probability of 2% for witch housing
    if (random(0,1) < houseprob){ //when number is within probability create
        houset.push(makeHouse(width))
    }
    if (random(0,1) < newobjprob) { //when number is within probability create
        trees.push(makeTree(width))
    }
    
    }
function treeDisplay(){ //tree display method
    var treeheight = 20;
    var tHeight = this.nHeight*treeheight;
    var bcount = 0;
    var branchlen = 60;
    fill(10);
    stroke(50,19,41);
    push();
    strokeWeight(1.5);
    translate(this.x, height-60);
    line(0,0,0,-tHeight);
    translate(0,-tHeight);
    stroke(120,59,41);
    while(bcount < this.branch){
    push();
    translate(0,branchlen)
    bcount+=1;
    branchlen *= 0.67
    if (branchlen > 4){
    push();
    rotate(45);
    line(0,0,0,-branchlen);
    pop();
    push();
    rotate(-70)
    line(0,0,0,-branchlen)
    pop();
    }
    pop();
    }
    pop();
}
function houseDisplay(){ //house display method
    var houseHeight = 40;
    var hwid = this.hwidth;
    var hHeight = this.hfloor*houseHeight;
    push();
    translate(this.hx,height-60);

    stroke(127,152,182,180);
    strokeWeight(3);
    line(0,0,-10*this.flip,-hHeight/2);
    line(0,0,30*this.flip,-hHeight/2);
    push();
    translate(-10*this.flip,-hHeight/3);
    line(0,0,15,-height/5)
    line(0,0,35,-height/5)
    pop();
    push();
    noStroke();
    fill(37,23,3);
    translate(-10,-height/5);
    beginShape();
    vertex(0,0);
    vertex(hwid*4,0);
    vertex(hwid*3,-hHeight);
    vertex(-hwid,-height/6)
    endShape();
    for( var i =0; i <this.hfloor; i += this.hdiv){
        fill(187,121,18,200);
        ellipse(20,-20 - (i*houseHeight/2),this.hwidth*2,this.hwinh);
    }
    pop();
    pop();


}
function treeMove(){
    this.x += this.speed;
}
function houseMove(){
    this.hx += this.hspeed;
}
function makeTree(tx){ //tree object
    var tree = {x: tx,
                speed: random(-7.0,-20),
                nHeight: floor(random(4,8)),
                branch: random(20,30),
                tmove: treeMove,
                tdisplay: treeDisplay
            }
            return tree;
}
function makeHouse(hhx){ //house object
    var house = {hx: hhx, 
                  hspeed: -2.0,
                  flip: random(-1,1),
                  hdiv: random(1,3),
                  hwinh: random(10,20),
                  hfloor: round(random(2,5)),
                  hwidth: random(10,20),
                  hmove: houseMove,
                  hdisplay: houseDisplay
             }
    return house;
}

function displaybackground(){ //background element
    noStroke();
    fill(color(255,235,5,190));
    ellipse(width-80,110,180,180);
    noFill();
    noStroke();
    fill(255,255,255,20);
    ellipse(width-30,70,30,30);
    fill(0,0,0,30);
    ellipse(width-160,130,10,30);
    fill(0,0,0,20);
    ellipse(width-20,160,35,25);
      
          noStroke();
    
    stroke(70,130,170,150);
    beginShape();
    for( var x = 0; x < width; x++){ //using noise in p5.js to create river edge
        var t = (x * 0.005)+(millis()*0.0005);
        var y = map(noise(t),0,1,20,75);
        vertex(x,height-y);
        vertex(0,height+70);
        vertex(width,height+70) ;
    }endShape();
    noStroke();
    fill(239,234,188) //moon reflection
    ellipse(100,height-20,130+random(-1,1),5+random(-1,1));
    noFill();
    fill(239,239,188);//secondary reflection 
    ellipse(80,height-15,80+random(-1,1),4+random(-1,1));
    noFill(); 
}

Since it was Halloween, I wanted to create a landscape that is staged at night with tree landscapes and witch houses on river’s edge. I wanted to give depth to the landscape formation. I have decided to create the river’s edge using the noise function in the p5js. When I tried to convey the sense of the 3D, I realized that giving a different in speed of object passage is very effective. I generated trees that differ in speed and height to convey the depth. Almost giving the sense of when someone walks in forest, they pass in different relative speed. I have created abstracted witch houses behind the trees. I created large moon and its reflection on the river to convey another layer of depth. Frame rate interact with the mouse X position giving a feel of running through the landscape vs. walking

 

ashleyc1-Section C-LookingOutwards-10

Rachel Rossin
Lossy

Rachel Rossin’s work is a multi-media, installation artist based in New York City. Her exhibition Lossy, is an investigation of the limitations of VR especially in a physical realm. She takes pre-created images and scans and alters them via VR functions and photogrammetry – creating infinite VR worlds that viewers can explore beyond her paintings. She then creates large oil paintings from these altered images within the VR world. I think this recycling process of taking reality and altering then putting back into reality is very cool. During her artist talk at the VR convention in Pittsburgh last year, Rossin says that she’s just trying to make sense of VR through painting and it’s just there to be a physical encapsulation. But I think there’s more because there is the complexity about translating something physical to virtual to physical again.

Gif animation of her contributing work for the VR salon in Pittsburgh

Maybe it’s a commentary about perceived reality, or maybe it’s about entropy, though Rossin denied it during the presentation. Her piece at the VR salon, a floating wreck composed of juxtaposed scenes from her life, felt ethereal as one floated around; something I find present in her translated paintings. Since she is a rather young artist, I’m interested to see how she develops and whether or not she decides to venture in recreating the digital world through other mediums besides painting.

Sources:

http://ziehersmith.com/exhibition/139/lossy

rossin.co/

Rachel Rossin’s Trippy Paintings of Reality as Seen Through VR

 

kyungak-lookingoutwards-10

(Kate Hollenbach, USER_IS_PRESENT, 2017)

Kate Hollenbach is an artist and a designer that works with computational programs to generate her works. She holds MFA from UCLA and a degree of computer science and engineering from MIT and was a director of design and computation at Oblong industries. Now, she examines new technologies to create an interactive space that explores the connection between one’s body, gestures, and physical space in relation to technological devices, such as phones.

“USER_IS_PRESENT” is an expansion of the relationship I just stated above. The work consists of three monitors that split across virtual and physical spaces. Hollenbach recorded three different point of views of the phone: the actual screen, back camera, and front camera. She captured the motion of both the user, phone, and the outside world and tried to bring them altogether. I admire the concept of her work. The spontaneous capture of the three view points looked fascinating when they were put together. The emphasis on being in both virtual and physical space seemed amazing.

Ziningy1 – Section C – Looking Outwards 10

 

Graduated with a MFA degree in media art in UCLA, Nova Jiang is a visual artist that work with computational system that are structurally open and aim to evoke the tactile and creative participation of the audience. When I was browsing through her website, my attention was attracted to this little garden-like installation project called Landscape Abbreviated. Landscape Abbreviated is a kinetic maze consisting of modular elements with rotating planters, which form a garden that is simultaneously a machine. The planters are controlled by a software program that continuously generates new maze patterns based on mathematical rules; they rotate to form shifting pathways that encourage visitors to change direction and viewpoints as they move through the space. I really enjoyed this project as it combines the rigorous software system with the organic setting to induced the unpredictable element in the experience. It is also highly immersive while the participants are in the maze, and the randomly moving planters in a way influences the viewers to be more conscious and sensitive surroundings. Through the changes in maze, visitors will be presented a variety of different perspectives to enjoy the whole installation, which also adds on to the overall immersive experience.

gyueunp – Looking Outwards 10

Diesel: New Natures SS16 project (2016) by FIELD

Vera-Maria Glahn is a co-founder of FIELD, a specialised creative studio in London that combines art and technology to create immersive audio-visual experiences. She worked as the executive producer for FIELD’s Diesel: New Natures SS16 project, one of my favorite works created by the studio. Commissioned by Diesel, it is a series of films that was created for the company’s NYC flagship store retail installation. Through the minimal graphical interventions in tropical scenery, the short films discuss the obsessions of our digital culture and our failure to recognize the natural beauty of our surroundings. The work has not only made me reflect on the issue, but also successfully engaged me with its visual elements. I especially loved how point-of-view shots were used to allow the viewer to enter the space created by the project. However, I am confused as to how this project relates to the Diesel and its products. A brief explanation would have been beneficial.

Interview with Vera-Maria Glahn

nahyunk1 – Looking Outwards 09

An environmental designer and an architect, Filipa Valente completed her studies in the Bartlett School of Architecture in London and in SciArc of Los Angeles. Her works mostly are focused in managing design in many architectural projects across the world which exists in places such as China, US, and Lybia. Filipa also produces environmental installations besides her architectural projects which not only uses materials that convey the idea of her themes but also expresses aesthetic purpose. One of her works named ‘Liminoid Garden’ is a project that is similar to one of the pieces that I made which makes use of neon lights and conveys spacial mood with the materials used. The way her piece is executed is admirable in her use of media art and motion censors that react in light whenever people interact with the piece. I hope to be able to create a piece one day that adds spacial mood to the audience interactively.

http://www.filipavalente.com/art/#/liminoid-blooms/

‘Liminoid Garden’ (2014)

 

Looking Outwards 10 – Yugyeong Lee

Toni Dove is one of the pioneers of interactive cinema who combines film, installation, and performance with contemporary narrative trends, often reflecting feminist take on popular subjects. She has worked with different institutions including Banff Centre for the Arts, ZKM, Whitney Museum of American Art, etc. to showcase her projects. One of her project, Lucid Possession, is a live cinema performance using “motion-sensing technologies to perform complex layers of media.” The performance sings and speaks through an Avatar which represents “an online alter ego.” The narrative unfolds as Bean, the designer of the virtual avatars, is plagued by ghosts; the story reveals inner voice battle with the real and virtual self. Her interactive project is inspiring in that it combines both real and virtual aspect through incorporating technology within the performance as well as in its narrative to reflect the on-going popular topic.

website: https://tonidove.com/

Bettina-SectionC-LookingOutwards10

For this week’s looking outwards, I found Mimi Son’s work to be quite intriguing. She co-founded a studio, Kimchi and Chips, with UK artist Elliot Woods and together they work on a mixture of tangible and digital installation projects. I liked A Journey, London, for its use of paper craft and lights — two mediums I particularly like. I appreciate how delightful the environments the studio creates are.

Above: Image of project “A Journey, London”

What’s interesting, since we are bringing up the topic of underrepresented females in the industry, is that Elliot Woods, Son’s male studio partner, is listed first in all descriptions of their studio. Perhaps I’m affect by confirmation bias (after all, their studio name suggests Son is first since Kimchi references Korean culture) but I’m curious if it was a publicity decision or a sincere representation of who has more contribution in the studio.