![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2023/09/stop-banner.png)
Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!
sketchDownload
// Ilia Urgen
// Section B
let shape_width = 90;
let shape_height = 160;
// I created 4 different designs, which I named Quad 1, Quad 2, Quad 3, and Quad 4.
// Each design is stored in a separate function below.
function setup() {
createCanvas (600, 600);
background (200);
}
function draw() {
// Quad 1 Coordinates
let x1 = 60;
let y1 = 60;
let x2 = 180;
let y2 = 220;
// Quad 2 Coordinates
let x3 = 60;
let y3 = 220;
let x4 = 180;
let y4 = 60;
// Quad 3 Coordinates
let x5 = 0;
let y5 = -20;
let x6 = 120;
let y6 = 140;
// Quad 4 Coordinates
let x7 = 0;
let y7 = 140;
let x8 = 120;
let y8 = -20;
let row_increase = 240;
let col_increase = 320;
background (210);
// Prints outer Quad 1
for (var rowA = 1; rowA <= 10; rowA += 1) {
for (var colA = 1; colA <= 10; colA += 1) {
quad_2 (x1, y1);
y1 += col_increase;
}
x1 += row_increase;
y1 = 60;
}
// Prints inner Quad 1
for (var rowB = 1; rowB <= 10; rowB += 1) {
for (var colB = 1; colB <= 10; colB += 1) {
quad_2 (x2, y2);
y2 += col_increase;
}
x2 += row_increase;
y2 = 220;
}
// Prints outer Quad 2
for (var rowC = 1; rowC <= 10; rowC += 1) {
for (var colC = 1; colC <= 10; colC += 1) {
quad_1 (x3, y3);
y3 += col_increase;
}
x3 += row_increase;
y3 = 220;
}
// Prints inner Quad 2
for (var rowD = 1; rowD <= 10; rowD += 1) {
for (var colD = 1; colD <= 10; colD += 1) {
quad_1 (x4, y4);
y4 += col_increase;
}
x4 += row_increase;
y4 = 60;
}
// Prints outer Quad 3
for (var rowE = 1; rowE <= 10; rowE += 1) {
for (var colE = 1; colE <= 10; colE += 1) {
quad_3 (x5, y5);
y5 += col_increase;
}
x5 += row_increase;
y5 = -20;
}
// Prints inner Quad 3
for (var rowE = 1; rowE <= 10; rowE += 1) {
for (var colE = 1; colE <= 10; colE += 1) {
quad_3 (x6, y6);
y6 += col_increase;
}
x6 += row_increase;
y6 = 140;
}
// Prints outer Quad 4
for (var rowF = 1; rowF <= 10; rowF += 1) {
for (var colF = 1; colF <= 10; colF += 1) {
quad_4 (x7, y7);
y7 += col_increase;
}
x7 += row_increase;
y7 = 140;
}
// Prints inner Quad 4
for (var rowG = 1; rowG <= 10; rowG += 1) {
for (var colG = 1; colG <= 10; colG += 1) {
quad_4 (x8, y8);
y8 += col_increase;
}
x8 += row_increase;
y8 = -20;
}
noLoop();
}
function quad_1 (x1, y1) {
noStroke();
fill (96,149,130);
quad (x1 - shape_width/2, y1, x1 - shape_width/3, y1, x1, y1 - shape_height/2, x1 - shape_width/6, y1 - shape_height/2);
quad (x1 - shape_width/2, y1, x1 - shape_width/3, y1, x1, y1 + shape_height/2, x1 - shape_width/6, y1 + shape_height/2);
quad (x1 + shape_width/2, y1, x1 + shape_width/3, y1, x1, y1 + shape_height/2, x1 + shape_width/6, y1 + shape_height/2);
quad (x1 + shape_width/2, y1, x1 + shape_width/3, y1, x1, y1 - shape_height/2, x1 + shape_width/6, y1 - shape_height/2);
fill (114,102,78);
quad (x1 - shape_width/3, y1, x1 - shape_width/3 - 5, y1, x1 - 5, y1 - shape_height/2, x1, y1 - shape_height/2);
quad (x1 - shape_width/3, y1, x1 - shape_width/3 - 5, y1, x1 - 5, y1 + shape_height/2, x1, y1 + shape_height/2);
quad (x1 + shape_width/3, y1, x1 + shape_width/3 + 5, y1, x1 + 5, y1 + shape_height/2, x1, y1 + shape_height/2);
quad (x1 + shape_width/3, y1, x1 + shape_width/3 + 5, y1, x1 + 5, y1 - shape_height/2, x1, y1 - shape_height/2);
fill (53,98,115);
quad (x1 - shape_width/3, y1, x1, y1 - shape_height/2, x1 + shape_width/3, y1, x1, y1 + shape_height/2);
fill (32,64,60);
quad (x1 - shape_width/4.5, y1, x1, y1 - shape_height/3, x1 + shape_width/4.5, y1, x1, y1 + shape_height/3);
stroke(255);
strokeWeight(1);
line (x1 - shape_width/10, y1, x1 + shape_width/10, y1);
line (x1, y1 - shape_height/10, x1, y1 + shape_height/10);
line (x1 - shape_width/20, y1 - shape_height/20, x1 + shape_width/20, y1 + shape_height/20);
line (x1 + shape_width/20, y1 - shape_height/20, x1 - shape_width/20, y1 + shape_height/20);
circle (x1 - shape_width/10, y1, 3);
circle (x1 + shape_width/10, y1, 3);
circle (x1, y1 - shape_height/10, 3);
circle (x1, y1 + shape_height/10, 3);
circle (x1 - shape_width/20, y1 - shape_height/20, 3);
circle (x1 + shape_width/20, y1 + shape_height/20, 3);
circle (x1 + shape_width/20, y1 - shape_height/20, 3);
circle (x1 - shape_width/20, y1 + shape_height/20, 3);
}
function quad_2 (x3, y3) {
noStroke();
fill (53,98,115);
quad (x3 - shape_width/2, y3, x3 - shape_width/3, y3, x3, y3 - shape_height/2, x3 - shape_width/6, y3 - shape_height/2);
quad (x3 - shape_width/2, y3, x3 - shape_width/3, y3, x3, y3 + shape_height/2, x3 - shape_width/6, y3 + shape_height/2);
quad (x3 + shape_width/2, y3, x3 + shape_width/3, y3, x3, y3 + shape_height/2, x3 + shape_width/6, y3 + shape_height/2);
quad (x3 + shape_width/2, y3, x3 + shape_width/3, y3, x3, y3 - shape_height/2, x3 + shape_width/6, y3 - shape_height/2);
fill (114,102,78);
quad (x3 - shape_width/3, y3, x3 - shape_width/3 - 5, y3, x3 - 5, y3 - shape_height/2, x3, y3 - shape_height/2);
quad (x3 - shape_width/3, y3, x3 - shape_width/3 - 5, y3, x3 - 5, y3 + shape_height/2, x3, y3 + shape_height/2);
quad (x3 + shape_width/3, y3, x3 + shape_width/3 + 5, y3, x3 + 5, y3 + shape_height/2, x3, y3 + shape_height/2);
quad (x3 + shape_width/3, y3, x3 + shape_width/3 + 5, y3, x3 + 5, y3 - shape_height/2, x3, y3 - shape_height/2);
fill (96,149,130);
quad (x3 - shape_width/3, y3, x3, y3 - shape_height/2, x3 + shape_width/3, y3, x3, y3 + shape_height/2);
fill (255);
quad (x3 - shape_width/4.5, y3, x3, y3 - shape_height/3, x3 + shape_width/4.5, y3, x3, y3 + shape_height/3);
stroke(32,64,60);
strokeWeight(1);
line (x3 - shape_width/10, y3, x3 + shape_width/10, y3);
line (x3, y3 - shape_height/10, x3, y3 + shape_height/10);
line (x3 - shape_width/20, y3 - shape_height/20, x3 + shape_width/20, y3 + shape_height/20);
line (x3 + shape_width/20, y3 - shape_height/20, x3 - shape_width/20, y3 + shape_height/20);
circle (x3 - shape_width/10, y3, 4);
circle (x3 + shape_width/10, y3, 4);
circle (x3, y3 - shape_height/10, 4);
circle (x3, y3 + shape_height/10, 4);
circle (x3 - shape_width/20, y3 - shape_height/20, 4);
circle (x3 + shape_width/20, y3 + shape_height/20, 4);
circle (x3 + shape_width/20, y3 - shape_height/20, 4);
circle (x3 - shape_width/20, y3 + shape_height/20, 4);
}
function quad_3 (x5, y5) {
noStroke();
fill (96,149,130);
quad (x5 - shape_width/2, y5, x5 - shape_width/3, y5, x5, y5 - shape_height/2, x5 - shape_width/6, y5 - shape_height/2);
quad (x5 + shape_width/2, y5, x5 + shape_width/3, y5, x5, y5 + shape_height/2, x5 + shape_width/6, y5 + shape_height/2);
fill (53,98,115);
quad (x5 - shape_width/2, y5, x5 - shape_width/3, y5, x5, y5 + shape_height/2, x5 - shape_width/6, y5 + shape_height/2);
quad (x5 + shape_width/2, y5, x5 + shape_width/3, y5, x5, y5 - shape_height/2, x5 + shape_width/6, y5 - shape_height/2);
fill (253,217,181);
quad (x5 - shape_width/3, y5, x5 - shape_width/3 - 5, y5, x5 - 5, y5 - shape_height/2, x5, y5 - shape_height/2);
quad (x5 - shape_width/3, y5, x5 - shape_width/3 - 5, y5, x5 - 5, y5 + shape_height/2, x5, y5 + shape_height/2);
quad (x5 + shape_width/3, y5, x5 + shape_width/3 + 5, y5, x5 + 5, y5 + shape_height/2, x5, y5 + shape_height/2);
quad (x5 + shape_width/3, y5, x5 + shape_width/3 + 5, y5, x5 + 5, y5 - shape_height/2, x5, y5 - shape_height/2);
stroke (32,64,60);
strokeWeight (3);
fill (205,91,69);
quad (x5 - shape_width/3, y5, x5, y5 - shape_height/2, x5 + shape_width/3, y5, x5, y5 + shape_height/2);
strokeWeight (1.5);
line (x5 - shape_width/10, y5, x5 + shape_width/10, y5);
line (x5, y5 - shape_height/10, x5, y5 + shape_height/10);
line (x5 - shape_width/20, y5 - shape_height/20, x5 + shape_width/20, y5 + shape_height/20);
line (x5 + shape_width/20, y5 - shape_height/20, x5 - shape_width/20, y5 + shape_height/20);
circle (x5 - shape_width/10, y5, 4);
circle (x5 + shape_width/10, y5, 4);
circle (x5, y5 - shape_height/10, 4);
circle (x5, y5 + shape_height/10, 4);
circle (x5 - shape_width/20, y5 - shape_height/20, 4);
circle (x5 + shape_width/20, y5 + shape_height/20, 4);
circle (x5 + shape_width/20, y5 - shape_height/20, 4);
circle (x5 - shape_width/20, y5 + shape_height/20, 4);
}
function quad_4 (x7, y7) {
noStroke();
fill (53,98,115);
quad (x7 - shape_width/2, y7, x7 - shape_width/3, y7, x7, y7 - shape_height/2, x7 - shape_width/6, y7 - shape_height/2);
quad (x7 + shape_width/2, y7, x7 + shape_width/3, y7, x7, y7 + shape_height/2, x7 + shape_width/6, y7 + shape_height/2);
fill (96,149,130);
quad (x7 - shape_width/2, y7, x7 - shape_width/3, y7, x7, y7 + shape_height/2, x7 - shape_width/6, y7 + shape_height/2);
quad (x7 + shape_width/2, y7, x7 + shape_width/3, y7, x7, y7 - shape_height/2, x7 + shape_width/6, y7 - shape_height/2);
fill (205,91,69);
quad (x7 - shape_width/3, y7, x7 - shape_width/3 - 5, y7, x7 - 5, y7 - shape_height/2, x7, y7 - shape_height/2);
quad (x7 + shape_width/3, y7, x7 + shape_width/3 + 5, y7, x7 + 5, y7 + shape_height/2, x7, y7 + shape_height/2);
quad (x7 - shape_width/3, y7, x7 - shape_width/3 - 5, y7, x7 - 5, y7 + shape_height/2, x7, y7 + shape_height/2);
quad (x7 + shape_width/3, y7, x7 + shape_width/3 + 5, y7, x7 + 5, y7 - shape_height/2, x7, y7 - shape_height/2);
stroke (32,64,60);
strokeWeight (3);
fill (253,217,181);
quad (x7 - shape_width/3, y7, x7, y7 - shape_height/2, x7 + shape_width/3, y7, x7, y7 + shape_height/2);
strokeWeight (1.5);
line (x7 - shape_width/10, y7, x7 + shape_width/10, y7);
line (x7, y7 - shape_height/10, x7, y7 + shape_height/10);
line (x7 - shape_width/20, y7 - shape_height/20, x7 + shape_width/20, y7 + shape_height/20);
line (x7 + shape_width/20, y7 - shape_height/20, x7 - shape_width/20, y7 + shape_height/20);
circle (x7 - shape_width/10, y7, 4);
circle (x7 + shape_width/10, y7, 4);
circle (x7, y7 - shape_height/10, 4);
circle (x7, y7 + shape_height/10, 4);
circle (x7 - shape_width/20, y7 - shape_height/20, 4);
circle (x7 + shape_width/20, y7 + shape_height/20, 4);
circle (x7 + shape_width/20, y7 - shape_height/20, 4);
circle (x7 - shape_width/20, y7 + shape_height/20, 4);
}