hannahk2-Project-10

sketch

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-10

var gemboy; 
var terrainSpeed = 0.0075;
var terrainDetail = 0.06;
var gemY;

//preload image of spaceship
function preload(){
	gemboy = loadImage("https://i.imgur.com/OBAJ0Kb.png");
}

function setup() {
    createCanvas(480, 400); 
    frameRate(10);
}

function draw() {
	background(0);

    //background layer 1 farthest layer back
    //uses noise to create randomized terrain
    push();
    beginShape(); 
    fill(1, 100, 167, 100);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/20) + (millis() * terrainSpeed/20);
        var y = map(noise(t), 0, 1, height/10, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //bg layer 2
    push();
    beginShape(); 
    fill(1, 83, 130);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/5) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/5, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //bg layer 3
    push();
    beginShape(); 
    fill(250, 230, 162);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail/50) + (millis() * terrainSpeed/2);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

	image(gemboy, 100, 60, 280, 300);

    //closest layer
    push();
    beginShape(); 
    fill(25, 176, 186);
    noStroke();
    vertex(0,height);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail*1.5) + (millis() * terrainSpeed*20);
        var y = map(noise(t), 0, 1, height-200, height*1.2);
        vertex(x, y); 
    }
    vertex(width, height);
    endShape();
    pop();

    //calling stars to be drawn
    makeStar();
}

//function to create star object with randomized opacity
//and randomized size
function makeStar() {
  var starX = random(5, width); 
  var starY = random(5, 200);
  var starW = random(2, 5);

  noStroke();
  fill(255, random(10, 255)); 
  ellipse(starX, starY, starW, starW);
}

I wanted to create a cave landscape of a character in a gem spaceship. This was a very frustrating project for me as manipulating the different terrains and their speeds, heights, etc. was confusing. I did, however, have fun creating the drawing of the spaceship and choosing the colors. The object that I chose to include in my landscape was randomized stars. I wish I had more time so I could really create a more complex landscape with more objects, that I was happy with.

above is an image of my drawing.