Project-11

sketch
//Robert Rice
//rdrice
//section c

var sun = {filename:'https://i.imgur.com/74H6zli.png', //original URL https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7bcda634-15a0-43a8-9de8-2800412220c0/datjxhn-b3b3c9fa-946d-43e2-b2b4-28dc84b56ca0.png/v1/fit/w_150,h_150,strp/retrowave_sun_with_alpha_background_by_robilo_datjxhn-150.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTAyNCIsInBhdGgiOiJcL2ZcLzdiY2RhNjM0LTE1YTAtNDNhOC05ZGU4LTI4MDA0MTIyMjBjMFwvZGF0anhobi1iM2IzYzlmYS05NDZkLTQzZTItYjJiNC0yOGRjODRiNTZjYTAucG5nIiwid2lkdGgiOiI8PTEwMjQifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.sdt5sozezYuJLi-b3ecAoqszmafFkXh8VGg3G1-YSqE
            x:300,
            y:175,
            drawFunc: drawImg}

var mustang = {filename:'https://i.imgur.com/ZQ6wSq5.png', //I DREW THIS (i traced it but still)
            x:100,
            y:279,
            drawFunc: drawImg}

var wheels = {filename:'https://i.imgur.com/5edjrVN.png', //I DREW THIS (okay i traced but still its technically original)
            x:103,
            y:289,
            drawFunc: drawImg}


var dx = 2; //the speed at which the furthest background objects pass by

var marketvalue = [];   //Reusing my code from assignment 07-a to make an undulating middleground
var noiseParam = 0;
var noiseStep = 0.005;
var n;  //end reused code, appears as DUNES below

var hills=[];

var sign = 1    //the value that the car is pushed up/down by
var pushCount = 0   //keeps track of how far the car has bumped up/down


function preload() {
    // call loadImage() and loadSound() for all media files here
    sun.image = loadImage(sun.filename);
    mustang.image = loadImage(mustang.filename);
    wheels.image = loadImage(wheels.filename);
}

function setup() {
    createCanvas(500, 300);
    background(0);
    imageMode(CENTER);

    strokeWeight(5);
    stroke(119, 179, 0);

    n = (width / 5) + 1 //sets up initial points for the dunes
    for(i = 0; i <= n; i++) {
        noiseParam = noiseStep*i
        marketvalue[i] = (noise(noiseParam) * 150)+150;
    }
}

function draw() {
    //BEGIN BACKGROUND

    push();
    background(38, 0, 77);  //gradient background
    for(i=0; i<300; i++) {
        strokeWeight(1);
        stroke(255-(0.723*i), 77-(0.256*i), 196-(0.396*i))
        line(0, 299-i, 500, 299-i);
    }
    sun.drawFunc(150, 150); //background Sun
    pop();

    //END BACKGROUND
    //BEGIN HILLS. makes some hills/mesas that lazily move along in the background
    
    push();
    if(random(1) > 0.99) {
        makeHill(random(50, 200), random(50, 125), color(random(169, 189), random(49, 69), random(0, 10)));
    }

    var numH = hills.length;
    if (numH > 0) {
        for (i=0; i<numH; i++) {
            hills[i].drawFunc();
            hills[i].upFunc();
        }

        if (hills[0].x+hills[0].r < 0) {
            hills.shift();
        }
    }
    pop();

    //END HILLS
    //BEGIN DUNES (the 07-a reused code i mentioned)

    push();
    marketvalue.shift();    //gets rid of the first value in the list in order to make room for a new one

    strokeWeight(5);
    stroke(179, 119, 0);
    fill(204, 170, 0);
    beginShape();
    vertex(0, height);
    for(i=0; i<n; i++) {
        vertex(5*i, marketvalue[i])
    }
    vertex(width, height);
    endShape(CLOSE);
    
    noiseParam = noiseParam + noiseStep;    //increases the noise paramter, generates a new rolling value
    marketvalue.push(noise(noiseParam)*150+150); //appends the new value
    pop();

    //END DUNES
    //BEGIN ROAD
    push();
    strokeWeight(20);
    stroke(150);
    line(0, 295, 499, 295)
    stroke(75);
    line(0, 299, 499, 299);
    pop();
    //END ROAD
    //BEGIN CAR
    push();
        mustang.y += sign/4
        wheels.drawFunc(77, 15);
        mustang.drawFunc(100, 35);

    pushCount++
    if (pushCount > 8) {
        sign = -sign
        pushCount = 0
    }
    pop();
    //END CAR
}

