![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/09/stop-banner.png)
sketchDownload
var dx1;
var dy1;
var dx2;
var dy2;
var bx1;
var by1;
var bx2;
var by2;
var cx1;
var cy1;
var cx2;
var cy2;
var ax1;
var ay1;
var ax2;
var ay2;
var numLines = 20;
function setup() {
createCanvas(400, 300);
background(200);
line(50, 50, 150, 300);
line(300, 300, 350, 100);
dx1 = (100-0)/numLines;
dy1 = (50-50)/numLines;
dx2 = (100-100)/numLines;
dy2 = (0-50)/numLines;
bx1 = (100-0)/numLines;
by1 = (50-50)/numLines;
bx2 = (100-100)/numLines;
by2 = (100-50)/numLines;
cx1 = (100-200)/numLines;
cy1 = (50-50)/numLines;
cx2 = (100-100)/numLines;
cy2 = (100-50)/numLines;
ax1 = (100-200)/numLines;
ay1 = (50-50)/numLines;
ax2 = (100-100)/numLines;
ay2 = (0-50)/numLines;
}
function draw() {
noStroke();
fill(255,255,0);
rect(0, 0, 400, 300);
//top left black lines
stroke(0);
for (var i = 2; i < width/2; i += 4) {
if (i < 80 || i > 130) {
line(i, i * .7 - 20, i, i - 400);
}
noLoop();
}
for (var i = 0; i < width/2; i += 4) {
if (i < 80 || i > 130) {
line(i, i + 400, i, i * .7 + 40);
}
noLoop();
}
for (var i = 0; i < width/2; i += 4) {
if (i > 80 & i < 130) {
line(i, i *.7 -20, i, i * .7 +40);
}
noLoop();
}
//bottom right black lines
for (var i = 200; i < width; i += 4) {
if (i < 280 || i > 330) {
line(i, i *.7 -20, i, i * .7 +40);
}
noLoop();
}
for (var i = 200; i < width; i += 4) {
if (i > 280 & i < 330) {
line(i, i * .7 - 20, i, i - 400);
}
noLoop();
}
for (var i = 200; i < width; i += 4) {
if (i > 280 & i < 330) {
line(i, i + 400, i, i * .7 + 40);
}
noLoop();
}
noStroke();
fill(255, 0, 0);
rect(0, 150, 200, 150); //red rectangle bottom left
rect(200, 0, 200,150); //red rectangle top right
fill(255);
rect(0, 150, 100, 75); //white rectangles bottom left
rect(100, 225, 100, 75);
rect(200, 0, 100, 75);//white rectangles top right
rect(300, 75, 100, 75);
push();
noFill();
stroke(255);
//bottom right ellipses and arcs
ellipse(107, 175, 15, 15);
arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
ellipse(28, 233, 15, 15);
arc(20, 225, 15, 15, radians(0), radians(180), CHORD);
ellipse(92, 275, 15, 15);
arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);
ellipse(174, 217, 15, 15);
arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
stroke(255,0,0);
ellipse(92, 175, 15, 15);
arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);
ellipse(28, 217, 15, 15);
arc(20, 225, 15, 15, radians(180), radians(0), CHORD);
ellipse(107, 275, 15, 15);
arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
ellipse(174, 233, 15, 15);
arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
//top right elliplses and arcs
push;
noFill();
stroke(255);
translate(200, -150);
ellipse(107, 175, 15, 15);
arc(100, 167, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
ellipse(28, 233, 15, 15);
arc(20, 225, 15, 15, radians(0), radians(180), CHORD);
ellipse(92, 275, 15, 15);
arc(100, 283, 15, 15, PI / 2, 3 * PI / 2, CHORD);
ellipse(174, 217, 15, 15);
arc(182, 225, 15, 15, radians(180), radians(0), CHORD);
stroke(255,0,0);
ellipse(92, 175, 15, 15);
arc(100, 167, 15, 15, PI / 2, 3 * PI / 2, CHORD);
ellipse(28, 217, 15, 15);
arc(20, 225, 15, 15, radians(180), radians(0), CHORD);
ellipse(107, 275, 15, 15);
arc(100, 283, 15, 15, -PI / 2, 3 * -PI / 2, CHORD);
ellipse(174, 233, 15, 15);
arc(182, 225, 15, 15, radians(0), radians(180), CHORD);
pop();
//bottom left red bend1
push();
translate(0, 175);
stroke(255, 0, 0);
var x1 = 0;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
noLoop();
}
pop();
//bottom left white bend1
push();
translate(0, 175);
stroke(255);
var x1 = 0;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += bx1;
y1 += by1;
x2 += bx2;
y2 += by2;
noLoop();
}
pop();
//bottom left red bend2
push();
translate(0, 175);
stroke(255, 0, 0);
var x1 = 200;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += cx1;
y1 += cy1;
x2 += cx2;
y2 += cy2;
noLoop();
}
pop();
//bottom left white bend2
push();
translate(0, 175);
stroke(255);
var x1 = 200;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += ax1;
y1 += ay1;
x2 += ax2;
y2 += ay2;
noLoop();
}
pop();
//next one
//top right red bend1
push();
translate(200, 25);
stroke(255, 0, 0);
var x1 = 0;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 += dy1;
x2 += dx2;
y2 += dy2;
noLoop();
}
pop();
//top right white bend1
push();
translate(200, 25);
stroke(255);
var x1 = 0;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += bx1;
y1 += by1;
x2 += bx2;
y2 += by2;
noLoop();
}
pop();
//top right red bend2
push();
translate(200, 25);
stroke(255, 0, 0);
var x1 = 200;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += cx1;
y1 += cy1;
x2 += cx2;
y2 += cy2;
noLoop();
}
pop();
//top right white bend2
push();
translate(200, 25);
stroke(255);
var x1 = 200;
var y1 = 50;
var x2 = 100;
var y2 = 50;
for (var i = 0; i <= numLines; i += 1) {
line(x1, y1, x2, y2);
x1 += ax1;
y1 += ay1;
x2 += ax2;
y2 += ay2;
noLoop();
}
pop();
}