Month: September 2016

sketch-213.js

function setup() {
    createCanvas(640, 480);
    background(255,220,240);
}

function draw() {
    // Point given by coordinates (topXmid, topYmid) 
    // is where all lines drawn from left of canvas meet
    var topXmid = width/2;
    var topYmid = 0;
    // Point given by coordinates (rightXmid, rightYmid)
    // is where all lines drawn from top of canvas meet
    var rightXmid = width;
    var rightYmid = height/2;
    // Point given by coordinates (bottomXmid, bottomYmid) 
    // is where all lines drawn from right of canvas meet
    var bottomXmid = width/2;
    var bottomYmid = height;
    // Point given by coordinates (leftXmid, leftYmid)
    // is where all lines drawn from bottom of canvas meet
    var leftXmid = 0;
    var leftYmid = height/2;

    var tX = 0; // Initial x-value of lines drawn from top
    var bX = 640; // Initial x-value of lines drawn from bottom
    var rY = 0; // Initial y-value of lines drawn from top
    var lY = 480; // Intial y-value of lines drawn from bottom

    // tX = Canvas top x-value. Make bigger.
    stroke(72,118,255);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);        
        var tY = 0; // Canvas top y-value is zero
        line(tX, tY, rightXmid, rightYmid);
        // (width/2) / 5 is to create 5 equal 
        // x increments across half the canvas width
        tX = tX+((width/2)/5);
    }

    // rY = Canvas right y-value; Make bigger.
    stroke(39,64,139);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var rX = width;
        line(rX, rY, bottomXmid, bottomYmid);
        // (height/2) / 5 is to create 5 equal
        // y increments across half the canvas height
        rY = rY+((height/2)/5);
    } 

    // bX = Canvas bottom x-value; Make smaller.
    stroke(99,184,255);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var bY = height;
        line(bX, bY, leftXmid, leftYmid);
        bX = bX-((width/2)/5);
    }


    // lY = Canvas left y-value. Make smaller. 
    stroke(0,229,238);
    for (var i = 0; i < 5; i++) {
        strokeWeight(2);
        var lX = 0; // Canvas left x-value is zero
        line(lX, lY, topXmid, topYmid);
        lY = lY-((height/2)/5);
    }

}

This project definitely seemed simpler before I started! I did not realize I would need to use as many variables as I ended up using. Drawing a picture and calculating the coordinates before I started really helped.

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Project-04; String Art

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(0);
//iteration for dark blue lines
	for (i = 0; i < 20; i = i + 1) {
//create variable for changing y value
	    var a = (i * 10);
//dark blue lines across canvas left to right
        stroke(10,82,180);
        line(width/2, height/2, width - mouseX, a);
    }
//iteration for red lines
    for (i = 0; i < 20; i = i + 1) {
//reestablish a
        a = (i * 10);
//red lines from right to left across canvas
        stroke(255,0,0);
        line(width/2,height/2,mouseX,a);
    }
//iteration for green lines
    for (i = 0; i < 20; i = i + 1) {
//reestablish a    
        a = (i * 10);
//green lines going up from left to above the dark blue
        stroke(0,255,0);
        line(0, height, width/2, a);
//second set of green lines from right to above dark blue
        line(width,height,width/2,a);
    }
//iteration for pink lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	var x = 0;
    	var y = 480;
    	var xx = 320;
    	var yy = 0;
//create variables for increments of x1,y1 and x2,y2
        var xstep = (i*20);
        var ystep = (i*5);
        var xxstep = (i*.1);
        var yystep = (i*10);
//increment x,y and xx,yy values
        x -= xstep;
        y -= ystep;
        xx += xxstep;
        yy += yystep;
//create pink curvy lines that overlap green
        stroke(255,124,155);
        line(x,y,xx,yy);
    }
//iteration for 2nd set of pink lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	x = 640;
    	y = 480;
    	xx = 320;
    	yy = 0;
//create variables for increments of x1,y1 and x2,y2
        xstep = (i*20);
        ystep = (i*5);
        xxstep = (i*.1);
        yystep = (i*10);
//increment x,y and xx,yy values
        x += xstep;
        y += ystep;
        xx += xxstep;
        yy += yystep;
//create pink curvy lines near purple curve
        stroke(255,124,155);
        line(x,y,xx,yy);
    } 
//iteration for yellow lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	x = 0;
    	y = 480;
    	xx = 0;
    	yy = 0;
//create variables for increments of x1,y1 and x2,y2
        xstep = (i*20);
        ystep = (i*5);
        xxstep = (i*.1);
        yystep = (i*10);
//increment x,y and xx,yy values
        x += xstep;
        y += ystep;
        xx += xxstep;
        yy += yystep;
//create yellow curvy lines
        stroke(255,255,0);
        line(x,y,xx,yy);
    }   
