Month: September 2019

sketch">

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 4
*/

function setup(){
	createCanvas(400,300);
	background (0);
	
	//left white crossed lines
    stroke(255);
    var yl = height*(5/6);
    var ym1 = height*(6/8);

    for(var i=0; i < 15; i++){
        line(0, yl, width/2, ym1);
        yl *=0.97;
        ym1 *= 1.02+mouseX;
    };

    //right white crossed lines
    var yr = height*(5/6);
    var ym2 = height*(6/8);

    for(var i=0; i < 15; i++){
        line(width, yr, width/2, ym2);
        yr *=0.97;
        ym2 *= 1.02;
    };

//diamond 
    stroke(255);

//bottom vertical lines
    var w1= width/4;
    for (var x=w1; x<width*(3/4); x+=14){
        line (x,height/2,width/2,height*(5/6));
    }

//upper left lines
    var w2= width/3;
    var w4= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width/4,height/2, w2, y); 
        w2+=5;

        line (width/2-30,height/2, w2-5, height/3); 
        line (width/2-30, height/2, w4, height/3);
        w4-=4;
    }

//upper right lines
    var w3= width*(2/3);
    var w5= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width*(3/4),height/2, w3, y); 
        w3-=5;

        line (width/2+30, height/2, w3+5, height/3); 
        line (width/2+30, height/2, w5, height/3);
        w5+=4;
    }

//upper center criss cross lines
    var w6= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width/2-30, height/2, w6, y);
        w6+=4;
    }    
    var w7= width/2;
    for (var y=height/3; y<height/2; y+=7){
        line (width/2+30, height/2, w7, y);
        w7-=4;
    }

	
//top of diamond
	line (width/3, height/3, width*(2/3),height/3);

}

In this project I created a diamond out of string out. The numerous lines were made from for loops and line shapes. The challenging part of this project was making the lines in the diamond match up into a cohesive shape.

I really wanted to show huge amounts of contrast in my drawing, so I made the strings and background always be opposite of each other in terms of gray value. This also leads to a cool middle point where they are the same color.

ikaneko string art

//Ian Kaneko
//Project 4: String Art

var canvasWidth = 300;
var canvasHeight = 400;
var bkgrnd = 250;
var change = -1;

function setup() {
    createCanvas(canvasWidth, canvasHeight);
    
} 

function draw() {
    background(bkgrnd);
    
    strokeWeight(1);
    
    stroke(250 - bkgrnd);

    bkgrnd = bkgrnd + change;

    if(bkgrnd <= 0){
        change = -change;
    }

    if(bkgrnd > 250){
        change = -change;
    }

    

    for (i = 0; i < 50; i ++){ //diamond forms created by negative space
        line(0, 100 + i * 6, 300, 100 - i * 6); 
    }
    
    for (i = 0; i < 50; i ++){
        line(0, 300 - i * 6, 300, 300 + i * 6);
    }
    
    for (i = 0; i < 50; i ++){
        line(0, 100 - i * 6, 300, 100 + i * 6);
    }

    for (i = 0; i < 50; i ++){
        line(0, 300 + i * 6, 300, 300 - i * 6);
    }

    stroke(150, 100, 150); // colored borders

    for (i = 0; i < 40; i ++){ // purple "web" on top left
        line(0, 200 - 5 * i, i * 5, 0);
    }

    stroke(150, 100, 210);
    for (i = 0; i < 40; i ++){ // purple bottom right web
        line(0, 200 + 5 * i, i * 5, 400);
    }

    stroke(210, 100, 150); // top right web
    for (i = 0; i < 40; i ++){
        line(300, 200 - 5 * i, 300 - i * 5, 0);
    }

    stroke(210, 100, 210); // bottom right web
    for (i = 0; i < 40; i ++){
        line(300, 200 + 5 * i, 300 - i * 5, 400);
    }

    


}

sketch

/* Cathy Dong
   Section D
   yinhuid
   Project 4-String Art
*/

var sqColor;
var backColor;

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

function draw() {
	background(0);
	//change background color based on mouseY location
	if (mouseY < height / 2) {
		backColor = 'black';
	}
	else if (mouseY >= height / 2) {
		backColor = 'gray';
	}
	//turn background to white when mouse is pressed
	if (mouseIsPressed) {
		backColor = 'white';
	}
	noStroke();
	fill(backColor);
	rectMode(CORNER);
	rect(0, 0, width, height);

	//create a grid of rectangles
	//rectangle color changes based on mouseX
	for (var s = 20; s <= width; s += 30) {
		for (var t = 15; t <= height; t += 30) {
			if (mouseX < width / 2) {
				sqColor = 'gray';
			}
			else if (mouseX >= width / 2) {
				sqColor = 'black';
			}
			noStroke();
			fill(sqColor);
			rectMode(CENTER);
			rect(s, t, 20, 20);	
		}
		
	}
	//lines from mouse to top
	for (var n = 0; n <= width; n += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, n, 0);
	}

	//lines from mouse to bottom
	for (var p = 0; p <= width; p += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, p, height);
	}

	//lines from mouse to left
	for (var q = 0; q <= height; q += 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, 0, q);
	}

	//lines from mouse to right
	for (var r = 0; r <= height; r+= 10) {
		stroke('lightBlue');
		strokeWeight(1);
		line(mouseX, mouseY, width, r);
	}

	//curve with lines from top to right (controled by mouseX)
	for (var i = 0; i <= mouseX; i += 3) {
		stroke(255);
		strokeWeight(.5);
		line(i, 0, width, i);
	}
	//curve with lines from right to bottom (controled by mouseY)
	for (var j = 0; j <= mouseY; j += 3) {
		stroke(255);
		strokeWeight(.5);
		line(width, j, width - j, height);
	}
	//curve with lines from bottom to left (controled by mouseX)
	for (var k = 0; k <= mouseX; k += 3) {
		stroke(255);
		strokeWeight(.5);
		line(width- k, height, 0, height - k)
	}
	//curve with lines from left to top (controled by mouseY)
	for (var m = 0; m <= mouseY; m += 3) {
		stroke(255);
		strokeWeight(.5);
		line(0, height - m, m, 0);
	}

	//draw foco point
	stroke(255);
	strokeWeight(2);
	push();
	line(mouseX / 8 * 7, mouseY, mouseX / 8 * 9, mouseY);
	line(mouseX, mouseY / 8 * 7, mouseX, mouseY / 8 * 9);
	pop();

}

In this project, I used loops to create curves with lines and rectangle grids. All lines changed based on mouse location. The background color also changed when mouse is clicked or moved.