hyt-Project-04: Dynamic Drawing

hyt-04-project

// helen tsui
// 15-104 section d
// hyt@andrew.cmu.edu
// project-03-dynamic-drawing


var angle = 0; // line rotating angle

function setup() {
  createCanvas(400, 300);
  background(0, 0, 0);
//  angleMode(DEGREES);

}


function draw() {

// left side gradient lines
    var x1 = 0; 
    var y1 = 0; 

    push();
    for (var i = 0; i < 200; i++) {
        translate(mouseX, 0);
        map(mouseX, 0, width, 100, 250);
        stroke(150, 201 - i * 2, 202);
        strokeWeight(1);
        x1 += 5;
        y1 += 5;
        line(x1, y1, x1 + i * 7, y1);
    }
    pop();

// left bottom "shadow" on the highlight
    var x2 = 0; 
    var y2 = 0;
    push();
    for (var i = 0; i < 200; i++) {
        //rotate(radians(x2 *3));
        stroke(150 + i * 2, 189, 226);
        x2 -= 5; 
        y2 += 5; 
        line(x1, y1, 0, y2);
    }
    pop();

// left top corner
    var x3 = 20; 
    var y3 = height / 2; 
    for (var i = 0; i < 50; i++) {
        stroke(125, 206, 160 +i * 10);
        line(x3, 0, 0, y3);
        x3 += 10;
        y3 -= 10;
    }

// right top corner
    var x4 = width / 2; 
    var y4 = height / 2; 
    for (var i = 0; i < 50; i++) {
        stroke(246, 221, 204 + i *4);
        line(x4, 0, width, y4);
        x4 -= 10; 
        y4 -= 10;
    }

// spotlight

ellipse(350, 250, 40, 40);

}

For this project i wanted to create something that resembles a stage lighting design, hence the creation of this neon color drawing. I thought the corner drawings were actually not as hard as aligning perfectly the middle section (the two horizontal lined triangles).

mecha-project04-string-art

sketch

//global variables that hold x and y position as well as the amount that is added to both values
//(different x and y variables per function)

var x1 = -100;
var y1 = 0;
var x1Step = 2;
var y1Step = 4;

var x2 = 400;
var y2 = 0;
var x2Step = 2;
var y2Step = 2;

var gradient = 0;
var gradient2 = 256;
var gradient3 = 256;

var x11 = 0;
var x22 = 400;
var y11 = 300;
var y22 = 0;
var x11Step = 0.5;
var y11Step = 1;
var x22Step = 0.5;
var y22Step = 1;

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

function draw() {
    //makes background change color value
    background(gradient3--);
    //calls functions that produce lines
    lines();
    lines2();
    lines34();
}

//lines converging in center
function lines(){
    var x1constrain = constrain(mouseX,-100,0);
    strokeWeight(0.8);
    for(var i=0;i<1000;i+=10){
        stroke(gradient+i);
        line(x1constrain+i, 0, 0, y1-i);

    }
    x1+=x1Step;
    y1+=y1Step;
}

//lines converging in center
function lines2(){
    var y2constrain =constrain(mouseX,-100,0);
    strokeWeight(0.8);
    for(var i=0;i<1000;i+=10){
        stroke(gradient2-i);
        line(x2-i, 300, 400, y2constrain+i);

    }
    x2-=x2Step;
    y2+=y2Step;
}

//slower corner lines
function lines34(){
    //increases i at a faster rate so as to draw less lines
    for(var i=0;i<1000;i+=30){
        stroke(gradient+i*1.2);
        line(x11+i,0,0,y11-i);
        stroke(gradient+i*1.2);
        line(x22-i,300,400,y22+i);
    }
    //changes x11 and y22 values so that it creates a curve
    x11+=x11Step;
    y11-=y11Step;
    x22-=x22Step;
    y22+=y22Step;
}

For this project, I decided that I wanted to play with adding motion into my string art. I started with figuring out the values in order to make the first loop of lines in the top left corner and used my experimentation with that in order to mirror the lines into the bottom right corner.

While I thought that the two looked interesting together, I decided that rather than create two more loops for the other corners, I wanted to create two new series of lines that would start from the same corner but act in a very different way. While playing around with that concept, I came up with the code below.

sketch

//lines1 variables
var x1=0;
var x1Step=0.5;
var y1=300;
var y1Step=1;
var x2=400;
var x2Step=1;
var y2=0;
var y2Step=1;
var gradient=0;

var y3=100;
var y3Step=0.5;
var x3=1000;
var x3Step=1;
var y4=400;
var y4Step=1;
var x4=400;
var x4Step=1;


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

function draw() {
    background(255,200,200);
    lines1();
}