//iteration for purple lines
    for (i = 0; i < 50; i = i + 1) {
//create variables for x1, y1, x2, y2
    	x = 640;
    	y = 480;
    	xx = 640;
    	yy = 0;
//create variables for increments of x1,y1 and x2,y2
        xstep = (i*20);
        ystep = (i*5);
        xxstep = (i*.1);
        yystep = (i*10);
//increment x,y and xx,yy values
        x -= xstep;
        y += ystep;
        xx += xxstep;
        yy += yystep;
//create purple curvy lines that overlap green
        stroke(151,0,151);
        line(x,y,xx,yy);
    }
    for (i = 0; i < 43; i = i + 1) {
    	var a = (i * 15);
    	stroke(0,255,255);
    	line(width/2,height/2 - 50,a,480);
    }

}

This project was a lot of fun to experiment with. I have always wanted to try creating string art, and it’s a cool experience to do it using technology, especially because the strings have the ability to move if you want them to.

sketch

var hstep=20;//horizontal
var dstepX=10;//diagonal x
var dstepY=15;//diagonal y
function setup() {
    createCanvas(640, 480);
}

function draw() {
	background("lightpink");
	stroke("white");
	line(0,height/2,width,height/2);
	
	var dxTL=310;//x of top left diagonal
	var dyTL=1.5*dxTL-240;//y of top left diagonal
	var x1=0;//x for top left

	var dxBL=310;//x for bottom left diagonal
	var dyBL=-1.5*dxBL+720;//y for bottom left diagonal
	var x2=0;//x for bottom left

	var dxTR=480;//x for top right diagonal
	var dyTR=-1.5*dxTR+720;//y for top right diagonal
	var x3=320;//x for top right

	var dxBR=480;//x for bottom right diagonal
	var dyBR=1.5*dxBR-240;//y for bottom right diagonal
	var x4=320;//x for bottom right

	var dxMTL=320;
	var dyMTL=-1.5*dxMTL+720;
	var dxMTR=480;
	var dyMTR=1.5*dxMTR-240;

	var dxMBL=320;
	var dyMBL=1.5*dxMBL-240;
	var dxMBR=480;
	var dyMBR=-1.5*dxMBR+720;

	var x=0;
	var x5=640;

	for (i=0; i<17; i++) {
		
		stroke("white");
		strokeWeight(1);
		line(x1,height/2,dxTL,dyTL);//top left
		x1=x1+hstep;
		dxTL+=-dstepX;
		dyTL+=-dstepY;

		line(x2,height/2,dxBL,dyBL);//bottom left
		x2=x2+hstep;
		dxBL+=-dstepX;
		dyBL+=dstepY;

		line(x3,height/2,dxTR,dyTR);//top right
		x3=x3+hstep;
		dxTR+=-dstepX;
		dyTR+=dstepY;

		line(x4,height/2,dxBR,dyBR);//bottom right
		x4=x4+hstep;
		dxBR+=-dstepX;
		dyBR+=-dstepY;

		line(dxMTR,dyMTR,dxMTL,dyMTL);
		dxMTL+=-dstepX;
		dyMTL+=dstepY;
		dxMTR+=-dstepX;
		dyMTR+=-dstepY;

		line(dxMBL,dyMBL,dxMBR,dyMBR);
		dxMBL+=-dstepX;
		dyMBL+=-dstepY;
		dxMBR+=-dstepX;
		dyMBR+=dstepY;

		line(x5,0,x5,479);
		x5=x5-hstep;
		line(x,0,x,480);
		x=x+hstep;

	}
	
	noLoop();
	println();
}

For this project, I used straight lines and their tangents to form curves. The overall shape contains six modules.

sketch

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 04 Project: string art
//a golden ratio inspired string art

var squareWid = 390;
var gratio = 0.61803398875;
var interm = 10; //the distance between each "pin" for the strings

function setup() {
    createCanvas(480, 640);
    background(255);
}


function draw() {
//draw the picture in the middle of the canvas
	curves(20,0);
}

function curves (x, y) {
	push();
	translate (x, y);

//each pin is 15-30 pixels away from another
	interm = random (15, 30);  

	for (i=0; i<200; i++) {
	//stop generating new squares when the width is too small
		if (squareWid>1) { 
	
	//draw the first square and triangle
		fill(random(0,200), random(0,200), random(0,200));
		rect(0, 0, squareWid, squareWid);
		noStroke();
		fill(random(100,255), random(100,255), random(100,255));
		triangle(squareWid, 0, 0, squareWid, squareWid, squareWid);

	//generating the strings
		for (j=0; j<interm; j++) {
			stroke(255);
			line(squareWid*j/interm, 0, 0, squareWid*(interm-j)/interm);
			line(squareWid*j/interm, squareWid, squareWid, squareWid*(interm-j)/interm)
		}

	//translate and rotate the coordinates for the next square
		translate(0, squareWid+squareWid*gratio+1);
		rotate(-PI/2);

	//set the dimension according to the golden ratio for the next square
		squareWid = squareWid*gratio;
		
		}
	}
	pop();
}

As you can probably tell, this piece of string art is inspired by the Golden Ratio spiral. I tried my best to simply the codes while still representing the concept of Golden Ratio. Every time you refresh the page, the “threadcount” of the strings will change, as well as the color blocks.