daphnel-Project 10-Landscape

landscape

//Daphne Lee
var terrainSpeed = 0.0003;
var terrainCurves = 0.001;
var jx=280;
var jy=300;
var jw=107;
var jh=149;
var jx2=240;
var jy2=280;
var jw2=72;
var jh2=100;
var cx=0;
var cy=390
var cw=113;
var ch=75;
var kx=0;
var ky=350;
var kw=249;
var kh=250;

function preload(){
    jellyfish1 = loadImage("https://i.imgur.com/7ELhX6R.png?1");
    jellyfish2 = loadImage("https://i.imgur.com/Uhau0GX.png?1")
    crab = loadImage("https://i.imgur.com/tPxrvjd.png?1")
    kelp= loadImage("https://i.imgur.com/OZH9VCf.png?1")
}
function setup() {
    createCanvas(480, 480);
}

function drawSeaAndFloor(){
        beginShape();
        noStroke(0);
    //sea
    beginShape();
    fill(51, 204, 204);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainCurves) + (millis() * terrainSpeed*2);
        var y = map(noise(t/2), 0,1, 0, 400);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
    //floor
        beginShape();
        fill(204, 153, 102);
        for (var x = 0; x < width; x++) {
        var t = (x * 2* terrainCurves) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 400, height);
        vertex(width, height);
        vertex(0,height);
        vertex(x, y);
    }
    endShape();
}
function drawJellyfish(){
    //the bigger jellyfish moving left
    image(jellyfish1,jx,jy,jw,jh);
    jx-=random(0.5,1);
    jy-=random(-0.5,0.5);
    if(jx<-jw){
        jx=480;
    }
    image(jellyfish2,jx2,jy2,jw2,jh2);
    //smaller jellyfish moving right;
    jx2+=random(-0.5,2);
    jy2+=random(-0.5,0.5);
    if(jx2>width){
        jx2=-100;
    }
}
function drawCrab(){
    //crab
    image(crab,cx,cy,cw,ch);
    cx+=random(0.1,2);
    cy+=random(-0.5,0.5);
    if(cx>width){
        cx=-100;
    }
}
function drawKelp(){
    image(kelp,kx,ky,kw,kh);
    kx+=random(0.5,2);
    ky+=random(-0.5,0.5);
    if(kx>width){
        kx=-250;
    }
}

function draw(){
    background(179, 236, 255);
    drawSeaAndFloor();
    drawJellyfish();
    drawCrab();
    drawKelp();
    //sun
    fill(255, 255, 0);
    ellipse(20,20,150,150)
}

I started off with the idea of wanting to make an ocean with sea creatures swimming inside. I tried starting off with clouds but it didn’t really end up the way I wanted to. I decided to use photos to depict these sea creatures and the first picture I stumbled upon was a jellyfish. I started off with one, and then added another one. It was hard for me to figure out how to work with using objects so I ended up going a simpler route that felt more straightforward in my opinion. I tried to make the ocean more realistic looking so I added some kelp and a crab to add more details to it. I didn’t have enough time to try to incorporate some of the other ideas I had such as working with more objects and creating new functions to relate them to and getting a clearer understanding on how these objects move.