function lines1(){
    if(y1 >0 & y1 < 300){
    for(var i=0;i<1000;i+=20){
        strokeWeight(0.8);
        //gradient black to white lines
        stroke(gradient+i*1.2);
        line(x1+i,0,0,y1-i);
        //teal lines
        stroke(gradient+i*1.2);
        line(x2-i,300,400,y2+i);
    }
}
     for(var i=0;i<1000;i+=60){
        strokeWeight(0.8);
        stroke(0);
        line(0,y3+i,x3-i,0);
        stroke(256);
        line(0,y4-i,x4+i,0);
    }
    x1+=x1Step;
    y1-=y1Step;
    x2-=x2Step;
    y2+=y2Step;
    x3+=x3Step;
    y3-=y3Step;
    x4-=x4Step;
    y4+=y4Step;

}

Although I found that I was able to satisfy the requirements of the project, I decided that I was not satisfied with the inconsistent ways that the lines would move, so I restarted and played around with changing different variables. Through more experimentation, I was able to come up with my final code, which appeared more sophisticated in terms of the spacing of the grid it created as well as the monochrome colors.

ssontag-Project-04

For this project i struggled with creating something visually exceptional because of my limited knowledge of how to use for loops to create interesting visuals. So i added a animation aspect using the position of the mouse to determine the visuals.

sketch


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

function draw() {
    background(210);
//i used a for loop to iterate the value of i so i could create a
//curve made from lines that have an incremental value based on i
    for (var i = 0; i <= 300; i += 20) {
//using the x value of x i made two sets of lines that are connected at the x value of the mouse
// by making two sets the curves can be moved from the left side to the right side of the canvas
        stroke(0, 128, 128);
        line(i, 0, mouseX, height - i);
        line(i, 300, mouseX, i);

        stroke(0, 0, 128);
        line(width - i, 0, mouseX, height - i);
        line(width - i, 300, mouseX, i);

//using the y value of y i made two sets of lines that are connected at the y value of the mouse
// by making two sets the curves can be moved from the top to the bottom of the canvas
        stroke(128, 128, 0);
        line(0, height - i, width- i, mouseY);
        line(400, height - i, i, mouseY);

        stroke(0, 128, 0);
        line(0, i, width - i, mouseY);
        line(400, i, i, mouseY);
    }
}

Project 4, odh

odhP4

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 4

var W = 1;  //Value of strokeweight
var B = 150;//Value of B in RGB

function setup() {
    createCanvas(400, 300);
}
 
function draw() {
    background(50, 50, B);
    strokeWeight(W);

    //Sets up the series of lines and how they move with the mouse's location
    for(var i = 0; i < 20; i ++){
        line(mouseX, i*20, 400-i*10, height);
        line(mouseX, i*20, i*10, height);
        line(400, i*20, 100+i*10, mouseY);
        line(0, i*20, 100+i*10, mouseY);
    };

    //Determines the color of the background and 
    // the strokeweight of th lines based on the mouse's location
    if (mouseX > width/2) {
        W = 2;
        B = 255;
    } else {
        W = 1;
        B = 150;
    };
    if (mouseY > height/2) {
        W = 3;
        B = 0;
    } else {
        W = 1;
        B = 150;
    }; 
}

I used some simple loops to have the arrangement of the series of lines be determined by the mouse’s location. Then I practiced more with “if” statements and added some conditionals.

monicah1-project-04

sketch

var x = 100;
var y = 10;

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

function draw() {
	background(0);
	for (var i = 10; i<50; i+=5){
		strokeWeight(1);
		stroke("blue");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 20; i<70; i+=5){
		strokeWeight(2);
		stroke("yellow");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 30; i<80; i+=5){
		strokeWeight(3);
		stroke("green");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 40; i<90; i+=5){
		strokeWeight(3);
		stroke("red");
		line(mouseX, i*y,i*y, mouseY);
	}
	for (var i = 40; i<90; i+=5){
		strokeWeight(3);
		stroke("yellow");
		line(mouseY, i*y,i*y, mouseX);
	}
	for (var i = 30; i<80; i+=5){
		strokeWeight(3);
		stroke("blue");
		line(mouseY, i*y,i*y, mouseX);
	}
	for (var i = 20; i<70; i+=5){
		strokeWeight(2);
		stroke("red");
		line(mouseY, i*y,i*y, mouseX);
	}
}

I played with the angles, colors, and movements.

dayoungl Project 04

sketch

//Sharon Lee
//dayoungl@andrew.cmu.edu
//Section E
//Project 4
var ychange = 30;
var xchange = 10; 
var x1 = 1;
var x2 = 150;
var x3 = 100;
var y1 = 200;
var y2 = 1;
var y3 = 55;
var r;
var g;
var b;
function setup(){
	//randomzied colour
	r = random(255);
	g = random(255);
	b = random(255);
	createCanvas(300,400);	
}

function draw() {
	background (255);
	for(var i = 0; i < 100; i +=1){
		strokeWeight(0.5);
		stroke(0);
		line(x2, mouseY, 300 , ychange *i);
		line(x2, mouseY, 0 , ychange *i);
		stroke(r,g,b);
		strokeWeight(1);
		line(mouseX, ychange * i, xchange * i, y2); 
		line(x2, y1, 300, ychange *i);
		line(x2, y1, 0, ychange * i);
	}
}

//when mouse is clicked, string changes colour
function mousePressed (){
	stroke(r,g,b);
	r = random(255);
	g = random(255);
	b = random(255);
}

