Month: November 2019

Ammar Hassonjee – Looking Outwards 11

“Moving Image” from the Transfer Gallery in LA. This is from the Augmented Wallpaper project by Claudia Hart.

For this post, I chose to focus on the work of an artist named Claudia Hart. She uses technology to make explorations with the recurring theme of “identity art”, in which her work explores body issues, perception, and the relationship between nature and technology. She studied art history at NYU and a Masters of Architecture from Columbia, and then taught 3D art exploration at the School of Art Institute in Chicago. She currently works out of New York and Chicago.

A project of hers that I chose to focus on is her exploration of a series of Augmented Reality wallpapers that display captivating images of art. Over these wallpapers, viewers can use their smartphones to overlay different images and animations over the wallpapers. The animations themselves are embedded in code in the app that activates when the camera moves over the wallpaper. A link to her project can be found here.

A video showing the how the animation layer is on top of the wallpapers.

Sammie Kim – Project 11 – Landscape

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 11

var xPos = 100;
var yPos = 50;
var size = 70;
var backgroundPic;
var clouds = [];

function preload() {
    //background gradient photo
    var backgroundURL = "https://i.imgur.com/EMQBV3U.jpg"
    backgroundPic = loadImage(backgroundURL);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    //initial clouds first appears anywhere across the canvas
    for (var i = 0; i < 1; i++) {
        var startX = random(0, width/3);
        clouds[i] = createClouds(startX);
    }
}

function draw() {
    background(0);
    image(backgroundPic, 0, 0);
    noStroke();
    //call the functions below
    sun();
    mountain();
    darkOcean();
    ocean();
    //show clouds
    addNewClouds();
    updateClouds();
    removeClouds();
}

function sun() {
    fill('#f29849');
    circle(xPos, yPos, size);
    xPos = xPos + 0.5;
    if (xPos > width + size/2){
        xPos = 0;
    }
}

function updateClouds() {
    //constantly calling the clouds
    for (var x = 0; x < clouds.length; x++){
        clouds[x].move();
        clouds[x].draw();
    }
}

function removeClouds() {
    //create an array for keeping clouds on screen
    //if x location is greater than 0, then push x values into the cloud array
    var cloudsOnScreen = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x > 0) {
            cloudsOnScreen.push(clouds[i]);
        }
    }
    clouds = cloudsOnScreen;
}

function addNewClouds() {
    var probability = 0.004;
    //a new cloud is drawn at the width when it is greater than a certain probability
    if (random(0, 1) < probability) {
        clouds.push(createClouds(width));
    }
}

function moveClouds() {
    //making clouds move to the left
    this.x -= this.speed;
}

function makeClouds() {
    //drawing the cloud with ellipses overlapping one another
    noStroke();
    fill('#7297a6');
    ellipse(this.x - 10, this.y, this.width, this.height);
    ellipse(this.x + 30, this.y, this.width, this.height);
    ellipse(this.x, this.y + 5, this.width, this.height);
    ellipse(this.x - 30, this.y + 5, this.width, this.height);
}

function createClouds(cloudX) {
    //creating object for cloud's characteristics
    var cloud = {x: cloudX,
              y: random(25, 75),
              width: 50,
              height: 50,
              speed: 0.7,
              move: moveClouds,
              draw: makeClouds}
  return cloud;
}

function ocean() {
    var oceanSpeed = 0.0003; //speed of terrain
    var oceanDetail = 0.001; //smoothness
    fill('#50abbf');
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * oceanDetail) + (millis() * oceanSpeed);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y);
  }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountain() {
    var oceanSpeed = 0.0004; //speed of terrain
    var oceanDetail = 0.007; //smoothness
    fill('#6C671F');
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * oceanDetail) + (millis() * oceanSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y);
    }
  vertex(width, height);
  vertex(0,  height);
  endShape();
}

function darkOcean() {
    var oceanSpeed = 0.0004; //speed of terrain
    var oceanDetail = 0.001; //smoothness
    fill('#254f6a');
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * oceanDetail) + (millis() * oceanSpeed);
        var y = map(noise(t), 0, 1, height/3, height);
        vertex(x, y);
      }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

