Project 11: Generative Landscape

sketchDownload
//global variables
var cloudsX = [];
var cloudsY = [];
var brickX = [];
var brickY = [];
var mushroomX = [];
var mushroomY = [];
var cloudImg;
var brickImg;
var floorImg;
var noiseParam = 0;
var noiseStep = 0.01;
var numClouds = 5;
var numBricks = 3;
var numMushrooms = 3;
var mh = []; //height of the mountains

function preload() { 
  //preload images
  cloudImg = loadImage("https://i.imgur.com/i3pLDv0.png");
  brickImg = loadImage("https://i.imgur.com/yNNs74U.png");
  floorImg = loadImage("https://i.imgur.com/LZwSMdA.png");
  mushroomImg = loadImage("https://i.imgur.com/tflvlXK.png");
}

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

  //mountain
  for (var i = 0; i < width/2 + 1; i ++) {
    var n = noise(noiseParam);
    var v = map(n, 0, 1, height/2, height);
    mh.push(v);
    noiseParam += noiseStep;
  }

  //cloud
  for (var i = 0; i < numClouds; i ++) {
    var cx = random(width/numClouds*i, width/numClouds*(i+1));
    var cy = random(height/4);
    cloudsX.push(cx);
    cloudsY.push(cy);
  }

  //brick
  for (var i = 0; i < numBricks; i ++) {
    var bx = random(width/numBricks*i, width/numBricks*(i+1));
    var by = random(height/3, height/2);
    brickX.push(bx);
    brickY.push(by);
  }

  //mushroom
  for (var i = 0; i < numMushrooms; i ++) {
    var mx = random(width/numMushrooms*i, width/numMushrooms*(i+1));
    var my = height-90;
    mushroomX.push(mx);
    mushroomY.push(my);
  }
  frameRate(10);
}

function draw() {
  background(102, 154, 255); //blue
  drawMountain();
  drawCloud();
  drawBrick();
  drawMushroom();

//floor
  image(floorImg, 0, 340, 130, 30);
  image(floorImg, 129, 340, 130, 30);
  image(floorImg, 258, 340, 130, 30);
  image(floorImg, 387, 340, 130, 30);
  image(floorImg, 0, 370, 130, 30);
  image(floorImg, 129, 370, 130, 30);
  image(floorImg, 258, 370, 130, 30);
  image(floorImg, 387, 370, 130, 30);
}

//mountains
function drawMountain() {
  fill(52, 151, 9); //green
  beginShape();
  vertex(0, height);
  for (var i = 0; i < mh.length; i ++) {
    x = 2*i;
    y = mh[i];
    vertex(x,y);
  }
  vertex(width, height);
  endShape();
  mh.shift();
  n = noise(noiseParam);
  v = map(n, 0, 1, height/2, height);
  mh.push(v);
  noiseParam += noiseStep;
}

//cloud
function drawCloud() {
  for (var i = 0; i < numClouds; i ++) {
    image(cloudImg, cloudsX[i], cloudsY[i], 100, 33);
  }
  for (var i = 0; i < numClouds; i ++) {
    cloudsX[i] -= 3; //update cloud position
    if (cloudsX[i] < -100) { //remove cloud
      cloudsX[i] = width;
      cloudsY[i] = random(height/4);
    }
  }
}

//brick
function drawBrick() {
  for (var i = 0; i < numBricks; i ++) {
    image(brickImg, brickX[i], brickY[i], 100, 30);
  }
  for (var i = 0; i < numBricks; i ++) {
    brickX[i] -= 3; //update brick position
    if (brickX[i] < -100) { //remove cloud
      brickX[i] = width;
      brickY[i] = random(height/3, height/2);
    }
  }
}


//mushroom
function drawMushroom() {
  for (var i = 0; i < numMushrooms; i ++) {
    image(mushroomImg, mushroomX[i], mushroomY[i], 40, 30);
  }
  for (var i = 0; i < numMushrooms; i ++) {
    mushroomX[i] -= 7; //update brick position
    if (mushroomX[i] < -100) { //remove cloud
      mushroomX[i] = width;
      mushroomY[i] = height-90;
    }
  }
}

For this project, I decided to replicate one of my favorite childhood game, Super Mario Bros Game we used to play with Nintendo. For moving variables, I added clouds, bricks, mushrooms and the mountain the background, and included floor tiles using png files. It was challenging at first to make them move and disappear, but it was really fun to create this game-like scenery. If I had more time, I would like to add a jumping Mario so the character interacts with the game scene.

Leave a Reply