Category: SectionD

sketch

// Yinjie Tian
// yinjiet@andrew.cmu.edu
// Section D
// Project 04

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

function draw() {
    background(0)
    for (var i = 0; i < 21; i++) {
        stroke(255, 0, 0);
        line(width/5+i*10, 0, 0, height/2+i*(-5)); //line set 1

        stroke(255)
        line(0, height/2+i*10, width/3+i*(-5), 0); //line set 2

        stroke(0, 255, 0);
        line(0, height/3+i*10, width/2+i*(10), height);  //line set 3

        stroke(0, 0, 255);
        line(width, height/7+i*10, width*3/4+i*(-10), height); //line set 4

        stroke(150, 80, 0);
        line(width, height/7+i*10, width/4+i*(10), 0); //line set 5

        
    }
}

In this project, I created 5 different sets of lines that gradually rotates from the origin edge to the adjacent edge.

sketch

// CJ Walsh
// Section D
// cjwalsh
// Project-04

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

function draw() {
	background('#8B9AF2');
	var xstep = 10;
	var ystep = 10;
	var xpos = 0;
	var ypos = 0; 
	var x1, y1;

	for (i=1; i < 40; i++) {
		x1 = xpos + xstep;
		y1 = ypos + ystep;

		// center red 
		stroke('#991D3E');
		line(200, y1, x1 + 140, height);
		stroke('#991D3E');
		line(width-200, y1, width - x1 - 140, height);

		// center pink 
		stroke('#FFB3FF');
		line(200, y1, x1 + 70, height);
		stroke('#FFB3FF');
		line(width-200, y1, width - x1 - 70, height);

		// lower large curves
		stroke('#1C4E7C');
		line(0, y1, x1, height);
		stroke('#1C4E7C');
		line(width, y1, width - x1, height);

		// center black 
		stroke('black');
		line(width-200, y1, width - x1, height);
		stroke('black');
		line(200, y1, x1, height);

		// top large curves 		
		stroke("#090170");
		line(0, y1, width-x1, 0);
		line(x1, 0, width, y1);

		// lines controlled by mouse movement 
		stroke("white");
		line(x1, 0, mouseX, mouseY);
		line(x1, height, mouseX, mouseY);

		xpos = x1;
		ypos = y1;
	}
}

For creating my string art I just wanted to experiment with different ways of making and placing my curves. After playing around with the placement and giving a lot of attention to symmetry, I wanted to create a fun color palette. I think it makes it a lot more fun to interact with. At the end of my project, I wanted to include an interactive movement element, so I added some lines that follow the position of the mouse and create fun patterns when overlapping with the curves.

sketch

For this assignment, I tried to create this abstract wave forms.  Then, I ended up also attempting to make some symmetrical lines to understand better how line coordinates work using loop functions. It was very confusing, I would need more practice to get used to it.

/* SooA Kim
Section D
sookim@andrew.cmu.edu
Assignment 04 -String Art */


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

function draw() {
    background(0);

    for (var i = 0; i < 200; i+= 2) {
        stroke("gold");
        strokeWeight(1);
        line(i, height, 0, 5*i);
        stroke("red");
        line(4*i, height, 0, 4*i);
        stroke("pink");
        line(7*i, height, 0, 3*i);
        stroke("blue")
        line(10*i, height, 0, 2*i);
        stroke("purple");
        line(13*i, height, 0, 1.5*i);
    }
    
    for (var i = 0; i < 100; i+= 10) {
        stroke(255, 109, 0);
        strokeWeight(1);
        line(i/4, i, i*4, height/2);
        line(i/4, height - i, i*4, height/2);
        stroke(mouseX, 255, mouseY);
        strokeWeight(mouseX);
        line(width - (i*2), 0, i * 2, height);
        line(width - (i*2), height, (i*2), 0);

    }

}

sketch

//Raymond Pai
//Section D
//rpai@andrew.cmu.edu
//Project 04

var rx1;
var ry1;
var rx2;
var ry2;

var lx1;
var ly1;
var lx2;
var ly2;

var bx1;
var by1;
var bx2;
var by2;

var tx1;
var ty1;
var tx2;
var ty2;

function setup() {
    createCanvas(400, 300);
    //initiate r curve
    rx1 = 0;
    ry1 = -150;
    rx2 = 0;
    ry2 = height;

    //initiate l curve
    lx1 = 20;
    ly1 = -150;
    lx2 = 20;
    ly2 = height;

    //initiate b curve
    bx1 = -20;
    by1 = -150;
    bx2 = -20;
    by2 = height;

    //initiate l curve
    tx1 = -50;
    ty1 = -150;
    tx2 = -50;
    ty2 = height;
}

function draw() {
    background(220, 220, 150);

    //triangle
    fill(100);
    triangle(width/2, height, width/2 + width/4, height/2, width, height);
    fill(255);
    triangle(width/2 + 35, height - 50, width/2 + width/4, height/2, width - 35, height - 50);

    //r curve
    for (var a = 0; a < 1000; a += 10) {
        stroke(50, 50, 255);
        line(rx1, ry1 + a, rx2 + a, ry2);
    }
    //l curve
    for (var a = 0; a < 1000; a += 10) {
        stroke(255);
        line(lx1, ly1 + a, lx2 + a, ly2);

    }
    //b curve
    for (var a = 0; a < 1000; a += 10) {
        stroke(100, 100, 255);
        line(bx1, by1 + a, bx2 + a, by2);
    }
    //t curve
    for (var a = 0; a < 1000; a += 10) {
        stroke(0, 0, 255);
        line(tx1, ty1 + a, tx2 + a, ty2);
    }
}

Drawing of a wave. The white foam and the dark blue are shown using a gradient of 4 ‘curves’.