This project was challenging as I had to keep in mind about the different objects that are shown on canvas and making them move. Imagining a space with ocean and mountain, I wanted to bring out a happy, peaceful mood through the overall warm colors. Overlapping the ocean terrains, I attempted to make an image of waves flowing past. The biggest challenge for me was creating the clouds to appear in the sky using objects. It was difficult having to think about multiple factors and constraints all at once, so I did it in a step by step manner—creating the cloud shape first with function, then calling it inside the object, and finally using other functions to add more properties.

Sewon Park – PO – 11

sketch

//Sewon Park
//sewonp@andrew.cmu.edu
//Section B
//Project 11

var skyspeed = 0.001;
var skyamp = 0.001; //calm fluctuations like the skyline
var grassspeed = 0.001;
var grassamp = 5; //to make fluctuations grasslike

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

function draw() {
    background(255); //white background to represent cloud filled sky
    sky(); //draws sky
    grass(); //draws grass
    totoro(); //draws totoro
    
}


function sky(){
  fill(102, 225, 225); 
  beginShape(); 
  for (var x = 0; x < width; x++) {
    var position = x*skyamp + (millis()*skyspeed);
    var y = map(noise(position), 0, 10, height/5, height);
    vertex(x, y); 
  }
  vertex(width, height);
  vertex(0, height);
  endShape();
}

function grass(){
  fill(0, 255, 0); 
    noStroke();
    beginShape(); 
      for (var x = 0; x < width; x++) {
            var position2 = x*grassamp + (millis()*grassspeed);
            var y = map(noise(position2), 0, 3, height/1.4, height); //height adjustment to make totoro 'walk' on grass
            vertex(x, y); 
      }
      vertex(width, height);
      vertex(0, height);
    endShape();
}



function totoro(){ 
  
  translate(200,300) //translate Totoro as it was made seperately in web editor

  fill(30,144,255);
  ellipse(50,50,40,50); //body
  
  fill(135,206,250);
  ellipse(50,57,15,20); //arm
  
  fill(0);
  triangle(48,67,50,69,52,67); //claw
  
  fill(135,206,250);
  triangle(60,28,55,15,50,25); //ear
  
  fill(255,203,138);
  triangle(58,28,55,21,52,25); //inner ear
  
  fill(255);
  ellipse(60,38,7,7); //eye
  
  fill(0);
  ellipse(60,38,3,3); //pupil
  ellipse(69,42,3,3); //nose
 
}

For the landscape project, I chose my recurring character Totoro to walk across the grass with a beautiful skyline.

Kristine Kim-Looking Outwards-11

Caroline Sinders, Jenn de la Vega, Dr. Yohance Murray, Black Box, 2015

Caroline Sinders is a machine learning designer/ user researcher, artist, and digital anthropologist who finds a lot of interest in language, culture and images. She creates many projects related to artificial intelligence, natural language processing, abuse, online harassment, and politics in digital, conversational spaces. All of her works are very intriguing and successful but the one that caught immediately caught my attention was her mixed media piece Black Box.

Gif of what is shown inside the box- images from cellphone footage and historical protests with construction paper cut outs taken from headlines and stills from Eric Garner’s murder.

Black Box is a mixed media 3D project vocalizes the current conversation around police, violence, and race. Caroline and her team took the idea of camera phones as citizen journalism and flipped it. The media story within the box they created can only be captured and see with the phone, just like after a plane disaster, we look to the black box for truth. This project is installed in a room and upon entering the room, you hear and see a visualization of John Coltrane’s Alabama. However, an XBOX Kinect triggers the actual camera phone audio from police incidents as you place your phone into the box, creating new and confrontational context to this well known protest song. What I especially love about this project is the fact that the artists challenged where  and how these stories and informations are experienced. They pushed the boundaries of asking themselves how might people engage with content and each other in new and different ways. Of course the whole production of building the box and using technology to execute this idea properly is also very intriguing, but their extra set of details of how and where they displayed their project is very impressive. I really enjoy this project and wish to experience in real life.

