Category: Uncategorized

lingfanj-04

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-04


var dx; //x coordinate for points on curve
var dy; //y coordinate for points on curve
var circleDiameter; //diameter of the center circle


function setup(){
    createCanvas (400, 300);

}

function draw(){
    background(0);
    angleMode(DEGREES);
    strokeWeight(0.1); //set a lineweight for the bottom curves
    circleDiameter = 75;


    stroke(255,104,107); //red lines
    for (var x = 0; x < 95; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect first quarter of the points on the circle with the points on the top
            for (var i = 0; i < 400; i += 5){
            line(i,0,dx,dy);  
        }
    }
    strokeWeight(0.08);
    stroke(27,179,244); //light blue lines
    for (var x = 90; x < 275; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect half quarter of the points on the circle with the points on the left
            for (var i = 0; i < 300; i += 5){
            line(0,i,dx,dy);  
        }
    }
    strokeWeight(0.05);
    stroke(0,40,255); // dark blue lines
    for (var x = 180; x < 275; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect quarter of the points on the circle with the points on the bottom
            for (var i = 0; i < 400; i += 5){
            line(i,300,dx,dy);  
        }
    }
    stroke(143,113,255);
    strokeWeight(0.04); // purple lines
    for (var x = 270; x < 455; x += 5) {
        dx = 200 + (circleDiameter * cos(x));
        dy = 150 + (circleDiameter * sin(x));
        //connect half quarter of the points on the circle with the points on the right
            for (var i = 0; i < 300; i += 5){
            line(400,i,dx,dy);  
        }
    }

    noLoop();
}

In this project, I had some difficulties to picture the final form at first. However, after looking through some of the string art examples, I became particularly interested in the circle from. Different from architectural modeling software, you cannot evaluate curves and find points on them. Therefore, the coordinates of the points that form a circle gave me a little bit of trouble. After understanding how “cos” and “sin” could help form it, here is the final result.

atreu – project04

//Austin Treu
//atreu
//Project 04
//Section C

var x1, y1, x2, y2;

function setup() {
    createCanvas(400, 300);
    background(0);

    //for loop to generate points and draw lines
    for(var i = 0; i < 100; i++){
        //new points
        x1 = lerp(width,0, i/100);
        y1 = lerp(0,height, i/100);
        x2 = lerp(0,width, i/50);
        y2 = lerp(height,0, i/50);
        //draw red lines
        stroke(255, 0, 50);
        line(x1, height/i, 0, y1);
        line(width-x1, height/i, width,y1);

        //generate points
        x1 = lerp(width/2,0, i/100);
        y1 = lerp(height/2,0, i/100);
        x2 = lerp(width/2,0, i/50);
        y2 = lerp(height,0, i/50);
        //draw blue lines
        stroke(50, 0, 255);
        line(x1, y1, x2, y2);
        line(x2, y1, x1, y2);
        line(width-x1, y1, width-x2, y2);
        line(width-x2, y1, width-x1, y2)

        //generate new points
        x1 = lerp(width/i,width, i/100);
        y1 = lerp(height/i,height, i/100);
        x2 = lerp(0,width, i/75);
        y2 = lerp(0,height, i/75);
        //draw yellow lines
        stroke(175, 150, 0);
        line(x2, y2, x1, height);
        line(width-x2, y2, width-x1, height);

        //new points
        x1 = lerp(0,width/2, i/100);
        y1 = lerp(0,height/2, i/100);
        x2 = lerp(0,width-width/7.5, i/200);
        y2 = lerp(0,height/2, i/200);
        //draw green lines
        stroke(0, 255, 150);
        line(x2, y2, x1, y1);
        line(width-x2, y2, width-x1, y1);
    }
}

Learning how to properly utilize lerp() was an interesting process to experiment with, as it offered a huge variety of different options once I understood. I spent the time I worked on this completely focused on making it symmetrical, which changed my focus throughout the project.