![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../wp-content/uploads/2023/09/stop-banner.png)
Graham Murtha
Section A
For this project I wanted to make a boat move through a fiery landscape, like the final world in Mario or Mustafar from Star Wars. I made moving embers, meteors, and randomly generated spires in the background to illustrate this volcanic landscape.
sketch
//Graham Murtha
//Section A
//gmurtha@andrew.cmu.edu
//Project 11- moving landscape
// A fire Nation boat sails through Mustafar AND world 8 of Mario - so many universes in one!
var embers = [];
var spire = [];
var meteors = [];
var ship; // fire nation ship from Avatar lol- it seemed to fit the color scheme, and is steam powered
function preload(){ // input boat image
ship = loadImage("https://i.imgur.com/v5MzkRY.png");
}
function setup() {
createCanvas(450, 300);
frameRate(10);
//initial embers in the sky
for(var i = 0; i < 6; i++){
var sx = random(width);
embers[i] = makeEmber(sx);
}//initial spires
for(var i = 0; i < 10; i++){
var sx = random(width);
spire[i] = makeSpire(sx);
}
//random meteors
for(var i = 0; i < 1; i++){
var sx = random(width);
meteors[i] = makeMeteors(sx);
}
}
function draw() {
//fiery sky
background(200, 100, 0); //mid-tone neutral orange
// generates sequence of random embers slowly panning left
updateAndDisplayEmber();
removeEmberOutOfView();
addNewEmber();
// generates sequence of random meteors quickly panning left
updateAndDisplayMeteors();
removeMeteorsOutOfView();
addNewMeteors();
// generates sequence of random spires quickly panning left
updateAndDisplaySpire();
removeSpireOutOfView();
addNewSpire();
//water
fill(120,70,30); // darker orange- reflects sky a bit
noStroke();
rect(0, 230, 500, 75);
//ship stays stagnant, but as its surroundings move left it seems to move right
image(ship, width/2 - 200, 180, 200, 100);
}
//Ember object
function makeEmber(emberLocationX){
var ember = {x : emberLocationX,
y : random(0, 170),
emberScale : random(0.5, 2.5),
speed : -1,
move : moveEmber,
display : displayEmber}
return ember;
}
function displayEmber(){
push();
translate(this.x, this.y);
fill('gold');
noStroke();
scale(this.emberScale);
ellipse(0,0,5,5);
pop();
}
//recoordinates ember positions and display
function updateAndDisplayEmber(){
for(var i = 0; i < embers.length; i++){
embers[i].move();
embers[i].display();
}
}
function addNewEmber(){
var newEmberProbability = 0.01; // controls scarcity of embers in background
if (random(0, 1) < newEmberProbability){
embers.push(makeEmber(width));
}
}
function removeEmberOutOfView (){
//if ember dissappears on the left, remove it from the array
var embersToKeep = [];
for (var i = 0; i < embers.length; i++){
if (embers[i].x + 50 > 0) {
embersToKeep.push(embers[i]);
}
}
//embers left
embers = embersToKeep;
}
function moveEmber(){
this.x += this.speed;
}
//Spire object
function makeSpire(spireLocationX){
var spire = {xt : spireLocationX,
yt : 240,
spireScale : random(0.1, 0.5),
spireColor : color(random(20,80),0, 0),
speedT : -6,
moveT : moveSpire,
displayT : displaySpire}
return spire;
}
function displaySpire(){
push();
translate(this.xt + 60, this.yt); //add 60 so transitions onto screen
noStroke();
scale(this.spireScale);
//Spire defining shape
noStroke();
fill(this.spireColor);
beginShape();
vertex(-80,-10);
vertex(80,-10);
vertex(10,-200);
vertex(40,-250);
vertex(0,-300);
vertex(-40,-250);
vertex(-10,-200);
endShape();
pop();
}
//update spire positions and display
function updateAndDisplaySpire(){
for(var i = 0; i < spire.length; i++){
spire[i].moveT();
spire[i].displayT();
}
}
function addNewSpire(){
var newSpireProbability = 0.04; // controls scarcity of rock spires
if (random(0, 1) < newSpireProbability){
spire.push(makeSpire(width));
}
}
function removeSpireOutOfView (){
//if ember dissappears on the left, remove it from the array
var spireToKeep = [];
for (var i = 0; i < spire.length; i++){
if (spire[i].xt + 100 > 0) {
spireToKeep.push(spire[i]);
}
}
//spires left
spire = spireToKeep;
}
function moveSpire(){
this.xt += this.speedT;
}
//meteors object
function makeMeteors(locationX){
var meteors = {xs : locationX,
ys : random(75, 125),
meteorsScale : random(0.5, 3),
speedS : -13,
moveS : moveMeteors,
displayS : displayMeteors}
return meteors;
}
function displayMeteors(){
push();
translate(this.xs + 80, this.ys); //adds 80 transitions on screen
fill("gold");
noStroke();
scale(this.meteorScale);
//meteor
fill('orange');
triangle(0,6,0,-6,50,0)
fill(40,20,20)
ellipse(0,0,20,20);
fill('orange');
ellipse(1,2,3,3);
ellipse(3,6,3,3);
ellipse(-4,-6,3,3);
pop();
}
//update Spire positions and display
function updateAndDisplayMeteors(){
for(var i = 0; i < meteors.length; i++){
meteors[i].moveS();
meteors[i].displayS();
}
}
function addNewMeteors(){
var newMeteorsProbability = 0.01; // controls scarcity of meteors
if (random(0, 1) < newMeteorsProbability){
meteors.push(makeMeteors(width));
}
}
function removeMeteorsOutOfView (){
//if ember dissappears on the left, remove it from the array
var meteorsToKeep = [];
for (var i = 0; i < meteors.length; i++){
if (meteors[i].xs + 100 > 0) {
meteorsToKeep.push(meteors[i]);
}
}
//Spires left
meteors = meteorsToKeep;
}
function moveMeteors(){
this.xs += this.speedS;
}