I wanted to make my string art minimal as possible because I like minimalistic art. I like the fact that this looks like a graphic poster.

Project-04-StringArt-sjahania

sketch

var density; //changes how thick the arcs are

//changes the colors
var col1; 
var col2;


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

function draw() {
	//redraws a new canvas every time the mouse is pressed
	fill(240);
	rect(0,0,400,300);

	//sets the colors based on the x coordinate of the mouse
	col1 = mouseX/(400/255);
	col2 = mouseX/(400/255);

	for (var a = 0; a < 400; a += density) {
		//draws the top left arc
		stroke(180,255 - col2,180);
		line(a, 0, 0, 400-a);

		//draws bottom left arc
		stroke(255 - col1,180,180);
		line(400 - a, 300, 0, 300 - a);

		//draws bottom right arc
		stroke(180,col2,180);
		line(a, 300, 400, 300 - a);


		//draws top right arc
		stroke(col1,180,180);
		line(a, 0, 400, a);
	}

}
//changes the thickness of the arcs by drawing a different # of lines
function mousePressed() {
	density = random(5,12);
}


Using the for loop took me a while because it is different enough from python to really throw me off. Once I figured it out, I had fun making different shapes, but I settled for something symmetrical because the other shapes I made weren’t very aesthetically pleasing. Then I played with colors.

katieche – project 04

katieche-04

 	var x = 200;
 	var curve = 400;
 	var v = 7;



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

function draw(){
		background(240);

	for (var i = 0; i<=500; i++) {
		strokeWeight (0.2);
		stroke (180);
		// bottom left
		line(i*v, height, x, height-i*v);
		// bottom right
		line (mouseX, i*v, i*v, mouseY);
		// top right
		line(x, i*v, width-(i*v), 0); 
		// top left
		line(i*v, mouseY, mouseX, i*v);

	}

}

This project was difficult for me as it was hard for me to understand which values to multiply to which variable. It was a lot of guess and check and hard to get the curves to do exactly what I wanted, but I think the end result is pretty fun to play with.

Ziningy1 – SectionC – Project 4 – String art

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-04

var x=100;
var xstep=3; 

var y=1;
var ystep=3;

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

function draw() {
    background(0);
    angleMode(DEGREES);
    
    //the red twisted string curve 
    stroke(250,200,200);
    for (var i = 0; i < 400; i += 2) {
      
      line(3*i, height-2*i-y, 2*i, 1.5*i+20+y);
     
    }
    
    //the right and left green string curve 
    stroke(200,250,200);
    for (var i = 0; i<200; i += 2){
    
    line(x, 2*i,3*i,height/2+2*i+x);

    line(400-x,2*i,400-3*i,height/2+2*i+x);
    }
    
    //blue rotational string curve
    stroke(200,200,250);
    for (var i = 0; i<300; i += 2){
    line(x+i,300*sin(i),width-x-20-i,100*sin(i))
      
      
    }

    //adding the xstep and ystep will make the string start moving  
    //the conditonal makes the repeat between left and right, 

    y += ystep;
    if(y>300){
    y = -y
    
    }

    x += xstep;
    if(x>600){
    x= -x;
    
    } 



}
  













   


    







It is pretty abstract for me to create a string art image in my mind before coding it. I started by randomly test some of the combination of line positions, then I started to understand more intuitively how i would like to construct my art. I find adding the xstep, ystep very effective in making the string art in motion, which also create some sort of visual illusion that is pleasing to look at.

eeryan-Project4-StringArt

sketch

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

function draw() {
  background(221,251,171);
  //curve 1
    startX = 400;
    stopX = 200;
    startY = 150;
    stopY = 0;
  for(var n = 0; n <20; n++){
    stroke(0);//black
    strokeWeight(1);
    line(startX, startY + 20,stopX - 20, stopY);
    startY += 20;
    stopX += 7;
  }
  
  //curve 2
    startX = 400;
    stopX = 0;
    startY = 250;
    stopY = 0;
  for(var n = 0; n < 20; n++){
    stroke(0,0,255);//blue
    strokeWeight(1);
    line(startX, startY - 20, stopX + 10, stopY);
    startX += 2;
    stopY += 20;
  }
  
  //curve 3
    startX = 0;
    stopX = 400;
    startY = 150;
    stopY = 0;
  for(var n = 0; n < 40; n++){
    stroke(200,118,165);//pink
    strokeWeight(2);
    line(startX, startY, stopX, stopY);
    startX += 10;
    stopY += 10;
  }
  //curve 4
    startX = 400;
    stopX = 200;
    startY = 150;
    stopY = 0;
  for(var n = 0; n <20; n++){
    stroke(255,0,0);//red
    line(startY + 20, startX,stopY, stopX - 20);
    startY += 20;
    stopX += 7;
  }
}

I used for loops with various add ons to create four different “curves”. I played around with adding mouse interaction but I didn’t think it looked cohesive when one or two of the curve’s moved along with the mouse. I chose a color palette that matched the modern feel of the assignment.