Tag: Project-04-String-Art

P-04 String Art

sketch
// Bridget Doherty, bpdohert, 104 Section C

// draw at least 3 string art shapes

var dx1;
var dy1;
var dx2;
var dy2;

// line density
var numLines = 40;

// starting line values
var x1 = 0;
var y1 = 0;
var x3 = 0;
var y3 = 300;

// second line values
var x2 = 400;
var y2 = 300;
var x4 = 400;
var y4 = 0;

var mouseClick = 0;

function setup() {
    createCanvas(400, 300);
    background('black');
    blendMode(EXCLUSION);
}

function draw() {
    drawCircles();
    string1();
    string2();
    string3();
    
    noLoop();
}

function drawCircles() {
    for (i = 20; i < width; i+= 40) {
        fill(250);
        noStroke();
        circle(i*1.3, i, 40);
    }
    

}

function string1() {
    for(i = 0; i <= height; i += 10) { 
        stroke('green');
        line(width/2.5, height/2, 0, i);
        line(width/2.5, height/2, width, i);
    }
    for(i = 0; i <= width; i += 10){
        stroke('yellow');
        line(width/3 + width/2, height/2, 0, i);
        line(width/3 + width/2, height/2, width, i);
    }
}

function string2() {
    stroke('blue');
    dx1 = (300-50)/numLines;
    dy1 = (0)/numLines;
    dx2 = (50-300)/numLines;
    dy2 = (300-300)/numLines;
   
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }   
}

function string3() {
    stroke('cyan');
    dx1 = (300-50)/numLines;
    dy1 = (0)/numLines;
    dx2 = (50-300)/numLines;
    dy2 = (300-300)/numLines;
   
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }  
}

Lines: A face

For this project, I tried to make a face out of simple lines. When constructing faces, it is always interesting to see how simplistic or complicated you could make it through the assumptions of what is considered a face.

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    line(10,380,180,300);
    line(280,260,370,390);
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
}

function draw() {
    fill(0);
    triangle(200,0,140,100,180,110);
    triangle(180,140,200,120,280,145);
    triangle(190,145,200,160,240,150);
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    } for (var i = -150; i <= numLines * 2; i += 4) {
        line(x1, y1, x2, y2);
        x1 += dx1 / 2;
        y1 += dy1 / 2;
        x2 += dx2 / 2;
        y2 += dy2 / 2;
        //eyelashes i think
    } for (var i = 1; i <= numLines * 2; i += 4) {
        line(x2 * 5, y1 , x1 -50, y2 + 40);
        var x1 = 0;
        var x2 = 200;
        var y1 = 300;
        var y2 = 350;
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //random lines for texture
    } for (var i = 0; i <= numLines; i += 2) {
        line(x1, y1 - 300, x2, y2 - 300);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //hair
    } for (var i = 0; i <= numLines; i += 2) {
        x2 = 80;
        y2 = 30;
        line(x1, y1 - 300, x2, y2 - 300);
        x1 -= dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 += dy2; }
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    x1 = 10;
    y1 = 380;
    x2 = 280;
    y2 = 260;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    noLoop();
}

Project 04: Illuminati out of the Pyramid!

sketchDownload
// Ilia Urgen
// Section B

var numLines = 60;

function setup() {
    createCanvas (400,300); 
    
    color_1 = color (135,206,245);
    color_2 = color (253,217,181);

    // ombre 
    for (var y = 0; y < height; y++ ) {
        n = map (y,0, height, 0, 1);
        var color_3 = lerpColor (color_1, color_2, n);
        stroke (color_3);
        line (0, y, width, y);
    }

    stroke (0);

    // canvas border lines
    line (1,1,1,299);
    line (1,1,399,1);
    line (1,299,399,299);
    line (399,1,399,299);
} 

function draw() {
    
    for (var i = 0; i <= numLines; i += 1) {

        var x1 = 0;
        var y1 = i * width / numLines;
        var x2 = i * height / numLines;
        var y2 = 300;

        // lower eye curve
        strokeWeight(0.5);
        line (x1, y1, x2, y2);
        
        // upper eye curve and pyramid side
        line (x2, 0, 400, y1);

        // lower eye lines
        line (y1, x2 * 1.05, x1, y1 - 20);

        // pyramid face
        line (y2, x2, x1 - 2.1, y2 + 200);

        // eye line
        strokeWeight(2);
        line (0,0,382,303);
        
    }

    //illuminati eye
    push();

    translate (185, 152);
    rotate(radians(38));
    fill (0);
    ellipse (0,0,180,80);
    fill (255);
    ellipse (0,0,80);
    fill (0);
    ellipse (0,0,20);

    pop();

noLoop();
}

Project 4: String Art

/*
 * Andrew J Wang
 * ajw2@andrew.cmu.edu
 * Section A
 *
 * This program draws line arts
 */

var maxNum = 30;


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