Blackbox documentation

Minjae Jeong-LookingOutwards11

While browsing through the provided list of women practitioners, I found Heather Kelley and her game “Superhypercube” very interesting. Superhypercube is a “first person puzzler” on PlaystationVR.

“To play, you control a group of cubes, rotating it to fit through a hole in a series of floating walls that are constantly moving toward you. Each time you fit through another wall without crashing, more cubes are added to your cluster. Head tracking is critical in the game – as your cluster of cubes gets bigger, you will need to lean around it to see the hole and quickly determine what rotations to make. Stay alive as long as possible, and add your high scores to the ranks of players around the world!”

Superhypercube trailer

What I find interesting about this game is that while I am still not familiar with VR games, this game is a seemingly simple educational puzzle game but playing it in VR actually makes it more fun, which is very important aspect in games.

Heather Kelley is a co-founder of Kokoromi, an experimental game collective, with whom she has produced and curated GAMMA event, promoting experimental games as a creative expression in a social context.

Looking Outwards – 11 – Joanne Chui

Mushtari, Jupiter’s Wanderer

Neri Oxman is an architect, designer, inventor, and a professor at the MIT Media Lab. Her research is focused on how computation design, digital fabrication, material science, and biology intersect, thus coining the term Material Ecology.

I was interested in this project, Mushtari, which is a 3D printed wearable sculpture that supports the flow of cyanobacteria that converts sunlight into sucrose. It’s both indexical and symbolic of the digestive tract, in which it looks and functions as an organ system for absorbing nutrients, digesting biomass, and expelling waste.

https://neri.media.mit.edu/projects/details/mushtari.html#prettyPhoto

lee chu – looking outwards 11

phonelovesyoutoo: database by Kate Hollenbach displays the feed of both the front and rear-facing cameras. The recordings are displayed at the original time of day, depicting a glimpse of the relationship between human, device, time, and space. This collection of videos really highlights the information we essentially give for free just by owning a device with so many sensors and recording devices.

Kate Hollenbach is an artist, programmer, and educator based in Chicago and Los Angeles. She explores interactive systems and technologies involving body, gesture, and physical space.

Project 11 – Landscape – Joanne Chui

sketch

/*
Joanne Chui
Section C 
Project 11
*/

var terrainSpeed = 0.0001;
var terrainDetail = 0.005;
var riverDetail = 0.0005
var birds = [];
var c1, c2;

function setup() {
    createCanvas(480, 240);
    frameRate(10);
    for(i = 0; i < 10; i++){
      var rx = random(width);
      var ry = random(height);
      birds[i] = makeBird(rx, ry);
    }
}

function draw() {
  // background(220, 220, 230);
  c1 = color(170, 170, 190);
  c2 = color(240, 190, 120);
  setGradient(c1, c2);

  //sun
  noStroke();
  fill(210, 100, 40);
  ellipse(width/2, 160, 170, 170);

  //call landscape and birds
  drawMountain();
  updateBird();
  addBird();
  removeBird();
}

//background gradient
function setGradient(c1, c2){
  noFill();
  for(i = 0; i < height; i++){
    var inter = map(i, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, i, width, i);
  }
}


function drawMountain(){
  //furthest mountain 
  fill(55, 63, 82);
    noStroke(); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 0, height);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();

    //middle river
    fill(220, 180, 150);
    noStroke(); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * riverDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, height/2, height);
        vertex(x, y); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();

    //closest mountain
    fill(170, 120, 40);
    noStroke(); 
    beginShape(); 
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed*4);
        var y = map(noise(t), 0,2, 0, height);
        vertex(x, y*3); 
    }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function makeBird(birdX, birdY){
  var bird = {
      x: birdX, 
      y: birdY, 
      speed: random(5, 20),
      size: random(5, 20),
      color: random(0, 100),
      move: birdMove,
      display: displayBird
  }
  return bird;
}

