Uncategorized – Page 2 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 11: Space Rocket

I had a rough week and was unable to complete this code 🙁 It was supposed to be a rocket traveling through space with stars generating in the background and asteroids randomly generating to travel parallel to the ship to give the impression of speed. The two static objects were the rocket and the earth. I drew them myself, trying to get a laugh. But since the code doesn’t work, it just seems overwhelmingly pathetic.

sketch Download

//jubbies

var stars = [];
var asteroids = [];

var rocket;

var counter = 0;


function preload() { 
    rocket = loadImage("https://i.imgur.com/YMS5MRv.png");
    earth = loadImage("https://i.imgur.com/7N4avKI.png");
} 

function setup() {
    createCanvas(400, 250);
    frameRate(12);

    //setting up the stars - priming the array
    for (var i = 0; i < 140; i++) {
        var sx = random(width);
        var sy = random(height);
        var sWidth = random(20);
        stars[i] = makeStars(rx, ry, 2, sWidth);
    }
    //setting up the asteroids - priming the array
    for (var i = 0; i < 4; i++) {
        var rx = random(width);
        var ry = random(150);
        asteroids[i] = makeAsteroids(rx, ry);
    }
    
}

function draw() {
    background('black');

    //EARTH (BEHIND ALL)
    image(earth, 270, 40, 50, 50);
  
    //STARS
    updateAndDisplayStars();
    removeStarsOutOfView();
    addNewStars();

    //ASTEROIDS
    updateAndDisplayAsteroid();
    removeAsteroidsOutOfView();
    addNewAsteroids();
    
    //ROCKET
    image(rocket, 30, 140, 150, 80);
    
    counter++;
}

//STARS- ALL FUNCTIONS
function updateAndDisplayStars(){
    for (var i = 0; i < stars.length; i++){
        stars[i].stepFunction();
        stars[i].drawFunction();
    }
}

function removeStarsOutOfView(){
    //dropping off old stars
    var starsToKeep = [];
    for (var i = 0; i < stars.length; i++){
        if (stars[i].x + stars[i].width > 0) {
            starsToKeep.push(stars[i]);
        }
    }
    stars = starsToKeep;
}

function addNewStars(){
    var newstars = 0.455
    if (random(0, 1) < newstars) {
        stars.push(makeStars(255, 255, 3, random(1, 10));
    }
}

function starsStep() {
    this.x -= this.dx;
}

function starsDraw() {
    stroke(this.c);
    strokeWeight(this.size);
    point(this.x, this.y);
}

function makeStars(sx, sy, sdx, sWidth) {
    var s = {x: sx, y: sy, dx: sdx, 
        width: sWidth,
        c: fill(255),
        drawFunction: starsDraw, stepFunction: starsStep
    }
    return s
}

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;
}

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.

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.

sketch Download

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;
}

Project-11

sketch

var buildings = [];
var people = [];
var hillVar= 0.009

function setup() {
    createCanvas(480, 480); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        var ry = random(10, 50);
        buildings[i] = makeBuilding(rx);
        people[i] = makePeople(rx);
    }
    frameRate(10);
}


function draw() {
    background(33, 28, 77);
    drawHill() 


    
    displayStatusString();
    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 

    updateAndDisplayPeople();
    removePeople();
    addNewPeople()

    drawTrainCart()
}

function makePeople(birthLocationX) {
  var k ={x: birthLocationX,
    breadth:round(random(9,15)),
    speed:-4,
    peopleHeight:round(random(24,30)),
    move:peopleMove,
    display:peopleDisplay,
    color:color(random(50,240),random(50,240),random(50,240))}
    return k 
}

function peopleMove() {
  this.x += this.speed
}

function peopleDisplay() {
  push();
  fill(this.color)
  translate(this.x, height-190);
  strokeWeight(1);
  stroke(0);
  ellipse(-0,this.peopleHeight/2,this.breadth,this.peopleHeight) //body
  fill(160)
  ellipse(0,-this.peopleHeight/2+13,8,8) //head
  pop()
}

