Category: SectionC

tcliu-openended-04

// Timothy Liu
// 15-104 Section C
// tcliu@andrew.cmu.edu
// Openended-04

// initializing variables!
var x1;
var y1;
var x2;
var y2;

var x3;
var y3;
var x4;
var y4;

var x5;
var y5;
var x6;
var y6;

var x7;
var y7;
var x8;
var y8;

var x;
var y;

var sx1;
var sy1;
var sx2;
var sy2;

var angle = 0;

function setup() {

    createCanvas(400, 300);

    // initial coordinates for star
    sx1 = -5;
    sy1 = -5;
    sx2 = 5;
    sy2 = 5;

    // initial coordinates for lower left dark blue lines
    x1 = 0;
    y1 = -250;
    x2 = 0;
    y2 = height;

    // initial coordinates for upper right cyan lines
    x3 = -150;
    y3 = 0;
    x4 = width;
    y4 = 0;

    // initial coordinates for upper left gold lines
    x5 = 0;
    y5 = height + 250;
    x6 = 0;
    y6 = 0;

    // initial coordinates for lower right light teal lines
    x7 = -150;
    y7 = height;
    x8 = width;
    y8 = height;

}

function draw() {

    // variables that make sure the mouse is constrained within the canvas
    x = max(min(mouseX, 400), 0);
    y = max(min(mouseY, 300), 0);

    // background color
    background("#010a43");
    
    // dark blue lines in the lower left. This for loop makes the lines flare out to form a convex curve
    // facing up and right; x and y (variables with mouseX and mouseY) allow the lines to ripple as the mouse moves.
    for (var a = 0; a < 900; a += 8) {
        stroke("#394a6d");
        line(x1, y1 + a - y / 2, x2 + a - x / 2, y2);
    }

    // cyan lines in the upper right. This for loop makes the lines flare out to form a convex curve
    // facing down and left; mouseX and mouseY allow the lines to ripple as the mouse moves.
    for (var b = 0; b < 900; b += 8) {
        stroke("#216583");
        line(x3 + b - y / 2, y3, x4, y4 + b - x / 2);
    }

    // gold lines in the upper left. This for loop makes the lines flare out to form a convex curve
    // facing down and right; x and y allow the lines to ripple as the mouse moves.
    for (var c = 0; c < 900; c += 8) {
        stroke("#f7be16");
        line(x5, y5 - c - x / 2, x6 + c - y / 2, y6);
    }   

    // light teal lines in the lower right. This for loop makes the lines flare out to form a convex curve
    // facing up and left; x and y allow the lines to ripple as the mouse moves.
    for (var d = 0; d < 900; d += 8) {
        stroke("#00818a");
        line(x7 + d + x / 2, y7, x8, y8 - d + y / 2);
    }

    // star that follows the mouse. The rotating star is meant to convey the dynamic nature of my piece,
    // as well as imply the fact that the user can move the mouse to alter the piece.
    push();
    translate(mouseX, mouseY);
    rotate(radians(angle));
    for (var s = 0; s < 16; s += 15) {
        stroke("#f7be16");
        line(sx1, sy1 + s / 4, sx2, sy2 - s / 4);
    }
    for (var s = 0; s < 16; s += 15) {
        stroke("#f7be16");
        line(sx1 + s / 4, sy1, sx2 - s / 4, sy2);
    }
    for (var s = 0; s < 16; s += 15) {
        stroke("#f7be16");
        line(sx1, sy1 + s / 2, sx2, sy2 - s / 2);
    }
    for (var s = 0; s < 16; s += 15) {
        stroke("#f7be16");
        line(sx1 + s / 2, sy1, sx2 - s / 2, sy2);
    }
    pop();
    angle = angle + 1;

}