function birdMove(){
  this.x += this.speed;
  this.y -= this.speed / 5;
}

function displayBird(){
  strokeWeight(2);
  stroke(this.color);
  noFill();
  push();
  translate(this.x, this.y);
  arc(0, 0, this.size, this.size, PI + QUARTER_PI, 0);
  arc(this.size, 0, this.size, this.size, PI, 0 - QUARTER_PI);
  pop();
}

function updateBird(){
  for(i = 0; i < birds.length; i++){
    birds[i].move();
    birds[i].display();
  }
}

//adding birds with a random probability
function addBird(){
  var newBird = random(1);
  if(newBird < 0.2){
    var birdX = 0;
    var birdY = random(height);
    birds.push(makeBird(birdX, birdY));
  }
}

//removing birds from the array once they fall off the canvas
function removeBird(){
  var keepBird = [];
  for(i = 0; i < birds.length; i++){
    if(birds[i].x + birds[i].size > 0){
      keepBird.push(birds[i]);
    }
  }
  birds = keepBird;
}

I was interested in creating a landscape with many layers to show depth. I was interested in creating birds because i felt that they would add a dynamic movement in the landscape.

sketch

Project 11 Ellan Suder

I wanted to make a landscape that gave the illusion of depth, so objects would be moving past at different speeds depending on ‘how far back’ they are. I started by creating the mountains using the noise function. They were initially straight lines (x values i and i), but I used i*0.8 and i instead because the offset created an interesting effect. Then I made a balloon that randomly picked an image from an array. This balloon also randomly generated things like speed and height.

Initial code for balloon. It would appear from the left and, after reaching end of canvas, would reappear with different randomized image/location/speed

After ironing things out a bit, I used the sample code as a framework for making several balloons in an array. I also made the speed/size more deliberate. Now, the closer the balloon is to the top (the smaller the y-value), the slower it moves, giving the illusion that it is farther away.

sketch

/*
Ellan Suder
15104 1 D
esuder@andrew.cmu.edu
Project-11
*/

var balloons = [];
var balloonLinks = [];
var t1 = 0;
var t2= 0;
var t3 = 0;


function preload() {
    balloonLinks = [
    "https://i.imgur.com/rmLvmIq.png",
    "https://i.imgur.com/03Cr2Sx.png", 
    "https://i.imgur.com/peP166r.png"];
}


function setup() {
    createCanvas(480, 480); 
    frameRate(30);
  
    // create an initial collection of balloons
    for (var i = 0; i < 10; i++){
        var rx = random(-180, width);
        var ry = random(40,height-200);
        var rs = 70*(0.005*ry); //make balloons higher up smaller
        var spd = ry/70; //make balloons higher up move slower
        randomBalloon = floor(random(balloonLinks.length));
        balloon = loadImage(balloonLinks[randomBalloon]);
        balloons[i] = makeBalloon(balloon, rx, ry, rs, spd);
    }
    frameRate(10);
}

function draw() {
    background(200); 
  
    updateAndDisplayBalloons();
    removeBalloonsThatHaveSlippedOutOfView();
    addNewBalloonsWithSomeRandomProbability();
    
    //the larger t is
    //the faster it moves
    t1 += 0.01;
    t2 += 0.04;
    t3 += 0.1;
  
  
    for(var i=0; i < width*1.3; i++)
    {
    //the larger the number you divide i by
    //the 'faster' the terrain will move
    n1 = noise(i/100-t1);
    n2 = noise(i/100-t2);
    n3 = noise(i/100-t3);
    
    stroke(0,20);
    line(i*0.8, height*n1, //top of the line (bumpy randomized part)
         i, height); //bottom of line is bottom of canvas
    
    stroke(0,70);
    line(i*0.8, height*n2,
         i, height);
      
    stroke(0,200);
    line(i*0.8, height*n3,
         i, height);
    }
}

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

