landscape
/*
*Sadie Johnson
*15-104 Section C
*sajohnso@andrew.cmu.edu
*Project-10
*/
//setting up arrays
var moons = [];
var clouds = [];
var planets = [];
var c1, c2; //setting up colors for gradient
function setup() {
createCanvas(600, 240);
frameRate(10);
//sets up the two colors in the gradient background
c1 = color('#221A25'); //black on top
c2 = color('#3B2A3A'); //dark purple on bottom
// create initial moons
for (var i = 0; i < 2; i++){ //changng limit of loop affects # of moons initially on screen
var rx = random(width);
moons[i] = makeMoon(rx);
}
// create initial clouds
for (var c = 0; c < 8; c++){ //affects # of planets initially on screen
var cl = random(width);
clouds[c] = makeCloud(cl);
}
// create initial clouds
for (var p = 0; p < 5; p++){ //affects # of planets initially on screen
var pl = random(width);
planets[p] = makePlanet(pl);
}
}
function draw() {
//purple-black gradient in backgorund
for (var i = -00; i <= height-50; i++) {
var inter = map(i, 90, 170, 0, 1);
var c = lerpColor(c1, c2, inter);
stroke(c);
line(0, i, width, i);
}
//OCEAN
drawOcean();
//MOONS
updateAndDisplayMoons();
removeMoonsThatHaveSlippedOutOfView();
addNewMoonsWithSomeRandomProbability();
//PLANETS
updateAndDisplayPlanets();
removePlanetsThatHaveSlippedOutOfView();
addNewPlanetsWithSomeRandomProbability();
//CLOUDS
updateAndDisplayClouds();
removeCloudsThatHaveSlippedOutOfView();
addNewCloudsWithSomeRandomProbability();
}
function updateAndDisplayMoons(){
// Update the moons' positions, and display them.
for (var i = 0; i < moons.length; i++){
moons[i].move();
moons[i].display();
}
}
function updateAndDisplayClouds(){
// Update the clouds' positions, and display them.
for (var i = 0; i < clouds.length; i++){
clouds[i].move();
clouds[i].display();
}
}
function updateAndDisplayPlanets(){
// Update the planets' positions, and display them.
for (var i = 0; i < planets.length; i++){
planets[i].move();
planets[i].display();
}
}
function removeMoonsThatHaveSlippedOutOfView(){
var moonsToKeep = [];
for (var i = 0; i < moons.length; i++){
if (moons[i].x + moons[i].breadth > 0) {
moonsToKeep.push(moons[i]);
}
}
moons = moonsToKeep; // remember the surviving moons
}
function removeCloudsThatHaveSlippedOutOfView(){
var cloudsToKeep = [];
for (var i = 0; i < clouds.length; i++){
if (clouds[i].x + clouds[i].breadth > 0) {
cloudsToKeep.push(clouds[i]);
}
}
clouds = cloudsToKeep; // remember the surviving clouds
}
function removePlanetsThatHaveSlippedOutOfView(){
var planetsToKeep = [];
for (var i = 0; i < planets.length; i++){
if (planets[i].x + planets[i].breadth > 0) {
planetsToKeep.push(planets[i]);
}
}
planets = planetsToKeep; // remember the surviving planets
}
function addNewMoonsWithSomeRandomProbability() {
// Spawn a new moon to the right edge of the canvas
var newMoonLikelihood = 0.0004; //moons are VERY unlikely
if (random(0,1) < newMoonLikelihood) {
moons.push(makeMoon(width));
}
}
function addNewCloudsWithSomeRandomProbability() {
// Spawn a new cloud to the right edge of the canvas
var newCloudLikelihood = 0.02; //clouds are spawned relatively often
if (random(0,1) < newCloudLikelihood) {
clouds.push(makeCloud(width));
}
}
function addNewPlanetsWithSomeRandomProbability() {
// Spawn a new cloud to the right edge of the canvas
var newPlanetLikelihood = 0.002; //moderately likely
if (random(0,1) < newPlanetLikelihood) {
planets.push(makePlanet(width));
}
}
// method to update position of moon every frame
function moonMove() {
this.x += this.speed;
}
// method to update position of cloud every frame
function cloudMove() {
this.x += this.speed;
}
// method to update position of planet every frame
function planetMove() {
this.x += this.speed;
}
function moonDisplay() {
var bHeight = this.nFloors * 20;
//the following variables are used to randomize the size of the 'reflections'
var rando1 = random(bHeight/2,bHeight/2+10);
var rando2 = random(bHeight/2,bHeight/2+10);
var rando3 = random(bHeight/2,bHeight/2+10);
noStroke();
push();
translate(this.x, height - 40);
//DRAWS THE ECLIPSE EFFECT BEHIND THE MOON
for (var i=20; i>0; i--){ //the glow is made of 20 overlapping circles
fill(217,154,100,(10-i)*4);// semi-transparent yellow glow
ellipse(0, -bHeight-7, bHeight+(10*i), bHeight+(10*i));
}
//DRAWS OPAQUE HIGHLIGHT BEHIND MOON
fill('#FED196'); //opaque, light yellow
ellipse(0, -bHeight-3, bHeight+2, bHeight+2);
//DRAWS THE MOON
fill('#836469'); //light purple
ellipse(0, -bHeight, bHeight, bHeight);
//DRAWS MOON REFLECTION ON WATER
fill(217,154,100,150); //semi-transparent yellow
ellipse(0, -bHeight*(5/bHeight), rando1/3, bHeight/20);
ellipse(0, -bHeight*(5/bHeight)+7, rando2/2, bHeight/20);
ellipse(0, -bHeight*(5/bHeight)+17, rando3, bHeight/10);
ellipse(0, -bHeight*(5/bHeight)+27, rando2/2, bHeight/20);
ellipse(0, -bHeight*(5/bHeight)+45, rando1+10, bHeight/5);
pop();
}
function cloudDisplay() {
var bHeight = this.nFloors * 20;
var lowHeight = bHeight+5;
push();
translate(this.x, height-110);
//DRAWS HIGHLIGHT BEHIND CLOUDS
fill('#563F51'); //light purple
//slightly larger and higher than the darker clouds
//however, these clouds (usually) have the same shape
ellipse(0, -lowHeight+10, this.breadth, lowHeight/2.5);
ellipse(-10, -lowHeight+8, this.breadth*.8, lowHeight/2.5);
ellipse(-10, -lowHeight-15, this.breadth*.7, lowHeight/2.5);
ellipse(25, -lowHeight+5, this.breadth, lowHeight-20);
ellipse(15, -lowHeight+15, this.breadth*1.2, lowHeight-20);
ellipse(15, -lowHeight-10, this.breadth*.6, lowHeight-20);
//DRAWS DARKER, LOWER CLOUDS
fill('#353040');//darker purple
//xposition, yposition and size modified by randomly chosen integers
//in order to make clouds appear randomly generated
ellipse(0, -bHeight, this.breadth, bHeight-20);
ellipse(-10, -bHeight+10, this.breadth*.8, bHeight-20);
ellipse(-10, -bHeight-15, this.breadth*.7, bHeight-20);
ellipse(25, -bHeight+5, this.breadth, bHeight-20);
ellipse(15, -bHeight+15, this.breadth*1.2, bHeight-20);
ellipse(15, -bHeight-10, this.breadth*.6, bHeight-20);
pop();
}
function planetDisplay() {
var bHeight = this.nFloors * 20;
push();
translate(this.x, height - 40);
//DRAWS HIGHLIGHT BEHIND PLANET
fill(217,154,100,150); //light yellow
ellipse(0, -bHeight-99, bHeight+3, bHeight+3); //slightly larger and lower than planet
//DRAWS PLANET
fill('#352831'); //dark purple
ellipse(0, -bHeight-100, bHeight, bHeight);
pop();
}
function makeMoon(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 50,
speed: -.1, //moons travel the slowest
nFloors: round(random(5,8)), //y positions moons travel along
move: moonMove,
display: moonDisplay}
return bldg;
}
function makeCloud(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 60, //puffiness of clouds
speed: -1.6, //clouds travel the fastest
nFloors: round(random(-1,2)), //y positions clouds travel along
move: cloudMove,
display: cloudDisplay}
return bldg;
}
function makePlanet(birthLocationX) {
var bldg = {x: birthLocationX,
breadth: 50,
speed: -.2, //planets travel intermediately fast
nFloors: round(random(-2,4)), //y positions planets travel along
move: planetMove,
display: planetDisplay}
return bldg;
}
function drawOcean(){
noStroke();
fill('#371D20'); //dark purpleish red
rect(0,height-50,width, 50);
}
For this project, I wanted to draw a sky with different planets, which would move at different speeds. I didn’t anticipate that planets would look so abstract if they were just circular, so I had to use lighting and shadow to make my objects clearer.
![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](../../../../wp-content/uploads/2020/08/stop-banner.png)