//END CODE
//BEGIN HELPERFUNCTIONS

function drawImg(w, h) {
    image(this.image, this.x, this.y, w, h);
}

function makeHill(r, h, c) {
    var newHill = {r: r,
        h: h,
        x: 499,
        y: 299,
        drawFunc: drawHill,
        upFunc: updateHill,
        color: c,
        speed: dx}

    hills.push(newHill);
}

function drawHill() {
    noStroke();
    fill(this.color);
    rect(this.x, this.y, this.r, -this.h);
    ellipse(this.x+this.r/2, this.y-this.h, this.r, this.r);
}

function updateHill() {
    this.x -= this.speed;
}

Project-11

sketch

I created this landscape story about skiing. There was mountain scrolling in the background and decoration banners saying that this is a skiing resort. The trees are scrolling to the left to create the effect that the skier is moving to the right. There are four types of trees and they all appear randomly. The size of the tree is also randomly decided. There are balloons floating in the sky and yellow stars shining in the background to make this scene more interesting. The balloons appear at random height from mid-air to the highest sky in the program.

//Heying Wang 
//Section B
var skier;
var birdImg;
var treeTypes=[]
var trees=[];
var birds=[];

//use noise to draw terrain
var noiseParam=0;
var noiseStep=0.05;
var values=[];


function preload(){
    //three types of Christmas tree
    var tree2 = loadImage("https://i.imgur.com/NJBdtua.png");
    treeTypes.push(tree2);
    var tree3=  loadImage("https://i.imgur.com/CU8yOAQ.png");
    treeTypes.push(tree3);
    var tree4=  loadImage("https://i.imgur.com/5Nyq5gE.png");
    treeTypes.push(tree4);
    var tree5=  loadImage("https://i.imgur.com/gCqcv9f.png");
    treeTypes.push(tree5);
    skier=loadImage("https://i.imgur.com/zbJ0fyD.png");
    birdImg=loadImage("https://i.imgur.com/H0cfnnj.png");
    

  }
function setup() {
    createCanvas(480, 300);
    for (var i = 0; i < 10; i++){
        var rx = random(width*3);
        trees[i] = makeTree(rx);
    }

    for(i=0;i<=width/12;i++){
        var n=noise(noiseParam);
        var value=map(n,0,1,0,height);
        values.push(value);
        noiseParam+=noiseStep;
    }
    for (var i = 0; i < 3; i++){
        var rx = random(width);
        birds[i] = makeBird(rx);
    }
    frameRate(13);
 
    
}

function draw() {
    background(220,220,250);
    imageMode(CENTER);

    
    fill(90,20,60);
    rect(0,0, width, height-150); 
    values.shift();
    var newRandom=map(noise(noiseParam),0,1,0,height);
    values.push(newRandom);
    noiseParam += noiseStep;
    drawTerrain();
    //draw the banner and pillers
    fill('grey');
    rect(0,50,30,height-50);
    rect(width-30,50,30,height-50);
    fill(140,40,40);
    rect(30,50,width-60,20);
    fill(255);
    text('2020 ski season',width/2-20,62);
    fill(20,30,70);
    rect(0,height-50, width, height-150); 


    updateAndDisplaytrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 

    updateAndDisplaybirds();
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability(); 
    //draw skier
    var skierX=240+random(-0.5,0.5);
    image(skier,skierX,240,100,100);

    noStroke();
    fill('yellow');
    for(var i=0;i<10;i++){
        circle(random(width),random(height-100),2,2);
    }

}

