Category: Project-04-String-Art

Project-04: String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 100;//number of lines

function setup() {
    createCanvas(400, 300);
    background(158,216,238);
}

function draw() {
    stroke("blue");
    line(20, 30, 300, 280);//first line
    line(350, 300, 400, 0);//second line
    dx1 = (300-20)/numLines;//x coordinate on the first line
    dy1 = (280-30)/numLines;//y coordinate on the first line
    dx2 = (400-350)/numLines;//x coordinate on the second line 
    dy2 = (0-300)/numLines;//y coordinate on the second line

    var x1 = 20;
    var y1 = 30;
    var x2 = 350;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);//150 lines between the 2 lines
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }


    line(0, 0, 50, 400);//thrid line
    line(100,250,380, 30);//fourth line
    dx3 = 50/numLines;//x coordinate on the third line
    dy3 = 400/numLines;//y coordinate on the third line
    dx4 = (380-100)/numLines;//x coordinate on the fourth line 
    dy4 = (30-250)/numLines;//y coordinate on the fourth line

    var x3 = 0;
    var y3 = 0;
    var x4 = 100;
    var y4 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        line(x3, y3, x4, y4);//150 lines between the 2 lines
        x3 += dx3;
        y3 += dy3;
        x4 += dx4;
        y4 += dy4;
    }


    stroke(29,169,200);
    line(50, 200, 300, 300);//5th line
    line(360, 300, 400, 100);//6th line
    dx5 = (300-50)/numLines;//x coordinate on the 5th line
    dy5 = (300-200)/numLines;//y coordinate on the 5th line
    dx6 = (400-360)/numLines;//x coordinate on the 6th line 
    dy6 = (100-300)/numLines;//y coordinate on the 6th line

    var x5 = 50;
    var y5 = 200;
    var x6 = 360;
    var y6 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x5, y5, x6, y6);//150 lines between the 2 lines
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }

    noLoop();
}

I created an abstract image of waves using the technique of string art. It captures the essence of ocean waves and gives the audience a feeling of fluidity.

String Art Bike

I started this project because I was inspired by the spokes on the bike. They looked like something that would lend itself to string art. After that, I wanted to make it look like the bike was moving so I had the positions of the spokes change and added the cactus in the back. Additionally, the color of the sky changes over time.

sketch
//Nakshatra Menon
//Section C

function setup() {
    createCanvas(400, 300);
    background(200);
}

var bikeWheel = 50;
var heightGround = 250;
var wheel = 1
var numLines = 10
var color3 = 100
var cactusX = 500
var cactusY = 200

