![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2017/wp-content/uploads/2020/08/stop-banner.png)
//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-04
//variables for main triangle
var trgStep = 5;
//variables for eye
var eyeStep = 2;
//variables for mini triangle
var trgStepmin = 3;
//variables for left wing
var winStep = 4;
function setup() {
createCanvas(400,300);
}
function draw() {
background(0);
//maintriangle
stroke(255);
strokeWeight(2);
//leftside
for (var midX = 150; midX <= 166; midX += trgStep) {
line(60,230,midX,50);
}
//rightside
for (var midX = 150; midX <= 166; midX += trgStep) {
line(midX,50,270,230);
}
//base
strokeWeight(1);
var baseXa = 60;
var baseYa = 235;
var baseXb = 270;
var baseYb = 235;
for (var i = 0; i < 3; i++) {
line(baseXa,baseYa,baseXb,baseYb);
baseXa += 3;
baseYa -= 3;
baseXb -= 3;
baseYb -= 3;
}
//eye
//outereye
stroke(255,255,0);
strokeWeight(1);
//vertical lines
//part left up
var eyeXa = 120;
var eyeYa = 190;
var eyeXb = 120;
var eyeYb = 155;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa += 3;
eyeYa -= 2;
eyeXb += 5;
}
//part right up
var eyeXa = 200;
var eyeYa = 190;
var eyeXb = 200;
var eyeYb = 155;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa -= 3;
eyeYa -= 2;
eyeXb -= 5;
}
//part left down
var eyeXa = 120;
var eyeYa = 190;
var eyeXb = 120;
var eyeYb = 220;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa += 3;
eyeYa += 2;
eyeXb += 5;
}
//part right down
var eyeXa = 200;
var eyeYa = 190;
var eyeXb = 200;
var eyeYb = 220;
for (var i = 0; i < 16; i++){
line(eyeXa,eyeYa,eyeXb,eyeYb);
eyeXa -= 3;
eyeYa += 2;
eyeXb -= 5;
}
//eyeball
var eyeXa = 155
var eyeYa = 190
var eyeXb = 160
var eyeYb = 185
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
var eyeXa = 160
var eyeYa = 190
var eyeXb = 155
var eyeYb = 185
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
var eyeXa = 160
var eyeYa = 190
var eyeXb = 155
var eyeYb = 195
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
var eyeXa = 155
var eyeYa = 190
var eyeXb = 160
var eyeYb = 195
stroke(255);
for (var i = 0; i < 5; i++) {
line(eyeXa,eyeYa,eyeXb,eyeYb)
eyeXa += eyeStep
eyeXb += eyeStep
}
//inner box
//horizontal leg
stroke(255);
strokeWeight(1);
miniXa = 120;
miniYa = 148;
miniXb = 200;
miniYb = 148;
for (var i = 0; i < 3; i++){
line(miniXa,miniYa,miniXb,miniYb);
miniXa -= 1;
miniYa += 2;
miniXb += 1;
miniYb += 2;
}
//left vertical leg
miniXa = 115;
miniYa = 150;
miniXb = 115;
miniYb = 220;
for (var i = 0; i < 3; i++){
line(miniXa,miniYa,miniXb,miniYb);
miniXa -= 2;
miniYa += 5;
miniXb -= 2;
miniYb -= 1;
}
//right vertical leg
miniXa = 205;
miniYa = 150;
miniXb = 205;
miniYb = 220;
for (var i = 0; i < 3; i++){
line(miniXa,miniYa,miniXb,miniYb);
miniXa += 2;
miniYa += 5;
miniXb += 2;
miniYb -= 1;
}
//rainbow design
//left side lines
for (var leftWinX = -20; leftWinX <= 15; leftWinX += winStep){
line(leftWinX,165,150,108);
}
//horizontal
horizWinX = 180;
horizWinY = 80
for (var i = 0; i < 11; i++){
line(150,108,horizWinX,horizWinY);
horizWinX += 3;
horizWinY += 5;
}
//actual rainbow
//red rainbow lines
stroke(255,0,0);
rainXa = 180;
rainYa = 80;
rainXb = 400;
rainYb = 75;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//orange
stroke(255,140,0);
rainXa = 183;
rainYa = 85;
rainXb = 400;
rainYb = 90;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//yellow
stroke(255,255,0);
rainXa = 186;
rainYa = 90;
rainXb = 400;
rainYb = 106;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//darkgreen
stroke(0,128,0);
rainXa = 189;
rainYa = 95;
rainXb = 400;
rainYb = 122;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//lightgreen
stroke(124,252,0);
rainXa = 192;
rainYa = 100;
rainXb = 400;
rainYb = 138;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//darkblue
stroke(0,0,255);
rainXa = 195;
rainYa = 105;
rainXb = 400;
rainYb = 154;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//lightblue
stroke(0,191,255);
rainXa = 198;
rainYa = 110;
rainXb = 400;
rainYb = 170;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//darkpurple
stroke(128,0,128);
rainXa = 201;
rainYa = 115;
rainXb = 400;
rainYb = 186;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//lightpurple
stroke(186,85,211);
rainXa = 204;
rainYa = 120;
rainXb = 400;
rainYb = 202;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
//pink
stroke(255,192,203);
rainXa = 207;
rainYa = 125;
rainXb = 400;
rainYb = 218;
for (var i = 0; i <8; i++){
line(rainXa,rainYa,rainXb,rainYb);
rainYb += 2;
}
}
Conceptually, this project was pretty difficult to me. I was inspired by Pink Floyd’s “Dark Side of the Moon”. It was difficult for me to figure out the points and the way in which the curve would change from loop to loop. I started off by sketching an idea, just like the 7th grade planning sheet. I manually calculated the first few lines in a for loop, and then I figured out a pattern. In the future, I would try to improve the middle section of the triangle to represent an eye better.