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();
}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2021/09/stop-banner.png)