function updateAndDisplayPeople(){
  for (var i = 0; i <people.length; i++){
    people[i].move();
    people[i].display()
  }
}
function removePeople(){
  var peopleToKeep = [];
  for (var i = 0; i <people.length; i++){
    if (people[i].x+people[i].breadth>0){
      peopleToKeep.push(people[i])
    }
  }
  people = peopleToKeep
}

function addNewPeople(){
  var newPeopleLikelihood=0.1;
  if(random(0,1)<newPeopleLikelihood){
    people.push(makePeople(width));
  }
}

function drawTrainCart(){
  noStroke()
  var cartwidth = 70
  fill(66, 85, 102)
  rect(0,0,cartwidth,height)
  rect(480-cartwidth,0,cartwidth,height)
  rect(cartwidth,0,width-(cartwidth*2),50)
  fill(161, 104, 80)
  quad(cartwidth,height-120,width-cartwidth,height-120,480,480,0,480)
  

  push()
  //drink
  fill(232, 184, 100)
  quad(320,460-10,315,430-10,365,430-10,360,460-10)
  arc(340,460-10,40,13,0,PI,OPEN)
  fill(210, 184, 100)
  ellipse(340,430-10,50,15)

  //cup
  fill(255,255,255,80);
  quad(320,460-10,310,400-10,370,400-10,360,460-10)
  stroke(174, 203, 230)
  strokeWeight(4)
  line(320,460-10,310,400-10)
  line(370,400-10,360,460-10)
  arc(340,460-10,40,13,0,PI,OPEN)
  fill(191,151,135)
  ellipse(340,400-10,60,17)

  noStroke()
  fill(255, 246, 199,32)
  quad(140,0,340,0,500,480,-20,480)

  pop()


 }

function drawHill() {
  push()
  noStroke()
  fill(6, 31, 12)
  beginShape()
  for (var h = 0; h<width; h++){
    var a = (h*hillVar)+(millis()*0.0002)
    var y = map(noise(a),0,1,height/8,height/9*5);
    vertex(h,y)
  }
  vertex(480,480);
  vertex(0,480)
  endShape()
  pop()
}

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


function removeBuildingsThatHaveSlippedOutOfView(){
    // 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 buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}


function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.008; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
  push()
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(12, 12, 51); 
    stroke(185); 
    push();
    translate(this.x, height - 170);
    rect(0, -bHeight, this.breadth, bHeight);
    noStroke()
    triangle(0,-bHeight+1,0+(this.breadth/2),-bHeight-10,this.breadth,-bHeight+1)
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
      fill(247, 235, 111)
      strokeWeight(random(0.1,2))
      rect(5, -15 - (i * floorHeight), this.breadth - 10,5);
    }
    strokeWeight(3)
    line(0+(this.breadth/2),-bHeight-10,this.breadth+5,-bHeight+1)
    line(0+(this.breadth/2),-bHeight-10,-5,-bHeight+1)
    pop();
}



function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -3.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    line (0,height-170, width, height-170); 
    fill(40, 40, 41)
    rect(0,height-170,width,170)
}


function displayStatusString(){
    noStroke(); 
    fill(0); 
    var statusString = "# Buildings = " + buildings.length;
    text(statusString, 5,20); 
}

I was inspired by the view of Hong Kong where there are many skyscrapers but they are always accompanied by a mountain in the backdrop. All of Hong Kong’s major financial districts are close to tall mountain ranges. This creates a very interesting composition in my opinion. I included the people of varying height and color to suggest how crowded it is in Hong Kong. The image shows a person viewing out of a train that has a table attached to the window drinking a glass of apple juice. The surrounding is dark and I think that helps the image tells a more interesting story.

Project 11 – Generative Landscape

One of my hobbies is collecting adorable dolls, especially teddy bears. I like to decorate my boring room with dolls like teddy bears to lighten up the mood. I have always imagined a shop specifically for teddy bears, so I decided to create a visual of my dream shop in this project. The unique part of this shop is that it has a teddy bear conveyor belt. This conveyor belt has different types of teddy bears with different colors and characteristics. I have made the shop colored in shades of beige to really focus on the bright colors of the teddy bears.