function removeBalloonsThatHaveSlippedOutOfView(){
    // If a balloon has dropped off the left edge,
    // remove it from the array.
    var balloonsToKeep = [];
    for (var i = 0; i < balloons.length; i++){
        if (balloons[i].x + balloons[i].size > 0) {
            balloonsToKeep.push(balloons[i]);
        }
    }
    balloons = balloonsToKeep; // remember the surviving balloons
}


function addNewBalloonsWithSomeRandomProbability() {
    var newBalloonLikelihood = 0.03; 
    if (random(0,1) < newBalloonLikelihood) {
        rx = random(-60, -50);
        ry = random(40,height-200);
        rs = 70*(0.005*ry);
        spd = ry/70; //make balloons higher up move slower
        randomBalloon = floor(random(balloonLinks.length));
        balloon = loadImage(balloonLinks[randomBalloon]);
        balloons.push(makeBalloon(balloon, rx, ry, rs, spd));
    }
}

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

// draw the balloon
function balloonDisplay() {
    image(this.img,this.x,this.y,this.size,this.size);
}

function makeBalloon(balloon, balloonX, balloonY, balloonSize, balloonSpeed) {
    var blln = {img: balloon,
                x: balloonX,
                y: balloonY,
                size: balloonSize,
                speed: balloonSpeed,
                move: balloonMove,
                display: balloonDisplay}
    return blln;
}

lee chu – project 11

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 11


var islands = [];
var hills = [];
var x; // cloud x

// colors
var navajo = '#FFE4A3';
var lPink = '#FFAFBA';
var peachOrange = '#EDD397';
var mauve = '#E8A0A9';
var peach = '#FFEAB7';
var taupe = '#544244';
var puce = '#4C3C3E';
var middleYellow = '#F4B086';


function setup() {
    createCanvas(480, 300);
    // create an initial collection of islands
    for (var i = 0; i < 2; i++){
        var rx = random(40, width - 40);
        islands[i] = makeIsland(rx);
    }
    for (var i = 0; i < 3; i++){
        var rx2 = random(40, width - 40);
        hills[i] = makeHill(rx2);
    }
    frameRate(10);
    x = random(40, width - 40);
}


function draw() {
    sky();
    horizon();
    // sun
    fill(peachOrange);
    ellipse(width / 2, height / 2, 100);
    // islands
    updateAndDisplayIslands();
    removeIsland();
    addIsland();
    // cloud
    cloud(x, 80);
    x += 1;
    if (x - 50 > width - 40) {
        x = -10;
    }
    // hills
    updateHills();
    removeHill();
    addHill();
    // window
    fill(0, 0, 50);
    windowFrame(40, 60);
    fill(75, 75, 100);
    windowFrame(28, 55);
}


function cloud(x, y) {
    strokeWeight(0);
    fill(255);
    rect(x, y, 20, 10);
    rect(x + 10, y + 10, 20, 10);
    rect(x - 10, y + 10, 20, 10);
    rect(x + 20, y + 20, 20, 10);
    rect(x - 10, y + 20, 20, 10);
    rect(x - 30, y + 20, 20, 10);
    rect(x - 30, y + 30, 20, 10);
    rect(x - 50, y + 30, 20, 10);
    rect(x - 20, y + 30, 20, 10);
    rect(x + 10, y + 30, 20, 10);
    rect(x + 30, y + 30, 20, 10);
    rect(x - 20, y + 40, 30, 10);
}


function makeIsland(birthLocationX) {
    var island = {x: birthLocationX, breadth: round(random(25, 50)),
                    speed: -1,
                    height: round(random(80, 150)),
                    move: islandMove,
                    display: islandDisplay}
    return island;
}


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


