Space Wallpaper

For this project I knew I wanted to do something involving layered circles, and I actually accidentally came across a “moon” in another idea I was developing. I switched to space theme and proceeded from there. Using closely aligned circles I created “stars” from negative space and then used the positive space to fill with different space objects.

Outer Space

function setup() {
    createCanvas(800, 560);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	scale(2);	//zoom in x2
	noStroke();
background(255);


fill(58,37,165);	//dark blue
rectMode(CORNER);		//x an y are corner coordinates
	rect(0,0,width,23);	//blocking out the "stars" at the top and bottom
	rect(0,260,width,23)
 
translate (50,0);		//move 50 right and 0 down
	for (var y = -100; y <= 600; y += 40) {		//start at -100, add 40 to y until y=600
		for (var x = -100; x <= 800; x += 50) {		//start at -100, add 50 to x until x=800
			circle(x, y, 58);
		}
	}
pop();

push();
translate(0,-20)		//move 20 up
	fill(255,239,0);		//yellow
	for (var y3 =0; y3 <= 300; y3 += 80) {		//every other circle
		for (var x3 = 0; x3 <= 800; x3 += 100) {	//every other circle
			circle(x3, y3, 30);		//moon
		}
	}
pop();

push();
translate(-6,-28);		//move 6 left, 28 up
	for (var y4 =0; y4 <= 300; y4 += 80) {		//every other
		for (var x4 = 0; x4 <= 800; x4 += 100) {	//every other
			circle(x4, y4, 30);		//moon "shadow"
		}
	}
pop();

push();
translate(50,100);		//50 right, 100 down
	for (var y5 =0; y5 <= 100; y5 += 80) {	//every other
		for (var x5 = 0; x5 <= 300; x5 += 200) {
			planet(x5,y5);		//run planet function
		}
	}
pop();

push();
translate(100,60);		//100 right, 60 down
	for (var y6 =0; y6 <= 100; y6 += 80) {		//every other, constricted to the middle of the canvas
		for (var x6 = 0; x6 <= 300; x6 += 400) {	//constricted to run only once
			rocket(x6,y6);		//run rocket function
		}
	}
			
pop();

push();
	for (var y7 =0; y7 <= 200; y7 += 80) {		//every one
		for (var x7 = 0; x7 <= 300; x7 += 200) {	//every 4
			hat(x7,y7);		//run hat function
		}
	}	
pop();

push();
translate(0,50)		//move down 50
	for (var y8 =0; y8 <= 150; y8 += 80) {	//every other
		for (var x8 = 0; x8 <= 150; x8 += 100) {	//every other, constrained to left side
			UFO(x8,y8);		//call UFO function
		}
	}	
pop();

push();
translate(0,50)		//move down 50
	for (var y9 =0; y9 <= 150; y9 += 80) {	//every other
		for (var x9 = 0; x9 <= 150; x9 += 100) {	//every other, constrined to right side
			alien(x9,y9);		//call alien function
		}
	}	
}

function hat (x7,y7){

push();

	translate(x7,y7)	//repeat translation
fill(64,234,240);	//light blue
	rotate(radians(-7));	//rotate right
		triangle(0,59,2.5,45,8.5,58);	//hat
fill(255);	//white
	circle(2.5,45,3);	//pom
	quad(0,59,0,61,8.5,60,8.5,58)	//hat base

pop();
}

function planet(x5,y5){
push();

translate(x5,y5)
	rotate (radians(-10));	//rotate right
		fill(250,139,99,150);	//opaque red-orange
			ellipse(0,0,40,10);		//ring
fill(240,128,43);		//orange	
	rotate(radians(10));		//negate rotation
		circle(0,0,25);		//planet

pop();	

}

function rocket(x6,y6){

push();

translate(x6,y6);
	fill(255);	//white
		rotate(radians(-50));	//rotate right
			rect(0,50,10,20);	//rocket body
fill(255,0,0);	//red
	triangle(0,50,10,50,5,45);	//rocket top
	quad(0,70,-3,75,13,75,10,70);	//rocket bottom
fill(255,171,0);	//bright orange
	quad(-2,75,1,80,9,80,12,75);	//outer fire
	triangle(-1,75,5,85,11,75);		//outer fire bottom
fill(255,255,138);	//bright yellow
	triangle(1.5,75,5,82,8.5,75);	//inner fire
fill(139,139,139);	//gray
	circle(5,56,7);		//window frame
fill(2,217,225);	//light blue
	circle(5,56,5);		//window pane

pop();
}

function UFO(x8,y8){

push();

translate(x8,y8)
	fill(152,152,152);	//gray
		ellipse(0,50,40,15);	//ufo body
		quad (-5,52,-15,60,-14,61,-4,53)	//left landing leg
		rect (-2,52,1.5,10)		//middle landing leg
		quad (1,52,11,61,12,60,4,53)	//right landing leg
fill(175,238,170,200);	//opaque green-blue
	ellipse(0,45,25,15);	//window dome
fill(255,0,0);		//red
	circle(-12,52,3);	//left light
	circle(12,52,3);	//right light
fill(255,255,0);	//yellow
	circle(0,54.5,3);	//middle light

pop();
}

function alien(x9,y9){

	push();

translate(x9,y9)
	fill(198,0,191);	//purple-red
		ellipse(200,50,10,20)		//body
		quad(198,44,201,45,191,54,190,53);	//left arm
		quad(202,44,201,47,209,54,210,53);	//right arm
		quad(198,54,201,55,191,64,190,63);	//left leg
		quad(202,54,201,57,209,64,210,63);	//right leg
fill(1,233,1);	//bright green
	ellipse(200,40,15,10);	//head
	circle(190.5,53.5,2);	//left hand
	circle(209.5,53,2);		//right hand
	circle(190.5,63.5,2);	//left foot
	circle(209.5,63.5,2);	//right foot
fill(0);	//black
	ellipse(196,40,3);	//left eye
	ellipse(200,38,3);	//middle eye
	ellipse(204,40,3);	//right eye
	arc(200,42,3,3,0,PI); 	//smile
fill(134,227,246,150);	//opaque light blue
	ellipse(200,40,20,13);	//helmet
fill(199,199,199);	//ligth gray
	rect(195,44,10,2);	//helmet strap

pop();
}

Leave a Reply