sketch

//Stefanie Suk
//15104 Section D

var brownTeddy;
var blueTeddy;
var pinkTeddy;
var purpleTeddy;
var redTeddy;

var base = []; //array for base under teddy bears
var x; //position of base
var speed;

var cloudX = 60;
var cloudY = 100;

var teddyBears = 
["https://i.imgur.com/VdXQHac.png",
"https://i.imgur.com/l87wQNo.png",
 "https://i.imgur.com/1xcChWa.png",
 "https://i.imgur.com/olZHcs2.png",
 "https://i.imgur.com/pW0wt4W.png"]

function preload(){ //preloading teddy bear images 
    brownTeddy = loadImage(teddyBears[0]);
    blueTeddy = loadImage(teddyBears[1]);
    pinkTeddy = loadImage(teddyBears[2]);
    purpleTeddy = loadImage(teddyBears[3]);
    redTeddy = loadImage(teddyBears[4]);

    clock = loadImage('https://i.imgur.com/QBWxgao.png');
    tablePattern = loadImage('https://i.imgur.com/jZoPb4m.png');
}

function setup() {
    createCanvas(450, 450);
    frameRate(17);

    var dist = 0;
    for (var i = 0; i < 500; i++){ //creating 500 variations of teddy bears
        base[i] = varBase(dist);
        dist += 200; //dist of base and teddy bears
    }
}

function draw(){
    //drawing shop
    drawShop(); 
    //drawing clock
    image(clock, 355, 50);
    //drawing pattern on conveyor table
    image(tablePattern, -150, 325, 310, 13);
    image(tablePattern, 157, 325, 310, 13);
    //drawing cloud
    drawCloud();
    translate(200, -20);
    drawCloud();
    translate(-100, 30);
    drawCloud();
    //drawing base and belt
    showBase();
    conveyorBelt(); 
}

//drawing teddy bear shop
function drawShop(){
    noStroke();

    //back wall
    fill(234, 224, 212);
    rect(0, 0, width, 235)

    //window
    fill(113, 207, 230);
    rect(20, 20, 300, 250);

    //four borders of window
    fill(80, 46, 46);
    rect(20, 20, 300, 10);
    rect(20, 260, 300, 10);
    rect(20, 20, 10, 250);
    rect(320, 20, 10, 250);
    //division of window
    rect(220, 20, 5, 250);
    rect(20, 140, 300, 5);

    //conveyer belt
    fill(88, 87, 86);
    rect(0, 235, width, 90);

    //bottom conveyor belt table
    fill(214, 196, 173);
    rect(0, 325, width, 180);

    //text on conveyor belt table
    textSize(25);
    textStyle(ITALIC);
    fill(89, 80, 68);
    text('S.S Teddy Bear Shop', 110, 395)
  
}

//drawing cloud in window
function drawCloud(cloudx, cloudy) {
    noStroke();
    fill(255);
    ellipse(cloudX,cloudY,30);
    ellipse(cloudX+10,cloudY+10,30);
    ellipse(cloudX+20,cloudY-10,50,40);
    ellipse(cloudX+30,cloudY+5,30);
}

//variables for base
function varBase(basex){
    var base = {x: basex,
                basey: 275,
                basew: 120,
                baseh: 70,
                display: createBase,
                move: moveBase,
                speed: -8.0,
                teddyBears: random([brownTeddy, blueTeddy, pinkTeddy, purpleTeddy, redTeddy]) //random teddy bears appear on conveyor belt
    }
    return base; 
}

function createBase(){

    fill(209, 165, 109);
    ellipse(this.x, this.basey, this.basew, this.baseh); //drawing circular base under teddy bears


    //creating different varieties of teddy bears
    if(this.teddyBears == brownTeddy){
        image(brownTeddy,this.x-42, 180, brownTeddy.width*1.5, brownTeddy.height*1.5);  
    }
    if(this.teddyBears == blueTeddy){
        image(blueTeddy,this.x-42, 170, blueTeddy.width*1.5, blueTeddy.height*1.5);  
    }
    if(this.teddyBears == pinkTeddy){
        image(pinkTeddy,this.x-42, 175, pinkTeddy.width*1.5, pinkTeddy.height*1.5);  
    }
    if(this.teddyBears == purpleTeddy){
        image(purpleTeddy,this.x-42, 165, purpleTeddy.width*1.5, purpleTeddy.height*1.5);  
    }
    if(this.teddyBears == redTeddy){
        image(redTeddy,this.x-42, 180, redTeddy.width*1.5, redTeddy.height*1.5);  
    }

}

