NatalieKS-Project-04

When I saw the project, I was reminded of the 2013 Great Gatsby movie poster, and I wanted to make a version of it using the string art. I thought this project was going to be a huge difficulty for me, but after really looking at it and asking tutors, I got a better grasp of the assignment and was able to make better guesses at figuring coordinates out. I tried to use the x1,y1/x2, y2 concept listed in the instructions as well as the x1 += x1StepSize, because I figured it was probably the simplest way to help generate the “curves,” so I could focus more on creating a better design.

sketch2

//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-04-StringArt

var height = 300;
var width = 400;
//coordinates for light gold loops
var x1 = 0;
var y1 = 0;
var x1StepSize = width/20;
var y1StepSize = height/20;
//coordinates for dark gold loops
var x2 = 0;
var y2 = 0;
var x2StepSize = width/20;
var y2StepSize = height/20;
//to change from gold to silver
var colorR1 = 219;
var colorG1 = 180;
var colorB1 = 117;
var colorR2 = 183;
var colorG2 = 129;
var colorB2 = 59;

function setup() {
    createCanvas(400, 300);
    background(0);
    fill(255);
//display text
    textSize(15);
    text("The Great", 168, 135);
    textSize(50);
    text("GATSBY", 105, 180);
}

function draw() {
    stroke(colorR2, colorG2, colorB2);
//change the colors from gold to silver
    if (mouseX <= height/2) {
        colorR2 = 183;
        colorG2 = 129;
        colorB2 = 59;
    }
    else {
        colorR2 = 109;
        colorG2 = 111;
        colorB2 = 106;
    }
    strokeWeight(10);
//how far apart each line is from each other
    var spacing = 20;
//lines down left
    for (var x = 65; x <= 115; x += spacing) {
        line(x, 0, x, height/2.3);
    }
//lines down right
    for (var x3 = 300; x3 <= 350; x3 += spacing) {
        line(x3, 0, x3, height/2.3);
    }
//lines across left
    line(0, height/2.3, width/4, height/2.3);
    line(0, height/2.6, width/4, height/2.6);
    line(0, height/3, width/4, height/3);
//lines across right
    line(width - width/4.2, height/2.3, width, height/2.3);
    line(width - width/4.2, height/2.6, width, height/2.6);
    line(width - width/4.2, height/3, width, height/3);
//lines going down left
    for (var x4 = 45; x4 <= 102; x4 += spacing) {
        line(x4, height/2.3, x4, height);
    }
//lines going down right
    for (var x5 = 320; x5 <= 360; x5 += spacing) {
        line(x5, height/2.3, x5, height);
    }
//light gold set of "curves"/loops
    for (var i = 0; i <= 400; i++) {
        strokeWeight(1);
        stroke(colorR1, colorG1, colorB1);
        line(0, y1, x1, height);
        line(0, height - y1, x1, 0);
        line(width, y1, width - x1, height);
        line(width, height - y1, width - x1, 0);
        x1 += x1StepSize;
        y1 += y1StepSize;

    }
//dark gold set of "curves"/loops
    for (var j = 0; j <= 400; j++) {
        strokeWeight(1);
        stroke(colorR2, colorG2, colorB2);
        line(0, y2, x2, height);
        line(0, height - y2, x2, 0);
        line(width, y2, width - x2, height);
        line(width, height - y2, width - x2, 0);
        x2 += 1.3*x2StepSize;
        y2 += 1.5*y2StepSize;

    }
//top triangle
    for (var k = 0; k < 5; k++) {
        stroke(colorR1, colorG1, colorB1);
        line(width/2, 110, k * 20, 50);
        line(width/2, 110, 60 + k * 20 , 50);
        line(width/2, 110, 120 + k * 20, 50);
        line(width/2, 110, 180 + k * 20, 50);
        line(width/2, 110, 240 + k * 20, 50);
        line(width/2, 110, 300 + k * 20, 50);
    }
//bottom triangle
    for (var l = 0; l < 5; l++) {
        stroke(colorR1, colorG1, colorB1);
        line(width/2, height - 110, l * 20, height - 50);
        line(width/2, height - 110, 60 + l * 20 , height - 50);
        line(width/2, height - 110, 120 + l * 20, height - 50);
        line(width/2, height - 110, 180 + l * 20, height - 50);
        line(width/2, height - 110, 240 + l * 20, height - 50);
        line(width/2, height - 110, 300 + l * 20, height - 50);
    }
    if (mouseX <= width/2) {
        colorR1 = 219;
        colorG1 = 170;
        colorB1 = 91;
    }
    else {
        colorR1 = 180;
        colorG1 = 177;
        colorB1 = 172;
    }
}

A really rough sketch of my initial idea. It ended up changing, because I felt like it originally looked too busy. I did have help from the CS pedagogy tutors in trying to figure out how to approach this assignment.