My project this week was inspired by the color palette from Van Gogh’s “Starry Night.” I wanted my string art to feel both clean and dynamic, and I immediately knew I wanted to have multiple convex curves framing the center of my piece. I was also inspired by my Looking Outward piece from last week; I looked at a piece of wood that had a rippling effect, and I wanted to convey that sense of dynamic motion as well. In order to do that, I chose to have my strings be responsive to the mouse’s motion, and I created a spinning yellow star that follows the mouse to further imply motion.

sketch_project4

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project-04-String Art*/


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

function draw() {
    background(0);
    //yellow curve
    for(var i = 0; i < 400; i += 5) {
        stroke(255, 250, 158);
        strokeWeight(0.5);
        line(i, mouseY, 400 , i);
    }
    //green curve
    for(var b = 0; b < 400; b += 5) {
        stroke(167, 255, 158);
        strokeWeight(0.5);
        line(b, mouseX, 400 , b);
    }
    //pink curve
    for(var a = 0; a < 400; a += 5) {
        stroke(255, 158, 158);
        strokeWeight(0.5);
        line(mouseY, a, a, 300);
    }
    //blue curve
    for(var c = 0; c < 400; c += 5) {
        stroke(158, 243, 255);
        strokeWeight(0.5);
        line(mouseX, c, c, 300);
    }
}

This was a fun project to do to experiment with different lines and colors. It was also interesting so see how the lines shifted with the mouse.

lrchu

// lee chu
// section c
// lrchu@andrew.cmu.edu
// project - 04

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var xSpacing;
var ySpacing;
var offset = 5;

function setup() {
    createCanvas(400, 300);
    fill(100);
    strokeWeight(0.25);
    xSpacing = width / 100;
    ySpacing = height / 100;
}

function draw() {
    background(50);
    triangle(0, 0, width, 0, width, height);

    // mouse control
    if (height / 2 < mouseY & mouseY < height) {
        offset = (mouseY - height / 2) / (height / 2) * 30;
    }
    if (height / 2 > mouseY & mouseY > 0) {
        offset = (mouseY - height / 2) / (height / 2) * 30;
    }

    // see functions below
    whiteLines();
    orangeLines();
    cyanLines();
}


function whiteLines() {
    stroke('lightGray');
    x2 = xSpacing * offset;
    y2 = ySpacing * offset;

    // left
    for (var y1 = 0; y1 < height + offset * ySpacing; y1 += ySpacing) {
        line(x1, y1, width + x2, height + y2);
        x2 -= xSpacing;
        y2 -= ySpacing;
    }
    x2 = xSpacing * -offset;
    y2 = ySpacing * -offset;

    // right
    for (var y1 = height; y1 > -offset * ySpacing; y1 -= ySpacing) {
        line(width, y1, x2, y2);
        x2 += xSpacing;
        y2 += ySpacing;
    }
    x2 = 0;
    y2 = 0;
}


function orangeLines() {
    stroke('orange');

    // left
    for (var y1 = 0; y1 < height; y1 += ySpacing) {
        line(x1, y1, width - x2, height - y1);
        x2 += xSpacing;
    }
    x2 = 0;

    // right
    for (var y1 = height; y1 > 0; y1 -= ySpacing) {
        line(width, y1, x2, height - y1);
        x2 += xSpacing;
    }
    x2 = 0;
}

function cyanLines() {
    stroke('cyan');
    x2 = xSpacing * offset;
    y2 = ySpacing * offset;

    // left
    for (var y1 = 0; y1 < height - offset * ySpacing; y1 += ySpacing) {
        line(x1, y1, width - x2, height - y2);
        x2 += xSpacing;
        y2 += ySpacing;
    }
    x2 = xSpacing * offset;
    y2 = ySpacing * offset;

    // right
    for (var y1 = height; y1 > offset * ySpacing; y1 -= ySpacing) {
        line(width, y1, x2, y2);
        x2 += xSpacing;
        y2 += ySpacing;
    }
    x2 = 0;
    y2 = 0;
}

I wanted to create a sense of depth by offsetting line functions and including contrasting yet complementary colors. An interesting aspect is that the colors seem to shift as the lines change in overlap.