//calling move and show function of base
function showBase(){
    for(var i = 0; i < base.length; i++){
        base[i].display();
        base[i].move();
    }
}

//speed of base on conveyor best
function moveBase(){
    this.x += this.speed; 
}

function conveyorBelt(){
    for(var i = 0; i < 400; i++) { 
        var moveBelt = i * 25;
        line(x + moveBelt, height, x * moveBelt, height);
    }
    x += speed;
}

Project 11: Generative Landscape

For this project, I went with a simple scrolling sunset city & mountain view. The sun has a second ring around it just because I felt that it gave it more of a setting sun feeling. Then the buildings have flashing lights because I thought about how dorm/student living buildings when you look at them from the outside. Everyone seems to have different color LED lights lighting up their rooms in all different colors.

//Helen Cheng
//helenc1@andrew.cmu.edu
//Project 11
//Section C

var buildings = [];
var hill = [];
var noiseParam = 0;
var noiseStep = 0.01;
var n;
var hillPoint;


function setup() {
    createCanvas(640, 240); 
    
    // create an initial collection of buildings
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    //creates initial set of mountains
    for (i=0; i<=width/5; i++) {
        n = noise(noiseParam);
        hillPoint = map(n, 0, 1, 0, height);
        hill.push(hillPoint);
        noiseParam += noiseStep;
    }

    frameRate(10);
}


function draw() {
    background(93, 150, 168); 

    //setting sun
    fill(245, 188, 159);
    circle(width/2, height/2, 100);
    fill(250, 211, 125);
    circle(width/2, height/2, 50);

    drawHills();

    displayHorizon();

    updateAndDisplayBuildings();
    removeBuildings();
    addNewBuildings(); 
}

function drawHills() {
    var x = 0;
    beginShape();
    vertex(0, height);
    stroke(0);
    fill(126, 168, 151);


    //draws hill shape
    for (i=0; i<width/5; i++) {
        vertex(5*i, hill[i]);
    }

    //appends new hill point and removes first
    hill.shift();
    vertex(width, height);
    n = noise(noiseParam);
    hillPoint = map(n, 0, 1, 0, height);
    hill.push(hillPoint);
    noiseParam += noiseStep;
    
    endShape(CLOSE);
}

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


function removeBuildings(){
    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 addNewBuildings() {
    var newBuildingLikelihood = 0.005; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}


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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    stroke(0);
    fill(245, 229, 201);
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(color(random(255), random(255), random(255))); 
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}