function updateAndDisplaytrees(){
    // Update the trees' positions, and display them.
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}  
function updateAndDisplaybirds(){
    // Update the birds' positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}      

function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; 
}
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x + birds[i].size > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; 
}


function addNewTreesWithSomeRandomProbability() {
    var newTreeLikelihood = 0.007; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

function addNewBirdsWithSomeRandomProbability() {
    var newBirdLikelihood = 0.02; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width));
    }
}

function makeTree(birthLocationX) {
    var tre = {x: birthLocationX,
                breadth: random(60,70),
                speed: -2,
                treeType: random(treeTypes),
                move: treeMove,
                display: treeDisplay}
    return tre;
};
function makeBird(birthLocationX) {
    var bir = {x: birthLocationX,
                birdImage:birdImg,
                y:random(30,200),
                speed: -2,
                size:random(15,60),
                move: birdMove,
                display: birdDisplay}
    return bir;
};

function treeMove() {
    this.x += this.speed;
}
function treeDisplay() {
   image(this.treeType,this.x,215,this.breadth,this.breadth*1.4);

}
function birdMove() {
    this.x += this.speed;
}
function birdDisplay() {
    image(this.birdImage,this.x,this.y,this.size,this.size*1.2);

}



function drawTerrain(){
    //draw the terrain using begin shape and end shape
    noStroke();
    fill('white');
    beginShape();
    vertex(0,height);
    vertex(0,height);
    for(i=0;i<=width;i+=12){
        curveVertex(i,values[i/12]);

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

Looking Outwards-11

Heying Wang Section B

Caroline Sinders, Feminist Data Set (2017)

Caroline Sinders is an artist interested in machine-learning and interdisciplinary areas. She holds a Masters from New York University’s Interactive Telecommunications Program. She is also the founder of Convocation Design + Research, an agency focusing on the intersections of machine learning, user research, designing for public good, and solving difficult communication problems. I chose to look at Sinders because many of her works express feminist views, political ideology, and social justice. Her works show an interesting combination of technology, fine arts, and service design. Sinders has been using machine learning a lot in her art creations.

The project that interests me is called Feminist Data Set (2017). It interrogates the AI process including data collection, data labeling, data training, etc. The project is a response to the problem of data harvesting. I think it’s a thought-provoking work that has great importance because these days people’s data are collected easily by large technological companies.The project is a social justice art practice that uses data creation as a protest. The artists’ intentions are uniquely presented. I think it’s creative to make a data-set about political ideology.

LO 11 – Women Practitioners

Milica Zec is a VR filmmaker who focuses on creating stories to raise awareness of societal and environmental issues. Growing up in Serbia, she witnessed war, bombings, and unrest as a child. Her tumultuous childhood inspires her work, in which she hopes to preserve what is precious through creating new realities. 

Milica’s second VR film, Trees, places a viewer in the middle of a rainforest as an immobile tree that grows from a seed and eventually is destroyed by a wildfire, as the viewer watches, helpless as they cannot do anything to save the tree or forest. In a talk at the World Economic Forum, she describes how the film was so moving that many viewers came out in tears, finally understanding climate change on an innate and personal level.

I watched Trees online through a 2D youtube video. While I didn’t experience it the way it was meant to be viewed, I could immediately understand how powerful its message could be when immersing a viewer in these surroundings. I’m excited to see how her next project, Rainforest, continues this message in a more interactive way.

Project 11 – Generative Landscape

sketch
/*
 * Eric Zhao
 * ezhao2@andrew.cmu.edu
 *
 * Generative ladnscape 
 *
 */

var hillHeights = [];
var mountainHeights = [];
//arrays for foreground and background
var noiseParam = 0;
var noiseParam2 = 0;
var noiseStep = 0.01;
var numpoints = 80;
//bottom 4 used as placemarkers and attempts
//to make the hobbit holes not disappear on screen
var xInc;
var circleRad; 
var breadth = 25;
var marginRatio = (numpoints+breadth)/numpoints;

function drawMountain(hill, numpoints){
    //draws a perlin noise mountain
    beginShape();
    vertex(width - width*marginRatio, height);
    vertex(width - width*marginRatio, height);
    for(let i = -breadth; i <= numpoints+breadth; i++){
        vertex(i * xInc, hill[i]);
    }
    vertex(width*marginRatio, height);
    vertex(width*marginRatio, height);   

    endShape();
}

function stepMountain(param, step, hill, numpoints){
    //generates array of perlin values used for mountain and trees
    hill.shift();
    for(let i = -breadth; i <= numpoints+breadth; i++){
        var n = noise(param);
        var value = map(n, 0, 1, 0, height);
        hill.push(value);
        param += step;
    }
    noiseParam = param;
}

function drawHole(circleRad){
    //hobbit hole draw function
    fill(22, 98, 71);
    ellipse(0, 0, circleRad, circleRad);
    fill(random(0, 360), 94, 25);
    ellipse(0, 0, circleRad*0.8, circleRad*0.8);
    stroke(0);
    noFill();
    for(var i = 0; i <= 8; i ++){
        arc(0, 0, circleRad*0.8, circleRad*0.8, i*(PI/8), -i*(PI/8), CHORD);
    }
    fill(50, 80, 90);
    ellipse(0, 0, max(10, circleRad*0.1), max(10, circleRad*0.1));
}

function setup() {
    createCanvas(600, 400);
    colorMode(HSB);
    frameRate(30);
    noStroke();
    strokeWeight(2);
    stepMountain(noiseParam, noiseStep, hillHeights);
}

function draw() {
    xInc = width/numpoints;
    background(183, 33, 95);
    //draws background/dark green mountain
    fill(120, 100, 20);
    stepMountain(noiseParam2, 0.4, mountainHeights, 320)
    drawMountain(mountainHeights, 320);
    //draws foreground scenery
    fill(110, 64, 52);
    stepMountain(noiseParam, noiseStep, hillHeights, numpoints);
    drawMountain(hillHeights, numpoints);
    push();
    translate(0, 20);
    fill(42, 30, 90);
    drawMountain(hillHeights, numpoints);
    //at peaks of hill, add a hobbit hole
    for(let i = -breadth; i <= numpoints+breadth; i++){
            if(i != -breadth & i !=numpoints+breadth){
                if (hillHeights[i] < hillHeights[i-1] &&
                hillHeights[i] < hillHeights[i+1]){
                    push();
                    fill(0);
                    translate(i * xInc, (height + hillHeights[i])/2);
                    drawHole((height-hillHeights[i])/1.5);
                    pop();              
                }

            }
        }
    pop();

}

My idea was to generate a rolling hill and place hobbit holes at random locations or peaks under the hill, with their basic shape looking something like this:

Unfortunately, I realized too late that the program I wrote didn’t utilize objects and made changing variables about the holes (ex. colors and varying designs) very difficult without restructuring the program significantly.

Project_11_landscape

Y-sketch-landscapeDownload
//Huijun Shen
//huijuns@andrew.cmu.edu 
//section D

// the general idea of this project is presenting an array of buildings 
//which are on the hill and are coverd by trees.

var buildings = [];
var trees = [];
var noiseParam = 0;
var noiseStep = 0.02;
var hillHeight = [];
// var clouds = [];   
// var land = [];
// var cX = random(100,200);
// var cY = random(100,200);


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

    //hill
    for (var i = 0; i <= width/3; i+=1){
       
        var n = noise(noiseParam);

        var value = map(n,0,1,0,width);    

        //hillHeight.shift();

        hillHeight.push(value);

        noiseParam += noiseStep;

        
    }

    //buildings
    for(var i = 0; i < 10; i ++){
        var rx = random(width);
        buildings[i]=makeBuilding(rx);
    }

    frameRate(10);
    
}

function draw(){
    background(144,232,232);

    //sun
    fill(223,242,136);
    circle(400,50,50);

    //hill
    noStroke();

    var n = noise(noiseParam);

    var value = map(n,0,1,0,width);    

    hillHeight.shift(); //update value in array

    hillHeight.push(value);

    noiseParam += noiseStep;
    
    for (var i = 0; i < width/5 ; i += 1){

        fill(50,120,20); //square shape
        beginShape();
        vertex(5*i,hillHeight[i]);
        vertex(5*i+5, hillHeight[i+1]);
        vertex(5*i+5,height);
        vertex(5*i,height);   
        endShape(); 
    }



    //displayHorizon();
    
    //buildings
    updateBuildings();
    removeBuilding();
    addNewBuilding();

    //tree
    
    updateTrees();
    removeTrees();
    addNewTrees();
    
    fill(181,170,156);
    rect(0,460,480,30);
  

}

//horizon

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



//buildings

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

function removeBuilding(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i ++){
        if (buildings[i].x + buildings[i].breadth > 0){
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep;

}

function addNewBuilding(){
    if(random(0,1)<0.03){
        buildings.push(makeBuilding(width-2));
    }

}

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

function makeBuilding(birthLocationX){
    var bldg = {
        x:birthLocationX,
        y:random(400,450),
        breadth:random(30,50),
        r:random(255),
        b:random(255),
        g:random(255),
        speed : -2.0,
        nFloors : round(random(2,6)),
        move:buildingMove,
        display:buildingDisplay
    }
    return bldg;
}



function buildingDisplay(){
    var floorHeight = 25;
    var bHeight = this.nFloors*floorHeight;
    fill(this.r,this.g,this.b);
    stroke(0);
    push();
    translate(this.x,this.y);
    rect (0,-bHeight-10,this.breadth,bHeight);
    stroke(200);
    for(var i = 0; i < this.nFloors; i ++){
        fill(this.r+10,this.g-20,this.b+50);
        //rect(5,-15-(i*floorHeight),this.breadth-10, 10);
        rect(5,-20-(i*floorHeight),this.breadth-10, 10);
    }
    pop();
}

//tree

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

function removeTrees(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i ++){
        if (trees[i].x + trees[i].breadth > 0){
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;

}

function addNewTrees(){
    if(random(0,1)<0.1){
        trees.push(makeTrees(width+30));
    }

}

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

function makeTrees(birthLocationX){
    var tree = {
        x:birthLocationX,
        y:random(400,450),
        treeHeight:random(30,150),
        breadth:random(10,20),
        width:random(50,80),
        r:random(100,120),
        b:random(120,130),
        g:random(150,255),
        speed : -5.0,
        move:treeMove,
        display:treeDraw,
    }
    return tree;
}



function treeDraw(){
    var treeHeight;
    
    push();
    translate(this.x,this.y);
    fill(128,101,64);
    rect(0,0,10,50);
    fill(this.r,this.g,this.b);
    ellipse (0,0,this.width,treeHeight);

    pop();
}


I would like to present building on hills which are cover by trees.

LO_11_Women Practitioners

In this week’s topic, I found a very interesting project called “ Clothing for Moderns” created by artist Lea Albaugh.

The link is here : http://www.instamatique.com/clothing-for-moderns.html
And here : https://www.hcii.cmu.edu/people/lea-albaugh

Lea Albaugh is a PhD student in HCI institute of CMU. This is not too much description on the web but I guess her major working field is Human Computer interaction. She is also an augmented fashion designer and game developer.
Her major studying field makes her project very interesting.
In this project, she mainly talked about women’s expression in public space, especially spaces prevailed by male leaders/supervisors. She uses cloth and actuators to build wearables that can potentially “speak”.
I think the general idea of this project is very crucial. As a woman, I frequently found myself judging my personal expression. Sometimes, I felt I speak too much in public and in a team work environment and sometimes I doubt myself speak too little in a conflict situation.
By writing this LO, I doubt males also do the same thing frequently. This is the reason I want to talk about this project. It reminds me, as a female, sometimes, expression itself is not only related to words, facial expressions and actions.
This project offers me a new look for my own situations.

Project-11-Landscape

I choose to do a picture I took in Pakistan so I created the images in Illustrator and then created variation in the landscape. and ultimately wanted variation of falling bananas and cows in the distance.

Picture I took in Pakistan.
graanak-11
//Graana Khan 
//Section B

var noiseParam = 0;
var noiseStep = 0.05;
var weeds = []; 
var bananaGuy;
var bananas = [];
var cows = [];

function preload(){
	bananaGuy = loadImage("https://i.imgur.com/QlEAbwn.png");
	bananas[0] = "https://i.imgur.com/DGbCivK.png";
	bananas[1] = "https://i.imgur.com/kYS7JBv.png";
	bananas[2] = "https://i.imgur.com/oLWOnSw.png";
	cows[0] = "https://i.imgur.com/DbRWV09.png";
	cows[1] = "https://i.imgur.com/IDXjr5m.png";
	cows[2] = "https://i.imgur.com/rHLRVkb.png";

	for(var i=0; i < bananas.length; i++){
		bananas[i] = loadImage(bananas[i]);
	}

	for(var i=0; i < cows.length; i++){
		cows[i] = loadImage(cows[i]);
	}
}

function setup() {
    createCanvas(480, 300);
    background(220);
    frameRate(10);

    strokeWeight(5);

    //initializing the noise and array
    for(var i=0; i <= 100; i++){
    	var n = noise(noiseParam);
    	var value = map(n, 0, 1, 100, height);
    	weeds.push(value);
    	noiseParam += noiseStep; 
    }

}

function draw() {
	background(232, 208, 156);

//terrain moving in the background
	weeds.shift();
	var n = noise(noiseParam);
	var value = map(n, 0, 1, 100, height);
	weeds.push(value);
	noiseParam += noiseStep; 

	stroke(135, 119, 76);
	fill(135, 119, 76);
	beginShape();
	curveVertex(0, height);
	curveVertex(0, height);
	for(var i=0; i < 100; i++){
		vertex(i*30, weeds[i]);
	}
	vertex(width, height);
	vertex(width, height);
	endShape();
//dirt road
	noStroke();
	fill(96, 78, 41);
	rect(0, 229, 480, 71);

//banana truck 
	image(bananaGuy, 0, 0, 480, 300);

	image(bananas[2], 260, 260);
	scale(0.5);
	image(cows[0], 120, 370);

}

LO – 11

I’m choosing to focus on FIELD’s “10,000 Digital Paintings,” which is a brochure design for GF Smith (fine quality paper company.) What caught my attention about this project is its beautiful colors and aesthetics and its slight resemblance of paint in water. Looking into it more, I was able to appreciate the practical quality of generative design. FIELD used custom software to generate 10,000 iterations (different views) of a hypercomplex structure. The results are thousands of brochures that are unique yet fit into a cohesive design theme. I find the intersection between modern generative design and the more traditional print medium interesting and relevant to what I want to study. 

The female artist behind FIELD is Vera-Maria Glahn. She started out as a producer and curator of media arts, performance and film for European film and media festivals in 2003. She later studied Visual Communication several years after and co-founded FIELD. FIELD is a creative studio based in London, U.K. specializing in art and technology; they make both independent and commissioned works for brands and cultural institutions.

Generative art in print!

Project 11 – Landscape

I wanted to create a landscape from the perspective of a car driving. You can see the cars on the other side of the road travelling in the opposite direction and the scrolling background. I wanted to have cars pass each other so they have random speeds.

sketchDownload
var trees = [];
var cars = [];
var hillHeight = []; //Stores the y values of the hills
var noiseParam = 5;
var noiseStep = 0.02; //Varies the smoothness of the hills
var x = [];

function setup() {
    createCanvas(480, 480);
    background(220);
    //creates a canvas that starts with trees
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trees[i] = makeTree(rx);
    }

    //for loop creates the values for the mountains in the background
    for(var i = 0; i<=width/5; i++){
        var n = noise(noiseParam);
        //Adjust size to fit the canvas
        var value = map(n, 0, 1, 0, .5*height);
        hillHeight.push(value);
        noiseParam += noiseStep;
    }

    frameRate(10);
}

function draw() {
    //sky
    background(0, 230, 255);
    //continually makes the mountains in the background scroll
    if(hillHeight.length>width/5){
        hillHeight.shift();
        for(var i = 0; i <= width / 5; i++){
            var n = noise(noiseParam);
            var value = map(n, 0, 1, 0, .5*height);
            hillHeight.push(value);
            noiseParam += noiseStep;
        }
    }
    //color of the hills
    fill(130, 130, 130);
    //creates the shape of hills to be able to fill under the line
    beginShape();
    vertex(0, height);
    for(var i = 0; i <= width/5; i++){
        vertex(i*5, hillHeight[i])
    }
    vertex(width, height);
    endShape();
    //foreground grass
    fill(0, 255, 0);
    noStroke();
    rect(0, 360, width, 120);
    //road
    fill(35);
    stroke(0);
    rect(0, 260, width, 100);
    //background grass
    fill(0, 225, 0);
    noStroke();
    rect(0, 200, width, 60);

    //creates the trees on the canvas and conditions for new/old
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability();
    //creates the cars on the canvas and conditions for new/old
    updateAndDisplayCars();
    removeCarsThatHaveSlippedOutOfView();
    addNewCarsWithSomeRandomProbability();
}


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


function removeTreesThatHaveSlippedOutOfView(){
    //defines trees that have gone off canvas and recreates the array
    //without those trees
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}


function addNewTreesWithSomeRandomProbability() {
    //add a tree at the end based upon a probability
    var newTreeLikelihood = 0.02;
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}


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


function treeDisplay() {
    fill(255);
    stroke(0);
    push();
    translate(this.x, 240);
    fill(133, 87, 35);
    //tree trunk
    rect(0, -this.tHeight, this.breadth, this.tHeight);
    noStroke();
    //tree branches
    fill(78, 105, 26);
    circle(this.breadth/6, -this.tHeight, this.breadth*2);
    circle(this.breadth*(5/6), -this.tHeight, this.breadth*2);
    circle(this.breadth/2, -this.tHeight-this.breadth/2, this.breadth*2);
    pop();
}


function makeTree(birthLocationX) {
    var tr = {x: birthLocationX,
                //width of the trees
                breadth: random(10, 40),
                speed: -3.0,
                //tree height
                tHeight: random(50, 130),
                move: treeMove,
                display: treeDisplay}
    return tr;
}

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


function removeCarsThatHaveSlippedOutOfView(){
    //defines if a car is off the canvas, recreates the array to keep
    //cars still on canvas and remove ones that have moved off
    var carsToKeep = [];
    for (var i = 0; i < cars.length; i++){
        if (cars[i].x + cars[i].breadth > 0) {
            carsToKeep.push(cars[i]);
        }
    }
    cars = carsToKeep;
}


function addNewCarsWithSomeRandomProbability() {
    // Adds a car based upon a probability
    var newCarLikelihood = 0.02;
    if (random(0,1) < newCarLikelihood) {
        cars.push(makeCar(width));
    }
}


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

function carDisplay() {
    //colors the car randomly
    fill(this.clr);
    push();
    translate(this.x, 290);
    //body of the car
    rect(0, 0, this.breadth, 30);
    //windows as roof of the car
    fill(255, 255, 255, 50);
    quad(15, 0, this.breadth*.25, -20, this.breadth*.75,
         -20, this.breadth-5, 0);
    //wheels
    fill(0);
    circle(20, 25, 25);
    circle(80, 25, 25);
    pop();
}

function makeCar(startLocationX){
    var car = {x: startLocationX,
               breadth: 100, // length of car
               //random color of each car
               clr: color(random(255), random(255), random(255)),
               //random speeds of cars
               speed: random(-5, -10),
               move: carMove,
               display: carDisplay}
    return car;
}