function draw() {
    background(0);
    //using the 3 functions for 3 different shapes
    backgroundStrings (50);
    stroke(255);
    circleStrings(200,150,200,500);
    stroke(255,0,0,255);
    circleStrings(200,150,100,58);
    push();
    fill(255);
    ellipse(200,150,100);
    pop();
    stroke(255,0,0,255);
    hexagonStrings(200,150,100,5,10);
    
}

function circleStrings(Cx,Cy,Cd,Cl) {
    for (var k = 0; k < maxNum; k++)
    {   
        //grabing points on the circle
        y=sin((k*(360/maxNum))*Math.PI/180)*(Cd/2)+Cy;
        x=cos((k*(360/maxNum))*Math.PI/180)*(Cd/2)+Cx;
        //making lines that is perpandicular to the radius with adjustable lengths
        p1X = x + cos(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
        p1Y = y + sin(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
        p2X = x - cos(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
        p2Y = y - sin(-(Math.PI/2-(k*(360/maxNum))*Math.PI/180))*Cl;
        line (p2X,p2Y,p1X,p1Y);
    }
}


function hexagonStrings(Hx,Hy,Hd,num,seg) {
    //make arrays
    const array = [];
    var angle = 360/num;
    for (var k = 0; k < num; k++)
    {   
        array[k] = new Array();

        y=sin(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)+Hy;
        x=cos(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)+Hx;
        line (Hx,Hy,x,y);
        
        for (var s = 0; s<seg; s++)
        {   
            //3D array grabing every points on the line of the star
            array[k][s] = new Array();
            var y1=sin(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)*s/seg+Hy;
            var x1=cos(-Math.PI/2+(k*angle)*Math.PI/180)*(Hd/2)*s/seg+Hx;
            array[k][s][0] = x1;
            array[k][s][1] = y1;

        }
    }

    //cross connecting those lines using for loop
    for (var k = 0; k < num-1; k++)
    {
        for (var s = 0; s<seg; s++)
        {
            line(array[k][s][0],array[k][s][1],array[k+1][seg-1-s][0],array[k+1][seg-1-s][1]);
        }
    }
    for (var s = 0; s<seg; s++)
    {
        line(array[num-1][s][0],array[num-1][s][1],array[0][seg-1-s][0],array[0][seg-1-s][1]);
    }

}

function backgroundStrings (num) {
    for (var k=0; k<num; k++)
    {
        //cross connecting with for loop
        stroke(255/num*k,0,0,255);
        line (k*width/num,0,width,k*height/num);
        line (width-k*width/num,height,0,height-k*height/num);
        line (k*width/num,height,width,height-k*height/num);
        line (width-k*width/num,0,0,k*height/num);
    }
}

Project 04 – String Art

Sunset at the Beach

//Srishty Bhavsar
//15-104
//Section C
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 400);
    background(200);
    text("p5.js vers 0.9.0 test.", 10, 15);
    line(50, 50, 150, 300);
    line(300, 300, 400, 100);
}




function draw() {
    createCanvas(400,300);
    //sky blue background
    background(193,242,254);
        // for loop that initializes =, lines up to 700, and spaced +1
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
    
// faint mountains in background
    var x1 = -100;
    var y1 = -30;
    var x2 = 500;
    var y2 = -200;

    for (var i = 0; i <= numLines; i += 1) {
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        push()
        stroke(167,84,41,40);
        translate(200,150);
        rotate(PI/3); // flipped so they look like mountains
        line(x1/2, y1, x2, y2);
        pop();
        push()
        stroke(167,84,41,30);
        translate(100,150);
        rotate(PI/3);
        line(x1/2, y1, x2, y2);
        pop();
    }


    for (var i = 0; i <= numLines; i += 1) {

        var x1 = 0;
        var x2 = (i*width)/50;
        var y1 = (i*width)/50;
        var y2 = height;

        //Ocean blue waves (light to dark)
        stroke(219,247,253);
        line(x1 + 50, y1 + 100, x2, y2);
        stroke(0,157,196); // brightest blue
        line(x1, y1 + 80, x2, y2);
        line(width + (x2), height - y1, x2, y2);
        stroke(1,90,112); // oceanside blue
        line(width+500, height-y1, x2, y2);
        line(width+500, height-y1, x2 + 100 , y2);
        line(x1, y1 + 150, x2, y2);
        line(x1, y1 + 200, x2, y2);


        //sand
        stroke(246, 240, 210); // dark sand color
        line(x1, height - 20, x2 - 100, height);
        stroke(205, 170, 109); //lighter sand color
        line(x1, height-30, x2 + 10, height);
        stroke(255,255,240); //ivoru sand color
        line(x1, height -10, x2 -100, height);

    }

    //setting sun
     for (var i = 0; i <= 50 + numLines; i += 1) {
        
        // sun sets position above water
        var x1 = 200;
        var y1 = 250;
        stroke(250, 180, 20, 100); // sunny yellow 
        strokeWeight(2)
        push() // stored
        translate(x1, y1);
        rotate((i*PI)/numLines); //center filled circle
        line(0, 0, 0, 100); // rays
        pop() // resets

    }


    noLoop();
}