function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -2.0,
                nFloors: round(random(2,9)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function displayHorizon(){
    stroke(0);
    fill(202, 245, 201);
    rect(0,height-50, width, height);
}

Project 11

Continuing my inspiration from the artwork associated with Vaporwave, I decided to pursue my generative landscape project using the aesthetics, color palette, and symbols associated with the genre. Furthermore, to add to the surrealist atmosphere of the piece, I stylistically juxtaposed the Vaporwave landscape with a minimalist depiction of a train and dog. The interior of the train serves as the non-moving element of the drawing and has a window by which the Vaporwave setting can be seen. The two javascript objects that I used were telephone poles, a common symbol in Vaporwave art, that vary in thickness, height, and number of cross beams, and imported images of a marble bust, the Windows 95 logo, and an error message that vary in position and speed. Additionally, I used a noise function to generate a mountain in the background to complete the scene.

sketch – Copy Download


var telephonePoles = [];
var images = [];
var showImage = [];
var mountainValue = [];
var noiseParam = 0;
var noiseStep = .1;

function preload() {
    // call loadImage() and loadSound() for all media files here
    images[0] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.png");
    images[1] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe-1.png");
    images[2] = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows-1.png")
}


function setup() {
	frameRate(100);
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //frameRate(20);
    //create telephonePoles
    for (var i = 0; i < 5; i++){
    	var tx = random(width);
    	var tt = random(1,5);
    	var th = random(50, height/2 - 70);
    	var tb = floor(random(1,4));
    	var pole = makePoles(tx,tt,th,tb);
    	telephonePoles.push(pole);
    	var image = makeImages(random(width/2,width),random(130,310));
    	showImage.push(image);
    }
    for(var i = 0; i <= width/5; i++){
    	var n = noise(noiseParam);
    	var value = map(n,0,1,0,height/2);
    	mountainValue.push(value);
    	noiseParam += noiseStep;
    }
}

var chooseColor;
function draw() {
    // you can replace any of this with your own code:
    //var chooseColor = random(floor(0,5));
    if (chooseColor == 0){
    	background(255,113,206);
    } else if (chooseColor == 1){
    	background(1,205,254);
    } else if (chooseColor == 2){
    	background(5,255,161);
    } else if (chooseColor == 3){
    	background(185,103,255);
    } else {
    	background(255,251,150)
    }
    drawGrid();
    drawMountain();
    for (var i = 0; i < 5; i++){
    	var t = telephonePoles[i];
    	t.move();
 		t.drawPole();
    }
    for (var i = 0; i < showImage.length; i++){
    	var m = showImage[i];
    	m.moveImg();
    	m.drawImage();
    }
    //image(images[0],random(0,width),height/2);
    drawTrain();
    drawChair();
    drawLegs();
    push();
    translate(width,0);
    scale(-1,1);
    drawChair();
    pop();
    drawDog();
    newPole();
    newImage();
    removeImage();
    removePole();
    moveMountain();
    if (frameCount % 100 == 0){
		chooseColor = floor(random(0,5));
    }
}

function drawTrain() {
	noStroke();
	fill(193,143,171);
	rect(0,0,width,120);
	rect(0,320,width,height);
	fill(221,194,59);
	//window
	beginShape();
		vertex(0,110);
		vertex(width,110);
		vertex(width,330);
		vertex(0,330);
	beginContour();
		vertex(10,320);
		vertex(width-10,320);
		vertex(width-10,120);
		vertex(10,120);
	endContour();
	endShape(CLOSE);
}

function drawChair() {
	noStroke();
	fill(84,68,70);
	beginShape();
		vertex(20,height);
		vertex(20,280);
		curveVertex(40,300);
		curveVertex(50,height);
	endShape(CLOSE);
	rect(30,height - 50, 100, height, 5);
}

function drawDog() {
	fill("white");
	noStroke();
	//head
	circle(400,340,50);
	//body
	fill("white")
	ellipse(400,400,60,100);
	//tail
	fill("black");
	beginShape();
		vertex(395,445);
		curveVertex(405,460);
		vertex(375,470);
		curveVertex(415,460);
		vertex(405,450);
	endShape(CLOSE);
	//ears
	push();
	translate(32,-20);
	quad(350,340,355,370,335,350,347,345);
	pop();
	push();
	translate(287,-20);
	translate(width,0);
	scale(-1,1);
	quad(350,340,355,370,335,350,347,345);
	pop();
}

function drawLegs() {
	//legs
	fill("black");
	rect(370,400,20,50,40);
	push();
	translate(40,0);
	rect(370,400,20,50,40);
	pop();
}

function drawGrid() {
	stroke("white");
	strokeWeight(.5);
	for (var yShift = 0; yShift < height/2; yShift += 10){
		line(0,height/2 + yShift,width,height/2 + yShift);
	}
	for (var xShift = -width*40; xShift < width*40; xShift += 60){
		line(width/2,height/2,xShift,height);
	}
}

function poleDraw() {
	noStroke();
	fill("black");
	//trunk
	push();
	translate(0,-this.tall);
	rect(this.x,height/2,this.thickness, this.tall);
	//beams
	for (var i = 0;i < this.beamNumber; i++){
		rect(this.x - 20,height/2, 40, this.thickness/2);
		translate(0, this.thickness);
	}
	pop();
}

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

function newPole() {
	var newPoleProb = .7;
	if (random(0,1) < newPoleProb){
		telephonePoles.push(makePoles(width,random(1,5),random(50, height/2 - 70),
			floor(random(1,4))));
	}
}

function removePole() {
	var polesToKeep = [];
	for (var i = 0; i < telephonePoles.length; i++){
		if(telephonePoles[i].x > 0){
			polesToKeep.push((telephonePoles[i]));
		}
	}
	telephonePoles = polesToKeep;
}

function removeImage() {
	var imageKeep = [];
	for (var i = 0; i < showImage.length; i++){
		if(showImage[i].x > 0) {
			imageKeep.push(showImage[i]);
		}
	}
	showImage = imageKeep;
}

function newImage() {
	var newImageProb = .009;
	if (random(0,1) < newImageProb){
		showImage.push(makeImages(width,random(130,310)));
	}
}
function makePoles(poleX, poleThick, poleHeight,poleBeam) {
	var telephonePole = {x: poleX, thickness: poleThick,
				speed: -1.0, drawPole: poleDraw,
				tall: poleHeight, beamNumber: poleBeam,
				move: poleMove}
	return telephonePole;
}

function imageDisplay(){
	image(images[this.chooseImage],this.x,this.y);
}

function imageMove(){
	this.x += this.speed;
}
function makeImages(imageX,imageY) {
	var m = {x: imageX, y: imageY,
			speed: random(-6.0,-1.0),
			chooseImage: floor(random(0,images.length)),
			drawImage: imageDisplay, moveImg: imageMove};
	return m;
}

function drawMountain() {
	noStroke();
	fill(0,100);
	for( var i = 0; i < width/5; i++){
	beginShape();
		vertex(0,height/2);
		for( var i = 0; i <= width/5; i++){
			vertex(5*i,mountainValue[i]);
			vertex(5*(i+1),mountainValue[i+1]);
		}
		vertex(width,height/2);
	endShape(CLOSE);
	}
}

function moveMountain() {
	mountainValue.shift();
	var n = noise(noiseParam);
	var value = map(n,0,1,0,height/2);
	mountainValue.push(value);
	noiseParam += noiseStep;
}

Looking Outwards 11

A project that I find inspiring is the Ideogenetic Machine (2011) by Nova Jiang. The project is an installation that uses a custom software to combine the artist’s drawings with portraits of people interacting with the installation. The installation features a camera that captures images of the people and draws them into panels of the comic. I admire this installation because it elevates any person into the hero of a unique story. With this installation, anybody can be the protagonist of an epic tale.

Nova Jiang is an artist that creates sculptures and installations, many of which are interactive. She studied at UCLA to get her Master of Fine Arts in Media Art. She currently works in Los Angeles, but has exhibited her work throughout the world.

Image created by Nova Jiang’s Ideogenetic Machine

Project 11: Landscape

This landscape wasn’t the most challenging but the UFO really wasn’t the easiest to get working. I had to experiment a lot with the order of my elements in the draw function to get it looking like it should and it took some testing to get it to move around on the campus and get back on when it flew away.

sketch

var chasm = []
var alien = []
var roadLines = []



function makeLines(lineY, lineLength){  ///creates the yellow lines on the road
  l = {y: lineY, length: lineLength, drawFunction: drawLines, stepFunction: moveLines}
  return l
}

function drawLines(){
  push()
  translate(190, this.y)
  stroke(255, 255, 0)
  line(0, 0, 0, this.length)
  pop()
  push()
  translate(210, this.y)
  stroke(255, 255, 0)
  line(0, 0, 0, this.length)
  pop()
}

function moveLines(){ ////advances the lines so it appears the viewer is moving over the road
  this.y += 10
  if (this.y >= 420){
    roadLines.shift()
    roadLines.push(makeLines(-100, random(0, 200)))
  }

}

function makeUFO(ufoX, ufoY, ufoDX, ufoDY){ ////draws the hovering ufo
  ufo = {x: ufoX, y: ufoY, dx: ufoDX, dy: ufoDY, drawFunction: drawUFO, stepFunction: ufoFly}
  return ufo
}

function drawUFO(){ 
  push()
  translate(this.x, this.y)
  fill(100)
  ellipse(0, 0, 125, 125)
  fill(227, 252, 252)
  ellipse(0, 0, 70, 70)

  for (var t = 0; t <= 10; t++){
    fill(random(0, 255), random(0, 255), random(0, 255))
    ellipse(0, -48, 10, 20)
    rotate(12)
}
pop()
}

function ufoFly(){ ////keeps the ufo flying around the scene if it hits an edge
  this.x += this.dx
  this.y += this.dy
if (this.x >= 400 || this.y >= 400){
  this.dx = random(-5, 5)
  this.dy = random(-5, 5)
  this.dx *= -1
  this.dy *= -1
}
if (this.x <= 0 || this.y <= 0){
  this.dx = random(-5, 5)
  this.dy = random(-5, 5)
  this.dx *= -1
  this.dy *= -1
}



}
function makeChasm(cx, cy){ ///makes the creatures and features on the road
  c = {x: cx, y: cy, type: round(random(0, 3)), drawFunction: chasmDraw, move: chasmAdvance}

return c
}

function chasmDraw(){
  stroke(255)
  translate(this.x, this.y)
  switch (this.type){
  case 0: ////spider alien
  stroke(50) 
  for (u = 0; u <= 8; u++){
  line(0, 0, random(-20, 20), random(-20, 20))
  } 
    break;
   case 1: ////lava pit
   stroke(252, 90, 3)
   line(0, 0, 20, 20)
   line(20, 20, 0, 30)
   line(0, 30, 0, 40) 
   line(0, 40, 20, 60)
   line(20, 60, 0, 80)
   break;
   case 2: ////green alien
   stroke(86, 237, 40)
   line(0, 0, 60, 60)
   line(0, 0, -60, -60)
   line(0, 0, 60, 120)
   line(0, 0, -60, 120)
   stroke(0)
   fill(86, 237, 40)
   ellipse(0, 0, 20, 80)
   break;
   case 3: ////portal thing????
    strokeWeight(3)
    stroke(189, 36, 209)
  fill(0)
   beginShape()
   vertex(0,-40)
   vertex(20, 20)
   vertex(30, 30)
  vertex(20, 40)
  vertex(10, 50)
  vertex(0, 60)
  vertex(-10, 50)
  vertex(-20, 40)
  vertex(-30, 30)
  vertex(-20, 20)
  vertex(0, -40)
   endShape()   
   break;
  }
  

}



function chasmAdvance(){ ////moves the features and makes a new one when one disappears
     translate(0, this.y += 2)
     if (this.y >= width){
      chasm.shift()
      chasm.push(makeChasm(random(0, 400), -200)) 
     }
}



function setup() { ////creates and pushes all of the parts to arrays to be drawn
    createCanvas(400, 400); 
    for (var o = 0; o <= 4; o++){
      var c = makeChasm(random(0, 400), -200)
      chasm.push(c)
    }
    var ufo = makeUFO(200, 200, random(-10, 10), random(-10, 10))
    alien.push(ufo)
    for (var k = 0; k <= 4; k++){
      var l = makeLines(0, random(0, 200))
      roadLines.push(l)
    }

}


function draw() { ////draws each feature and calls their functions
  background(168, 125, 50)
  road()
  for (var k = 0; k <= 4; k++){
    var l = roadLines[k]
    l.stepFunction()
    l.drawFunction()   
  }
  var ufo = alien[0]
  noStroke()
  ufo.stepFunction()    
  ufo.drawFunction()
    for (var o = 0; o <= 4; o++){
      var c = chasm[o]
      c.move() 
      c.drawFunction()
}  
}


function road(){ ///creates the road for the features to be built on
  fill(162, 168, 163)
  rect(100, 0, 200, 400)
  strokeWeight(6)
  stroke(255, 255, 255)
  line(100, 0, 100, 400)
  line(300, 0, 300, 400)
}