function islandDisplay() {
    // face
    fill(middleYellow);
    push();
    translate(this.x, height - 150);
    beginShape();
    vertex(0.4 * this.breadth, -this.height / 2);
    vertex(0.6 * this.breadth, -this.height / 2);
    vertex(this.breadth, this.height / 2);
    vertex(0.8 * this.breadth, this.height / 2 * 1.2);
    vertex(0.4 * this.breadth, this.height / 2 * 1.2);
    vertex(0.1 * this.breadth, this.height / 2);
    endShape(CLOSE);
    // shadow
    fill(taupe);
    beginShape();
    vertex(0.4 * this.breadth, -this.height / 2);
    vertex(0.1 * this.breadth, this.height / 2);
    vertex(0.4 * this.breadth, this.height / 2 * 1.2);
    vertex(0.35 * this.breadth, this.height / 2);
    endShape(CLOSE);
    pop();
}


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


function removeIsland() {
    var islandsToKeep = [];
    for (var j = 0; j < islands.length; j ++) {
        if (islands[j].x + islands[j].breadth > 40) {
            islandsToKeep.push(islands[j]);
        }
    }
    islands = islandsToKeep;
}


function addIsland() {
    var likelihood = 0.007;
    if (random(1) < likelihood) {
        islands.push(makeIsland(width));
    }
}


function makeHill(x) {
    h = round(random(150, 200));
    var spike = {x: x, breadth: round(random(25, 50)),
                speed: -3,
                height: round(random(200, 250)),
                move: hillMove,
                display: hillDisplay}
    return spike;
}


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


function hillDisplay() {
    fill(peach);
    push();
    translate(this.x, height - 50);
    beginShape();
    vertex(0, 0);
    vertex(this.breadth, 0);
    vertex(0.9 * this.breadth, -this.height * 0.25);
    vertex(0.7 * this.breadth, -this.height / 2);
    vertex(0.6 * this.breadth, -this.height);
    vertex(0.4 * this.breadth, -this.height);
    vertex(0.2 * this.breadth, -this.height / 2);
    endShape(CLOSE);
    pop();
}


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


function removeHill() {
    var hillsToKeep = [];
    for (var j = 0; j < hills.length; j ++) {
        if (hills[j].x + hills[j].breadth > 40) {
            hillsToKeep.push(hills[j]);
        }
    }
    hills = hillsToKeep;
}


function addHill() {
    var likelihood = 0.01;
    if (random(1) < likelihood) {
        hills.push(makeHill(width));
    }
}


function windowFrame(r, f) {
    strokeWeight(0);
    // top left
    beginShape();
    vertex(0, 0);
    vertex(100, 0);
    vertex(100, r);
    bezierVertex(f, r, r, f, r, 100);
    vertex(0, 100);
    endShape(CLOSE);
    rect(100, 0, width - 200, r);
    // top right
    beginShape();
    vertex(0, height);
    vertex(100, height);
    vertex(100, height - r);
    bezierVertex(f, height - r, r, height - f, r, height - 100);
    vertex(0, height - 100);
    endShape(CLOSE);
    rect(width - r, 100, r, height - 200);
    // bottom right
    beginShape();
    vertex(width, 0);
    vertex(width - 100, 0);
    vertex(width - 100, r);
    bezierVertex(width - f, r, width - r, f, width - r, 100);
    vertex(width, 100);
    endShape(CLOSE);
    rect(100, height - r, width - 200, r);
    // bottom left
    beginShape();
    vertex(width, height);
    vertex(width - 100, height);
    vertex(width - 100, height - r);
    bezierVertex(width - f, height - r, width - r, height - f, width - r, height - 100);
    vertex(width, height - 100);
    endShape(CLOSE);
    rect(0, 100, r, height - 200);

    // lines
    stroke(0);
    strokeWeight(0.5);
    line(0, height - 20, width, height - 20);
    strokeWeight(0.25);
}


function sky() {
    for (var y = 40; y < height - 69; y ++) {
        var interval = map(y, 40, height - 69, 0, 1);
        var c = lerpColor(color(mauve), color(peachOrange), interval);
        strokeWeight(1);
        stroke(c);
        line(0, y, width, y);
    }
}


function horizon(){
    strokeWeight(0);
    fill(navajo);
    beginShape();
    vertex(0, height - 70);
    vertex(width, height - 70);
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

I aimed to emulate the view from inside of a train outwards into a scene with floating islands.