sketch
//Rebecca Groves
//Section B
//rgroves@andrew.cmu.edu
//Landscape
var middlecacti = [];
var foregroundcacti = [];
var shrubs = [];
var buttes = [];
var MiddlegroundSpeed = .0003;
var MiddlegroundDetail = .004;
var ForegroundSpeed = .0005;
var ForegroundDetail = .005;
var middleTerrain = [];
var foregroundTerrain = [];
function setup() {
createCanvas(480, 250);
//pregenerated vegetation
for (var i = 0; i < 4; i++) {
buttes[i] = makeButte(random(width));
}
for (var i = 0; i < 5; i++) {
middlecacti[i] = makeCactus(floor(random(width)));
}
for (var i = 0; i < 3; i++) {
foregroundcacti[i] = makeCactus(floor(random(width)));
}
for (var i = 0; i < 100; i++) {
shrubs[i] = makeShrub(random(width));
}
}
//LANDSCAPES
function drawForeground() {
noStroke();
fill(223, 194, 140);
beginShape();
for (var x = 0; x <= width; x++) {
var t = (x * ForegroundDetail) + (millis() * ForegroundSpeed);
var y = map(noise(t), 0, 1, 2 * height/3, height);
vertex(x,y);
foregroundTerrain[x] = y;
}
vertex(width, height);
vertex(0, height);
endShape();
if (random(0, 1) < .003) {
foregroundcacti.push(makeCactus(width))
}
for (var i = 0; i < foregroundcacti.length; i++) {
foregroundcacti[i].move();
foregroundcacti[i].foregrounddraw();
}
}
function drawMiddleground() {
noStroke();
fill(210, 170, 100);
beginShape();
for (var x = 0; x <= width; x++) {
var t = (x * MiddlegroundDetail) + (millis() * MiddlegroundSpeed);
var y = map(noise(t), 0, 1, height/2, height);
vertex(x,y);
middleTerrain[x] = y;
}
vertex(width, height);
vertex(0, height);
endShape();
if (random(0, 1) < .005) {
middlecacti.push(makeCactus(width))
}
for (var i = 0; i < middlecacti.length; i++) {
middlecacti[i].move();
middlecacti[i].middledraw();
}
}
function drawBackground() {
fill(230, 190, 90);
noStroke();
rect(0, 2 * height/3, width, height/3);
if (random(0, 1) < .01) {
buttes.push(makeButte(width))
}
for (var i = 0; i < buttes.length; i++) {
buttes[i].move();
buttes[i].draw();
}
if (random(0, 1) < .5) {
shrubs.push(makeShrub(width))
}
for (var i = 0; i < shrubs.length; i++) {
shrubs[i].move();
shrubs[i].draw();
}
}
//REMOVE UNUSED OBJECTS
function removeButtes() {
var buttesToKeep = [];
for (var i = 0; i < buttes.length; i++) {
if (buttes[i].x + buttes[i].breadth > 0)
buttesToKeep.push(buildings[i]);
}
buttes = buttesToKeep;
}
function removemiddleCacti() {
var middlecactiToKeep = [];
for (var i = 0; i < middlecacti.length; i++) {
if (middlecacti[i].x > 0)
middlecactiToKeep.push(middlecacti[i]);
}
middlecacti = middlecactiToKeep;
}
function removeforegroundCacti() {
var foregroundcactiToKeep = [];
for (var i = 0; i < foregroundcacti.length; i++) {
if (foregroundcacti[i].x > 0)
foregroundcactiToKeep.push(foregroundcacti[i]);
}
foregroundcacti = foregroundcactiToKeep;
}
//BUTTES
function butteMove() {
this.x += this.speed;
}
function drawButte() {
beginShape();
vertex(this.x + this.breadth, 2 * height/3);
vertex(this.x + this.breadth, 2 * height/3);
vertex(this.x + this.breadth - 10, (2 * height/3) - this.tall);
vertex(this.x + 10, (2 * height/3) - this.tall);
vertex(this.x, 2 * height/3);
endShape();
}
function makeButte(birthlocationX) {
var butte = {x: birthlocationX,
breadth: random(40, 150),
tall: random(10, 30),
speed: -1,
move: butteMove,
draw: drawButte}
return butte;
}
//VEGETATION
function cactusMove() {
this.x -= 1;
}
function drawmiddleCactus() {
strokeWeight(10);
stroke('green');
line(this.x, middleTerrain[this.x], this.x, middleTerrain[this.x] - this.height);
for (i = 0; i < this.limbs; i++) {
if (i%2 == 0) {
line(this.x - 10, middleTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, middleTerrain[this.x] - this.height/(1.25 * i));
} else {
line(this.x + 10, middleTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, middleTerrain[this.x] - this.height/(1.25 * i));
}
}
noStroke();
if (this.flowercolor < .3) {
fill(236, 96, 160);
} else if (this.flowercolor > .3 & this.flowercolor < .6) {
fill(255, 255, 0);
} else {
noFill();
}
push();
translate(this.x, middleTerrain[this.x] - this.height);
rotate(-90);
for (i = 0; i < 3; i++) {
angleMode(DEGREES);
var angle = 45;
rotate(angle);
angle += 45 * i;
ellipse(0, -5, -7, 15);
}
pop();
}
function drawforegroundCactus() {
strokeWeight(10);
stroke('green');
line(this.x, foregroundTerrain[this.x], this.x, foregroundTerrain[this.x] - this.height);
for (i = 0; i < this.limbs; i++) {
if (i%2 == 0) {
line(this.x - 10, foregroundTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, foregroundTerrain[this.x] - this.height/(1.25 * i));
} else {
line(this.x + 10, foregroundTerrain[this.x] - this.height/(1.25 * i) - 15, this.x, foregroundTerrain[this.x] - this.height/(1.25 * i));
}
}
noStroke();
if (this.flowercolor < .3) {
fill(236, 96, 160);
} else if (this.flowercolor > .3 & this.flowercolor < .6) {
fill(255, 255, 0);
} else {
noFill();
}
push();
translate(this.x, foregroundTerrain[this.x] - this.height);
rotate(-90);
for (i = 0; i < 3; i++) {
angleMode(DEGREES);
var angle = 45;
rotate(angle);
angle += 45 * i;
ellipse(0, -5, -7, 15);
}
pop();
}
function makeCactus(locationX) {
var cactus = {x: locationX,
height: random(20, 70),
limbs: floor(random(1, 4)),
middledraw: drawmiddleCactus,
foregrounddraw: drawforegroundCactus,
move: cactusMove,
flowercolor: random(0, 1)}
return cactus;
}
function shrubMove() {
this.x += this.speed
}
function drawShrub() {
fill(50, 100, 100);
ellipse(this.x, this.y, 3, 3);
}
function makeShrub(locationX) {
var shrub = {x: locationX, y: random(2 * height/3, height),
speed: -1,
draw: drawShrub,
move: shrubMove}
return shrub;
}
function draw() {
background("skyblue");
drawBackground();
drawMiddleground();
drawForeground();
}
For my landscape I was inspired by driving through New Mexico this summer. Unfortunately I could not figure out how make the cacti move at the same speed as the landscape. I borrowed the code for the landscape from the class website and I think maybe if I understood how that worked a little better I might have been able to make the speeds match. I will keep thinking about it. Other than that, I thought this project went pretty well. I’m glad I was finally able to figure out objects, even at a pretty basic level. I still find them confusing but I can use them!