amui1-Project-04-String-Art – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

amui1-p4
//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.
Leave a Reply Cancel reply