function draw() {
    background(246, 235, 216);
    var skyX = 0
    var skyX2 = 600
    var skyY2 = 125 
    for (var skyY = 0; skyY<250; skyY+= 8){           //drawing the lines for sky 
        strokeWeight(.5);
        stroke(71, 61, color3)
        line(skyX, skyY, skyX2, skyY2);
    }

    var x1 = 0;
    var y1 = 300;
    var x2 = 400;
    var y2 = 250;
    var y3 = 275
    //ground 
    for (var y1=300; y1>=250; y1+=-2) {               //ground right up 
        stroke(159, 135, 94);
        strokeWeight(1); 
        line(x1, y1, x2, y2);
    }
    for (var y2; y2<= 300; y2 +=2){     //ground left up 
        stroke(82, 66, 38);
        strokeWeight(1); 
        line(x1, y1, x2, y2);
    }
    for(var y3 = 275; y3 <= 300; y3 +=2){     //ground across 
        stroke(198, 184, 153);
        line(x1, y3, x2, y3);
    }
    //cactus
    fill(53, 68, 52);
    ellipse(cactusX-20, cactusY, 35, 15);       // left
    ellipse(cactusX+20, cactusY-20, 45, 15);   // right arm
    ellipse(cactusX-35, cactusY-12, 10, 25); // top left 
    ellipse(cactusX, cactusY, 20, 100);     //main 
    ellipse(cactusX+40, cactusY-30, 5, 15);  //right top 

    // bike wheel arcs 
    noFill();
    strokeWeight(7);
    stroke(115, 45, 4);
    arc(100, heightGround-bikeWheel-5, 2*bikeWheel, 2*bikeWheel, radians(190), radians(0));   // arc on left tire 
    arc(300, heightGround-bikeWheel-5, 2*bikeWheel, 2*bikeWheel, radians(190), radians(0));   //arc on right tire  
    // bike from right wheel   
    push();
    translate(300, heightGround-bikeWheel);             //moving wheel to correct place
    rotate(radians(-163))       // rotating line 9 degrees evertime it draws a new line
    line(0,0,60,bikeWheel+45);  
    line(50, bikeWheel+45, 70, bikeWheel+55 )     // far handle              // drawing vertical line 
    line(60, bikeWheel+45,80, bikeWheel+45)       // close handle 
    pop();
    // bike from left wheel   
    push();
    translate(100, heightGround-bikeWheel);             //moving origin to correct place
    rotate(radians(-163))       // rotating lines
    line(-60,bikeWheel-30,-150,bikeWheel+70);          // across
    line(0,0,-60,bikeWheel-30);           // line to the line holding seat                                       // drawing vertical line 
    line(-60, bikeWheel-30, -20, 90)      // line holding up seat
    push();
    rotate(radians(-30));
    ellipse(-60, 70, 60, 6);
    pop();
    line(0,0,-30,bikeWheel+15);           // line 2 to the line holding seat
    line(-30,bikeWheel+15, -150, bikeWheel+70);    //across 2
    pop(); 

    // bike wheel left 
    if(wheel <= 1){
        for(var i=0; i<4*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(100, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/2)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }
    if ( wheel <= 2 & wheel > 1){
        for( var i=0; i<6*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(100, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/3)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }

    // bike wheel right
    if(wheel <= 1){
        for(var i=0; i<4*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(300, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/2)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }
    if ( wheel <= 2 & wheel > 1){
        for( var i=0; i<6*numLines; i += 1){          // how many times it runs (4*numlines to get it to 360)
            stroke(64, 38, 22);                          // shade of brown
            strokeWeight(.5); 
            push();
            translate(300, heightGround-bikeWheel);             //moving wheel to correct place
            rotate(radians((i/3)*180/numLines))       // rotating line 9 degrees evertime it draws a new line
            line(0,0,0,bikeWheel);                    // drawing vertical line 
            pop();
        }
    }

    //bike tire left 
    push();
    noFill();
    strokeWeight(4);
    stroke(64, 38, 22)
    translate(100, heightGround-bikeWheel);
    circle(0,0,2*bikeWheel);                      // drawing the tire 
    pop();
    //bike tire right 
    push();
    noFill();
    strokeWeight(4);
    stroke(64, 38, 22)
    translate(300, heightGround-bikeWheel);
    circle(0,0,2*bikeWheel);                       
    pop();

    wheel += .1                                   // wheels move 
    if (wheel > 2){
        wheel = 0;
    }

    color3 += .5                                  // color of sky changes 
    if (color3 > 300){
        color3 = 100
    }

    cactusX += -5                                // cactus moves 
    if (cactusX < -100){
        cactusX = 500
    }
}

anabelle’s project 04

sketch

Here’s my project for the week — this has been the most painful one so far. It’s vaguely based off of Rainbow Road from Mario Kart, so enjoy <3

let numLines; 

let expandLeft;
let expandRight;

let moveX;
let moveY;

let lineExpand;

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

function draw() {
    background(0, 0, 56);

    stroke(255); // circle
    lineExpand = (constrain(mouseY, 10, 400));
    for(i = 0; i <= 100; i +=1 ) {
        push();
        translate(width/2, height/2);
        rotate(radians(10*i));
        line(0, lineExpand, 0, -lineExpand);
        pop();
    }

    stroke(188, 13, 88); // red
    crossHatch(0, 290, 150, 200, 170, 200, 200, 0, false);

    stroke(254, 161, 43); // orange
    crossHatch(5, 290, 170, 220, 190, 220, 200, 0, false);

    stroke(248, 243, 23); // yellow 
    crossHatch(10, 290, 190, 250, 210, 250, 200, 0, false);

    stroke(247, 89, 252); // purple 
    crossHatch(390, 290, 250, 200, 230, 200, 200, 0, false);

    stroke(79, 134, 239); // blue
    crossHatch(395, 290, 230, 220, 210, 220, 200, 0, false);

    stroke(118, 370, 153); // green
    crossHatch(400, 290, 210, 250, 190, 250, 200, 0, false);

    stroke('magenta');
    moveX = 100;
    moveY = 100;
    chadStar(0, 0);

    stroke('yellow');
    moveX = 300;
    moveY = 200;
    chadStar(0, 0);

    stroke('pink');
    moveX = 250;
    moveY = 50;
    chadStar(0, 0);

}



function crossHatch(firstx1, firsty1, firstx2, firsty2, secondx1, secondy1, secondx2, secondy2, showLines = true) {
    if (showLines){
        line(firstx1, firsty1, firstx2, firsty2);
        line(secondx1, secondy1, secondx2, secondy2);
    } 

    let numLines = constrain(mouseX, 100, 400)/10;


    let dx1 = (firstx2 - firstx1) / numLines;
    let dy1 = (firsty2 - firsty1) / numLines;
    let dx2 = (secondx2 - secondx1) / numLines;
    let dy2 = (secondy2 - secondy1) / numLines;


    for(var i = 0; i <= numLines; i += 1) {
        line(firstx1, firsty1, secondx1, secondy1);
        firstx1 += dx1;
        firsty1 += dy1;
        secondx1 += dx2;
        secondy1 += dy2;
    }
}

function chadStar(x, y) {
    expandLeft = constrain(mouseY, 0, 300) / 50;
    expandRight = constrain(mouseY, 0, 300) / 50;

    for(i = 0; i <= 6; i += 1) {
        push();
        translate(moveX, moveY);

        rotate(radians(i*60));
        line(x, y-10, x+10, y+10);
        line(x+10, y+10, x-10, y+10);
        line(x-10, y+10, x, y-10);

        pop();
        
        x += expandLeft;
        y += expandRight;
    }
}

project 4: string art

I made my piece about flowers. I used functions to be able to place flowers wherever I want on the canvas, although there are only two right now

flower string art
// isis berymon section D
var dx;
var dy;
var numLines;


function setup() {
    createCanvas(400, 300);
    background(84, 111, 82); //green
}

function draw() {
    //center flower
    stroke(134, 190, 243); //light blue
    petal(150, 100, 250, 100, 200, 150);
    petal(250, 100, 250, 200, 200, 150);
    petal(250, 200, 150, 200, 200, 150);
    petal(150, 100, 150, 200, 200, 150);
    stroke(144, 115, 245); //light purple
    petal(125, 75, 175, 75, 200, 150);
    petal(125, 75, 125, 125, 200, 150);
    petal(225, 75, 275, 75, 200, 150);
    petal(275, 75, 275, 125, 200, 150);
    petal(275, 175, 275, 225, 200, 150);
    petal(275, 225, 225, 225, 200, 150);
    petal(175, 225, 125, 225, 200, 150);
    petal(125, 225, 125, 175, 200, 150);
    flowerCenter(200, 150);
    //right flower
    stroke(134, 190, 243); //light blue
    petal(350, 0, 400, 50, 400, 0);
    stroke(144, 115, 245); //light purple
    petal(300, -25, 350, 25, 400, 0);
    petal(375, 50, 425, 75, 400, 0);
    flowerCenter(400, 0);
    noLoop();
}

function flowerCenter(x, y) {
    stroke(245, 231, 115); //light yellow
    numLines = 50;
    for(var i = 0; i <= numLines; i++){
        push();
        translate(x, y);
        rotate(radians(i*360/numLines)) // draws lines in a circle
        line(0, 0, 0, 25);
        pop();
    }
}

function petal(x1, y1, x2, y2, centerX, centerY) {
    numLines = 10;
    dx = (x2-x1)/numLines;
    dy = (y2-y1)/numLines;
    var drawX1 = x1;
    var drawY1 = y1;
    for(var i = 0; i <= numLines; i++){
        line(drawX1, drawY1, centerX, centerY); //lines all come from center
        drawX1 += dx;
        drawY1 += dy;
    }
}

Project 04: String Art Pizza

I made a pizza, a box, and a sun. I’m not really sure where I was going with this but I ate pizza.

sketch
//Kaitlyn Chow
//kachow
//Section A

var dx1;
var dy1;
var numLines= 20;
var starLines= 8;
var angle=0;
var boxLines=40;



function setup() {
    createCanvas(400, 300);
    background(220);
    dx1= (30-50)/ numLines;
    dy1= (150-50)/ numLines;
    dyBox= (100)/ boxLines;


}

function draw() {
    //Shape 1 pizza: Lines from pizza left to the point (200, 170)
    stroke(250, 245, 202);
    line(50, 50, 30, 150);   //pizza left side
    line(30, 150, 200, 160); //pizza right bottom
    line(200, 160, 50, 50);  //pizza right top
    var x1= 50;
    var y1= 50;
    for(var p=0; p<= numLines; p+=1){
        line (x1, y1 , 200, 160);
        x1+= dx1;
        y1+= dy1;

    }
    //crust & toppings
    stroke(183, 137, 70);
    strokeWeight(5);
    line(50, 50, 30, 150);

    noStroke();
    fill(255, 0, 0);
    circle (75, 100, 20);
    circle (75+20, 140, 20);
    circle (75+20+30, 120, 20);



    //shape 2 sun: each time, line x and y position changes
    stroke(1);
    strokeWeight(1);
    var xStar= 300;
    var yStar= 50;
    for(var s=0; s<=starLines; s+=1){
        push();
        translate(300, 50);
        rotate(radians(angle));
        angle+=2
        line(s, 0, s, 50);
        pop();
    }


    //shape 3 pizza box:
    noFill();
    push();
    translate(200, 175); //location of box
    rect(0, 0, 100, 100);
    //left side(0, 0, 0, 100);
    //right side(100, 0, 100, 100);

    //box design
    stroke(78, 52, 46);
    var x1Box=0;
    var y1Box=0;
    var x2Box=100;
    var y2Box=100;
    for(var a=0; a<=boxLines; a+=1){
        line(x1Box, y1Box, x2Box, y2Box);
        y1Box+=dyBox
        y2Box-=dyBox

        //line colors
        if(a%2==1){
            stroke(78, 52, 46); //dark brown
        }
        else{
            stroke(156, 90, 5); //caramel brown
        }

    }

    pop()





}

Project-04 String Art

This is my string art. I wanted to make an eye out of strings and the eye follows the x-coordinate of the mouse. Each layer of the eye is remapped to create a 3-dimensional effect. The spiral further extends the mystical feeling the eye gives off.

sketch
//Michael Li
//Section C 
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 70;

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

}

function draw() {
    background("darkred");
    //remapped values for eyeball translation
    var tranX1 = constrain(map(mouseX, 0, 400, 120, 280), 120, 280)
    var tranX2 = constrain(map(mouseX, 0, 400, 130, 270), 130, 270)
    var tranX3 = constrain(map(mouseX, 0, 400, 140, 260), 140, 260)
    var tranX4 = constrain(map(mouseX, 0, 400, 150, 250), 150, 250)
    //set variable for rotation
    var rot = 90
    //eye white
    stroke(255);
    //two lines bottom left and top right
    line(0, 150, 250, 400); 
    line(150, -100, 400, 150)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set initial points for line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //repeat the process diagnally. 
    //draw line top right and bottom left
    line(150, 400, 400, 150);
    line(0, 150, 250, -100)

    //calculate the line length and divide by number of lines 
    //for gap between each line
    dx1 = (400-150)/numLines;
    dy1 = (150-400)/numLines;
    dx2 = (250-0)/numLines;
    dy2 = (-100-150)/numLines;

    //set initial points for line
    x1 = 150;
    y1 = 400;
    x2 = 0;
    y2 = 150;

    //for loop, i = number of lines drawn
    //line position + gap width to drawn each line 
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    // spiral controlled by the mouseY position

    //use push and pop to limit the conditions inside
    push()
    //tranlsate origin to the middle of the canvas
    translate(200, 150)
    //set variables for the line positions
    var x =100
    var y = 100
    var dist = 50 //distance between each line
    var rot2 = 5 //set value for rotation degree
    var rotation = constrain(map(mouseY, 0, 300, -500, 100), -500, 100)
    //sets value of y, the loops repeats for 200 times
    for (y = 100; y <= 300; y += 1){
        rotate (radians(rot2)) //rotation of the line around the origin
        stroke("lightyellow") //stroke color
        //draw line to form the spiral
        line(rotation, y, x+dist, y+dist)
        rot2 += 0 //constant rotation
    }

    pop()

    //eyeball formation
    //use written function eyeBall below to draw the eyeball formation

    //Innermost DarkRed
    push()
    stroke("darkred")
    //translate the position based on the mouseX position
    //use tranX variables for remapped values
    translate(tranX1, 150); 
    //use for loop to repeat the Eyeball Function
    for (var spin = 0; spin <=6; spin += 1){
        //written function to draw components of the eyeballs
        eyeBall(30, 30, 30, 30)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //2nd layer lightblue
    push()
    stroke("lightblue")
    //use remapped value for translation based on mouseX
    translate(tranX2, 150);
    //rotate 45 degrees for variation from the last component
    rotate(radians(45))
    //for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //Eyeball function decrease value to increase size
        eyeBall(20, 20, 20, 20)
        rotate(radians(rot))
        //rot adds 90 degrees each time the loop runs 
        rot += 90
    }
    pop()

    //3rd layer light green
    push()
    //use remapped value for translation based on mouseX
    translate(tranX3, 150);
    //rotate 90 degrees for variation from the last compone nt
    rotate(radians(90))
    stroke("lightgreen")
    //use for loop to repeat the eyeBall function
    for (var spin = 0; spin <=6; spin += 1){
        //eyeBall function increases component size
        eyeBall(10, 10, 10, 10)
        rotate(radians(rot))
        //addes rotation value for the circular shape
        rot += 90
    }
    pop()

    //4th layer dark grey
    push()
    //use remapped value for tranlsation based on mouseX
    translate(tranX4, 150);
    //rotate 45 degrees for variation
    rotate(radians(45))
    stroke(30) //dark grey
    for (var spin = 0; spin <=12; spin += 1){
        //increase in size
        eyeBall(-10, -10, -10, -10)
        rotate(radians(rot))
        //adds 45 degrees for circular form
        rot += 45
    }
    pop()
   
    //eye lids
    stroke("orange");
    //draw two lines
    line(0, 150, 250, 400);
    line(150, 400, 400, 150);
    //calculate length of the line and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (400-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150-400)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = 400;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //draw two lines
    line(0, 150, 250, -100)
    line(150, -100, 400, 150)
    //calculate length of the lines and divide by number of lines to draw
    dx1 = (250-0)/numLines;
    dy1 = (-100-150)/numLines;
    dx2 = (400-150)/numLines;
    dy2 = (150+100)/numLines;

    //set variables for the initial positions of the line
    var x1 = 0;
    var y1 = 150;
    var x2 = 150;
    var y2 = -100;
    //use for loop to continously draw the lines
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
}

//set function to draw the eyeball components
function eyeBall (a, b, c, d){
 
    //set two lines
    line(a-40, b-120, c-100, d+40)
    line(a+40, b-120, c-120, d-40)

    //find the length of the lines divided by the number of lines
    dx1 = (c-100-(a-40))/numLines;
    dy1 = (d+40-(b-120))/numLines;
    dx2 = (c-120-(a+40))/numLines;
    dy2 = (d-40-(b-120))/numLines;

    //set values for inital position
    var x1 = a-40;
    var y1 = b-120;
    var x2 = c+40;
    var y2 = d-120;
    //use for loops to continously draw the lines.
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

}

Project-04

line art frank

var numLines = 30

function setup() {
    createCanvas(300, 400);
    background(220);
   
}


function draw() {

//top rock thing
    eastern(150,0,0,0, 0,0,0,50, 20)        //left top 
    eastern(150,0,300,0, 300,0,300,50, 20)      //left bottom
    eastern(0,50,0,100, 0,100,150,100, 20)      //right top
    eastern(300,50,300,100, 300,100,150,100, 20)        //right bottom
//middle rock thing

    eastern(150,100,-150,150, -150,150,150,200, 20) //left
    eastern(150,100,450,150, 450,150,150,200, 20)

//bottom rock thin
    eastern(0,200,150,200, 0,300,0,200, 20) //top left
    eastern(0,300,0,400, 0,400,150,400, 20) // bottom left
    eastern(150,200,300,200, 300,200,300,300, 20)           // top right
    eastern(150,400,300,400, 300,400,300,300, 20)           // bottom right


//middle traingle thing
eastern(0,300,300,300, 150,0,150,200, 4)
eastern(300,300,0,300, 150,0,150,200, 4)
eastern(300,300,0,300, 150,0,150,0, 3)
eastern(0,400,300,400, 300,0,0,0, 2)

}

function eastern(X1, Y1, X2, Y2, X3, Y3, X4, Y4, numLines) {

line(X1, Y1, X2, Y2) 
line(X3, Y3, X4, Y4)

    var dx1 = (X2 - X1)/numLines
    var dy1 = (Y2 - Y1)/numLines
    var dx2 = (X4 - X3)/numLines
    var dy2 = (Y4 - Y3)/numLines


    for ( var i = 0; i <= numLines; i ++) {
        line(X1, Y1, X3, Y3);
        X1 += dx1
        Y1 += dy1
        X3 += dx2
        Y3 += dy2
    }


}

Project 4: String Art

Just try to imagine waking up to this in the middle of the night. Best 70s themed dreamscape ever. That’s the whole piece. That’s it. A portal to the disco dimension.

sketch
//Ilyas Khan
//Section D
//Entitled "Disco Portal"
//Why, you may ask, did I make it disco? Because I like disco, and I like random color changes.

count = 0;
function setup() {
    createCanvas(400, 300);
    background(0);
}
function draw() {
    background(0); //keeps the loop from getting messy
    frameRate(5); //makes it possible for one to perceive the color changes
    stroke(random(100,255),random(100,255),random(100,255)); //Makes this the portal to the disco dimension
    let count = 0;
    let y1 = 0;
    let y2 = 0;
    let x1 = 0;
    let x2 = 0;
    let x3 = 0;
    var limitX1 = 150;
    var limitX2 = 250;
    var limitY1 = 50;
    var limitY2 = 250;
    strokeWeight(0.5);
    for(y1 = -400; y1 < limitY1; y1 += 4.75){ //top of doorframe
        x3 = limitX2-(1.25*count);
        x1 = limitX1+(1.25*count);
        y2 = limitY1-(0.25*count);
        line(x1,y2,x1+300,y1);
        line(x3,y2,x3-300,y1);
        count += 1;
    }
    for(y1 = limitY1; y1 < limitY2+100; y1 += 7.75){ //left side of doorframe
        x1 = limitX1;
        x2 -= 4.5;
        y2 -= 7.75;
        line(x1,y1,x2,y2+300);
        count += 1;
    }
    for(y1 = limitY1; y1 < limitY2+100; y1 += 7.75){ //right side of doorframe
        x1 = limitX2;
        x2 = limitX2-(4.5*count);
        y2 += 7.75;
        line(x1,y1,1.05*-x2,-y2+50);
        count += 1;
    }
    for(y1 = 800; y1 > limitY2; y1 -= 9){ //floor
        x3 = limitX2;
        x1 = limitX1;
        y2 = limitY2-(0.05*count);
        line(x1,y2,x1+300,y1);
        line(x3,y2,x3-300,y1);
        count += 1;
    }

}

Project 04: String Art

string art
//Amy Hu
//amyhu
//Section D

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 30;

function setup() {
    createCanvas(400, 400);
    background(200);

    for(var angle = 0; angle <= 360; angle += 45){
        translate(width/2,height/2);
        line(0,-50,0,-150);
        line(150,0,50,0);
        dx1 = (0-0)/numLines;        
        dy1 = (-150+50)/numLines;
        dx2 = (50-150)/numLines;       
        dy2 = (0-0)/numLines;
        rotate(radians(angle));
    }

}

function draw() {

    translate(width/2,height/2);

    for(var angle = 0; angle <= 360; angle += 45){
        var x1 = 0;
        var y1 = -50;
        var x2 = 150;
        var y2 = 0;
        for (var i = 0; i <= numLines; i += 1) {
            line(x1, y1, x2, y2);
            x1 += dx1;
            y1 += dy1;
            x2 += dx2;
            y2 += dy2;
        }
        rotate(radians(angle));
    }
    

    noLoop();
}