hmeng assignment-03-A

//Sean Meng
//Section C
//hmeng@andrew.cmu.edu
//Project-03-String-Art

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

function draw() {
	background(0);
    
    for(var i = 0; i <= 400; i += 10){
 //the darkest blue lines
        stroke(0, 0, 255);
    	line(i, 0, 400, i);
//second layer of blue lines with lighter color
    	stroke(100, 100, 255);
    	line(i, 50, 400, i);
//third layer of blue lines with ligher color
    	stroke(150, 150, 255);
    	line(i, 100, 400, i);
//the lightest blue lines
    	stroke(200, 200, 255);
    	line(i, 150, 400, i);
 //the darkest red lines
    	stroke(255, 0, 0);
    	line(i, 300, 0, i);
 //second layer of red lines
    	stroke(255, 100, 100);
    	line(50, i, i, 300);
 //third layer of red lines
    	stroke(255, 150, 150);
    	line(100, i, i, 300);
 //the darkest blue lines
    	stroke(255, 200, 200);
    	line(150, i, i, 300);
    }
    
}

In this project, I intended to create a wavy graphic using string art form. I was also experimenting with visual readability and hierarchy by adding different tones of color and complementary colors to the graphics.

sketch

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-04

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

function draw() {
    var x = 0; //used to define color
    background(0);
    strokeWeight(1);
    stroke(255);
    for (var i = 0; i < 400; i+=10){
        stroke(255);
        line(0, height - i, i, 0); //top left curved lines
        
        line(i, i, width, height -i); //top half of bottom right curved lines
        line(i, i, width - i, height); //bottom hald of bottom right curved lines

        //changes lines from white to magenta depending on mouse location
        if (mouseX > width / 2) {
            x = 0;
        }
        if (mouseX <+ width / 2) {
            x = 255;
        }

        //lines that turn magenta
        stroke(255, x, 255);
        line(0, height, i, i); //bottom left
        line(width, 0, i, i); //top right

        //sky blue lines
        stroke(135, 206, 235);
        line(width, height, 0, i); //bottom half
        line(0, 0, width, i); //top half
    }

}

When creating this I tried to create a fairly balanced composition with some areas having a denser amount of lines and some areas having not as many lines. I wanted to have some element of color change in order to change the way you perceive the drawing.

sketch3

//Fanjie Mike Jin
//Section C
//fjin@andrew.cmu.edu
//Project-04

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

function draw() {
    background(0);

    for (var i = 0; i < 401; i += 10){
 //top left curved lines
      stroke(179, 223, 242);
      line(i, 300, 0, i);
 //top left curved lines
      stroke(179, 183, 242);
      line(400 + i, 300, 0, i);
 //bottom right curved lines
      stroke(115, 236, 235);
      line(i, 300, 0, i / 2);
 //bottom right curved lines
      stroke(179, 223, 242);
      line(400 - i, 300, 400, i / 2);
//top right curved lines
      stroke(179, 223, 242);
      line(400 - i, 300, 400, i);
//top right curved lines
      stroke(179, 183, 242);
      line( - i, 300, 400, i);
//bottom left curved lines
      stroke(179, 223, 242);
      line(i , 0, 400, i * height / width / 2);
//bottom left curved lines
      stroke(115, 236, 235);
      line(i, 0, 400, i * height / width);
//top right curved lines
      stroke(115, 236, 235);
      line(400 - i, 0, 0, i * height / width / 2);
//top right curved lines
      stroke(115, 236, 235);
      line(400 - i, 0, 0, i * height / width);
// center line
      stroke(115, 236, 235);
      line(i ,0 ,0 ,i);
// center line
      stroke(115, 236, 235);
      line(400 - i ,0 ,400, i);
    }
}

In this project, I was interested in using a repetitive pattern to create an interesting composition. I was trying to use different curved lines to show depth of the layers and ultimately create a strong sense of different hierarchies.