//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Project-04
function setup() {
createCanvas(640, 640);
}
function draw() {
background(60);
stroke(49,19,255);// rain like blue meant to cover background
for (var x5 = 0; x5<width; x5+=width/50) {
for(var y5 = 0; y5 < height; y5 +=height/40){
line(x5, y5, x5+10, y5+30);
}
}
stroke(240,255,250);//light source from an angle meant to give the piece a further dimension
for (var x4=50;x4<=width*9/10;x4*=1.10) {
for(var y4=50;y4 <=height*8/10;y4*=1.10) {
line(x4,y4,width/6,height/2);
}
}
// the following figures are mmeant to be similarand are meant to look like legs.
stroke(234,103,200);
for (var x1 = 0; x1 <= width; x1+=100) {
for (var y1 = 0; y1 <= height; y1+=10){
line(x1,y1,x1+40,x1+40);
}
}
stroke(190,253,213);
for(var x2 = width; x2 >=0 ; x2-=100) {
for(var y2 = height-40; y2 >= 0; y2-=10){
line(x2,y2, x2+40, x2+40);
}
}
stroke(140,120,232);
for(var x3 = 0; x3 <=width;x3+=100){
for(var y3 = height; y3 >= 0; y3-=10){
line(x3,0,x3+40,y3-200);
}
}
} I restarted this project a few times. I wanted to experiment using the look system and incorporate the various functionalities I discovered in one piece. Although a bit abstract, the image above is supposed to depict a person crossing the street on a raining day. More importantly, the image uses short and frequent lines to simulate rain in the back layer of the image. By connecting many points to pixel, I was able to simulate distance and light using white lines. for the rest of the images I tried to emulate the stage of walking. with the green lines representing stepping forward in how the “knee” moves downward. In the future I hope to be able to use these with animation to simulate movement.
]]>//Shannon Case
//Section D
//scase@andrew.cmu.edu
//Project 04
function setup() {
createCanvas(640,480);
background(200);
}
function draw() {
var x0 = 130; //initial x position
var y0 = height/2 - 60; //initial y position
var x1 = 130; //end initial x position
var y1 = height/2 + 60; //end initial y position
var incX = 22.5; //how much x moves by
var incY = 20; //how much y moves by
var nextBox = 180; //moves to next box
background('pink');
strokeWeight(3);
stroke('green');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox; //moves to second gift box
x1 += nextBox;
}
//horizontal line
x0 = 130 + incX;
y0 = height/2 - 2*incY;
x1 = 130 - incX;
y1 = height/2 + 2*incY;
stroke('red');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox; //moves to second gift box
x1 += nextBox;
}
//first red line
x0 = 130 + 2*incX; //moves to right by increment*2
y0 = height/2 - incY;
x1 = 130 - 2*incX;
y1 = height/2 + incY;
stroke('red');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox;
x1 += nextBox;
}
//vertical green line
x0 = 130 + 3*incX;
y0 = height/2;
x1 = 130 - 3*incX;
y1 = height/2;
stroke('green');
for (i = 0; i<3; i++){
line(x0,y0,x1,y1);
x0 += nextBox;
x1 += nextBox;
}
//box
stroke('white')
noFill();
x0 = 0;
for (i = 0; i < 3; i++){
rect(60+x0, height/2 - 60, 140, 120);
x0 += nextBox;
}
noLoop();
println();
}
For this assignment I chose to use for loops to do a string drawing of some presents. I wanted to experiment with making string drawings that were representative of real things. I’m also super excited for the holidays to come and wanted to make a piece about it 🙂
]]>//Yugyeong Lee
//Section A (9:00AM)
//yugyeonl@andrew.cmu.edu
//Project-04
function setup() {
createCanvas(640, 480);
}
function draw() {
background(225, 219, 255);
noLoop();
var x = 0;
var y = 0;
//create "X" shape using two crossing shapes
for (var i = 0; i <=640; i +=10) {
stroke(255);
line(width - i, y, x, y + i*2);
line(i, height, width, height - i*2);
line(width - i, height, x, height - i*2);
line(i, y, width, y + i*2);
}
//create the outlining shapes
for (var i = 0; i <=640; i +=5) {
line(width - i, y, width, height - i*2);
line(i, height, x, y + i*2);
line(width - i, height, width, y + i*2);
line(i, y, x, height - i*2);
}
//create a diamond shape that will fill the center
for (var i = 150; i <=350; i +=5) {
line(width/2, height/5, 1.25*i, height/2);
line(1.25*i, height/2, width/2, 4*height/5);
}
}
In this project, I wanted to utilize the curving shape created by straight lines to create gradient by overlapping lines. The white lines overlap to create a gradient color in the background as well as creating shapes that embrace the center part.
]]>//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 04
lineWeight = 1;
function setup() {
createCanvas(640, 480);
background(235);
}
function draw() {
// width/4 = 160
strokeWeight(lineWeight); // standard line Weight
strokeCap(SQUARE); // sharp line edges
//first curve
var xLine = 1; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(xLine*i,height/2,width/2,0); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
// first curve second layer yellow
var xLine2 = 1; // x starting postion 2
var cB = 60; // starting blue color value
for(var i = 0; i < 160; i+= 28){
stroke(255,255,cB);
line(xLine2*i,height/2,width/2,0);
cB += i/4; // change blue
}
//first curve blue
var xLine3 = 1; // x starting postion 2
var cR = 0; // starting red color value
var cG = 200; // starting gree
for(var i = 0; i < 160; i+= 33){
stroke(cR,cG,255);
line(xLine3*i,height/2,width/2,0);
cR += i/4 + 30; // change red
cG += i/4;
}
//first curve repeated
var xLine = 1; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(xLine*i,height/2,width/2,0); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
//second curve pink - right side layer
var xLine4 = width; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(width/2,0,xLine4-i,height/2); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
//second curve yellow - right side
var xLine5 = width; // x starting postion
var cB = 60; // starting blue color value
for(var i = 0; i < 160; i+=28){
stroke(255,255,cB);
line(width/2,0,xLine5-i,height/2); // just chaning x value
cB += i/4; // making the color lighter
}
// second curve blue - right side
var xLine6 = width; // x starting postion
var cR = 0; //starting red color value
var cG = 200; // starting blue color value
for(var i = 0; i < 160; i+= 33){
stroke(cR,cG,255);
line(width/2,0,xLine4-i,height/2); // just chaning x value
cG += i/4; // making the color lighter
cR += i/4 + 30; // making the color lighter
}
//second curve pink - right side second layer
var xLine7 = width; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(width/2,0,xLine7-i,height/2); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
// third curve bottom left pink layer one
var xLine8 = 1; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(xLine8+i,height/2,width/2,height); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
// third curve bottom left blue layer
var xLine10 = 1; // x starting postion
var cG = 200; // starting green color value
var cR = 0; // starting red color value
for(var i = 0; i < 160; i+= 33){
stroke(cR,cG,255);
line(xLine10+i,height/2,width/2,height); // just chaning x value
cR += i/4 +30; // making the color lighter
cG += i/4; // making the color lighter
}
// third curve bottom left yellow layer
var xLine9 = 1; // x starting postion
var cB = 60; // starting blue color value
for(var i = 0; i < 160; i+= 28){
stroke(255,255,cB);
line(xLine9+i,height/2,width/2,height); // just chaning x value
cB += i/4; // making the color lighter
}
// third curve bottom left pink layer two
var xLine8 = 1; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(xLine8+i,height/2,width/2,height); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
//fourth curve bottom right pink layer
var xLine11 = width; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(width/2,height,xLine11-i,height/2); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
//fourth curve bottom right yellow layer
var xLine13 = width; // x starting postion
var cB = 60; // starting blue color value
for(var i = 0; i < 160; i+=28){
stroke(255,255,cB);
line(width/2,height,xLine13-i,height/2); // just chaning x value
cB += i/4; // making the color lighter
}
//fourth curve bottom right blue layer
var xLine12 = width; // x starting postion
var cB = 200; // starting blue color value
var cR = 0; // starting red value
for(var i = 0; i < 160; i+=33){
stroke(cR,cG,255);
line(width/2,height,xLine12-i,height/2); // just chaning x value
cG += i/4; // making the color lighter
cR += i/4 +30; //making color lighter
}
//fourth curve bottom right pink layer
var xLine14 = width; // x starting postion
var cG = 30; //starting green color value
var cB = 120; // starting blue color value
for(var i = 0; i < 160; i+=10){
stroke(255,cG,cB);
line(width/2,height,xLine14-i,height/2); // just chaning x value
cG += i/4; // making the color lighter
cB += i/4; // making the color lighter
}
}
function mouseDragged(){
lineWeight += 0.1; // line weight changes if pressed
if(lineWeight > 7){
lineWeight = 0;
}
}For this project I really wanted to keep the composition simple and just focus on learning how draw with for loops. I played around with CMYK color and how they can interact, but again my goal was to keep it simple and clean. I tried to make it more dynamic by adding gradient color and a mouseDragged function, so whenever the mouse is dragged the stroke Weight increases.
]]>I was trying to create intricate spaces reminiscent of a stained glass window taken to the extreme.
//Arula Ratnakar
//SectionC
//aratnaka@andrew.cmu.edu
//String Art
var y = 640
yTwo=0
var xStep = 50
function setup() {
createCanvas(480,640);
background('lightblue');
}
function draw() {
for (var i = 20; i< 480; i+=20)
line(width/2,0, i, y )
for (var i = 20; i<480; i+=20)
line (width/2, 640, i, yTwo)
for (var i = 20; i <640; i+=20)
line (0, height/2, 480, i)
for (var i = 20; i<640; i+=20)
line (480, height/2, 0, i)
for (var i = 20; i<640; i+=20)
line (0, 0, 480, i)
for (var i = 20; i<640; i+=20)
line (480, 0, 0, i)
for (var i = 20; i<640; i+=20)
line (0, 640, 480, i)
for (var i = 20; i<640; i+=20)
line (480,640, 0, i)
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p5.js vers 0.5.2, Edit index.html to Change This Title</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<!-- Uncomment the lines below to include extra p5 libraries, or
use template-all or template-all-min:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/addons/p5.sound.js"></script>
-->
<script src="sketch.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
// Liu Xiangqi xiangqil@andrew.cmu.edu Section-A Project-04
var strokeR = 204;
var strokeG = 230;
var strokeB = 255;
function setup(){
createCanvas(640, 480);
}
function draw() {
background(0);
//draw the outer ring
var x1 = 320;
var y1 = 0;
var x2 = 320-120*sqrt(3);
var y2 = 360;
var x3 = 320+120*sqrt(3);
var y3 = 360;
stroke(255);
noFill();
triangle(x1, y1, x2, y2, x3, y3);
push();
translate(width/2, height/2);
for (var i= 0; i < 60; i ++) {
strokeR = 204;
strokeG = map(i, 0, 30, 230, 153);
strokeB = 255;
stroke(strokeR, strokeG, strokeB);
rotate(radians(2));
triangle(x1-width/2, y1-height/2, x2-width/2, y2-height/2, x3-width/2, y3-height/2);
}
pop();
//draw the inner ring
var x4 = 320;
var y4 = 360;
var x5 = 320 - 60*sqrt(3);
var y5 = 180;
var x6 = 320 + 60*sqrt(3);
var y6 = 180;
stroke(255);
noFill();
triangle(x4, y4, x5, y5, x6, y6);
push();
translate(width/2, height/2);
for (var i= 0; i < 40; i ++) {
strokeR = map(i, 0, 30, 204, 255);
strokeG = map(i, 0, 30, 153, 204);
strokeB = map(i, 0, 30, 255, 204);
stroke(strokeR, strokeG, strokeB);
rotate(radians(3));
triangle(x4-width/2, y4-height/2, x5-width/2, y5-height/2, x6-width/2, y6-height/2);
}
pop();
//draw the innermost ring
var x7 = 320;
var y7 = 180;
var x8 = 320 - 30*sqrt(3);
var y8 = 270;
var x9 = 320 + 30*sqrt(3);
var y9 = 270;
stroke(255);
noFill();
triangle(x7, y7, x8, y8, x9, y9);
push();
translate(width/2, height/2);
for (var i= 0; i < 30; i ++) {
strokeR = 255
strokeG = map(i, 0, 30, 255, 204);
strokeB = map(i, 0, 30, 255, 204);
stroke(strokeR, strokeG, strokeB);
rotate(radians(4));
triangle(x7-width/2, y7-height/2, x8-width/2, y8-height/2, x9-width/2, y9-height/2);
}
pop();
}
function setup() {
createCanvas(640, 480);
}
function draw() {
background('lightpink');
//blue lines
for (i = 0; i < 50; i++) {
x1 = 0;
y1 = 480;
x2 = 0;
y2 = 0;
x1+= (i*60);
y1+= (i*5);
y2+= (i*20);
stroke('lightblue');
strokeWeight(1);
line(x1, y1, x2, y2);
}
//yellow lines
for (i = 0; i<50; i++) {
x1 = 640;
y1 = 480;
x2 = 640;
y2 = 240;
x1-= (i*20);
y1+= (i*1);
x2+= (i*2);
y2+= (i*10);
stroke(255, 240, 1);
strokeWeight(1);
line(x1, y1, x2, y2);
}
//grey lines
for (i = 0; i<50; i++) {
x1 = 320;
y1 = 0;
x2 = 640;
y2 = 0;
x1+= (i*16);
y2+= (i*15);
stroke(159, 150, 141);
strokeWeight(1);
line(x1, y1, x2, y2);
}
//green lines
for (i = 0; i<50; i++) {
x1 = 640;
y1 = 0;
x2 = 640;
y2 = 480;
x1-= (i*39);
y1-= (i*5);
y2-= (i*10);
stroke(154, 231, 217);
strokeWeight(1);
line(x1, y1, x2, y2);
}
//purple lines
for (i = 0; i<50; i++) {
x1 = 0;
y1 = 0;
x2 = 0
y2 = 240;
x1+= (i*16);
y2-= (i*10);
stroke(193, 155, 223);
strokeWeight(1);
line(x1, y1, x2, y2);
}
//pink lines
for (i = 0; i<50; i++) {
x1 = 0;
y1 = 240;
x2 = 0
y2 = 480;
x1-= (i*3)
y1+= (i*15);
x2+= (i*20);
y2-= (i*.01)
stroke(250, 104, 127);
strokeWeight(1);
line(x1, y1, x2, y2);
}
//dark green lines
for (i = 0; i < 50; i++) {
x1 = 640;
y1 = 0;
x2 = 0;
y2 = 0;
x1-= (i*30);
y1+= (i*.1);
x2+= (i*.1);
y2+= (i*25);
stroke(155, 183, 212);
strokeWeight(1);
line(x1, y1, x2, y2);
}
//light grey lines
for (i = 0; i < 50; i++) {
x1 = 0;
y1 = 480;
x2 = 640;
y2 = 480;
x1+= (i*30);
y1+= (i*.1);
x2+= (i*.1);
y2-= (i*25);
stroke(209, 190, 199);
strokeWeight(1);
line(x1, y1, x2, y2);
}
}
I used multiple grids along the edges of the canvas to create the pattern. The different color creating a depth to the pattern.
]]>function setup() {
createCanvas(640,480); //assigned canvas size
background(0); //black background
}
function draw() {
//Letter holes
fill(150); //fills the letter holes with gray
noStroke(); //no outline for the letter holes
var holeHeight = 280;
var holeWidth = 200;
var holeX = 95;
arc(holeX, height/2, holeWidth, holeHeight, -PI/2, PI/2, CHORD); //D hole
arc(width-holeX, height/2, holeWidth, holeHeight,PI/2, -PI/2, CHORD); //C hole, semi-circle portion
rect(width-holeX, height/2 - holeHeight/2, holeWidth, holeHeight); //C hole, rectangle portion
//Lines
strokeWeight(2);
for (var i=0; i<(width/2); i+=15) {
stroke(-225,255,255);
line(i, 0, width/2, i-height/8); //top left curve
line(width/2, (height/2)-i, i+width/2+10, 0); //top right curve
line(i, height, width/2, height-(i-height/8)); //bottom left curve
line(width/2, (height/2)+i, i+width/2+10, height); //bottom right curve
}
for (var i=0; i<(height/2); i+=15) {
stroke(255,0,0);
line(0, i, i*1.5, height/2); //left top curve
line(width, i, width - i*1.5, height/2); //right top curve
line(0, height-i, i*1.5, height/2); //left bottom curve
line(width, height - i, width - i*1.5, height/2); //right bottom curve
}
}
For my project, I wanted to play around with curves that met in the middle of the screen. I drew 4 blue curves that all met at the center point. After drawing these I realized that the negative space looked like it was spelling my initials — DC! So I filled in letter holes to make the DC pop out more, and then topped the piece with 4 more red curves on top for added depth.
]]>//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-04
/////////////////////////////
// DECLARE VARS
/////////////////////////////
//canvas
var canvasWidth, canvasHeight, cx, cy, margin
//mouse
var xm, xy; //constrained mouseX and mouseY\
//color
var bgColor, nColor, hColor; //background, normal, and highlight colors
//Spiral
var r0, theta0; //initial values for recursive spiral
/////////////////////////////
// HELPER FNS
/////////////////////////////
function drawSpiralArt(r, theta) {
//mouseX controls amount by which spiral lines are decimating
//in length with each recursive call
var reductionFactor = map(xm,0,canvasWidth,0,1);
//mouseY controls rotational increment between strings in the
//spiral. Varying this by numbers which are not factors of 2*pi
//leads to different types of spirals.
var angleIncrement = int(map(xy, 0, canvasHeight, 1, 10));
//get spiral points per call
var p1x = cx + r*sin(theta);
var p1y = cy + r*cos(theta);
var p2x = cx - r*sin(theta);
var p2y = cy - r*cos(theta);
//draw grey strings
stroke(nColor);
line(0, 0, p1x, p1y); //top left to p1
line(canvasWidth, 0, p1x, p1y); //top right to p1
line(0, canvasHeight, p1x, p1y); //bottom left to p1
line(canvasWidth, canvasHeight, p1x, p1y); //bottom right to p1
line(0, 0, p2x, p2y); //top left to p2
line(canvasWidth, 0, p2x, p2y); //top right to p2
line(0, canvasHeight, p2x, p2y); //bottom left to p2
line(canvasWidth, canvasHeight, p2x, p2y); //bottom right to p2
//draw main strings;
stroke(hColor);
line(p1x, p1y, p2x, p2y); //through center (core of spiral)
//recursive call until base case is met
if (r > 1) {
drawSpiralArt(r*reductionFactor, theta + angleIncrement);
}
}
/////////////////////////////
// RUN!
/////////////////////////////
function setup() {
//init canvas vars
canvasWidth = 640;
canvasHeight = 480;
cx = canvasWidth/2;
cy = canvasHeight/2;
margin = 30;
//init color vars
bgColor = color(255); //white
nColor = color(136,136,136,35); //grey, semitransparent
hColor = color(255,0,136); //fucia
//init spiral vars
r0 = canvasWidth/2
theta0 = HALF_PI;
//init canvas
createCanvas(canvasWidth, canvasHeight);
}
function draw() {
background(bgColor);
//recalculate mouseX, mouseY with constraints
xm = constrain(mouseX, margin, canvasWidth-margin);
xy = constrain(mouseY, margin, canvasHeight-margin);
//draw spiral
drawSpiralArt(r0, theta0);
}
I wanted to use trigonometry to create a series of points predicated on circular geometry and then connect the points to various other points across the canvas. I ended up using recursion to generate a central spiral. I then used the mouse position to control the degree to which the length of strings in the spiral decimates (the rate at which the strings spiral towards the center) and to control the rotational rate of the strings in the spiral, so that spirals of various character could be created.
Later sketch focusing on spiral series generated from recursive rules.
]]>
//Brandon Darreff
//Section A
//bdarreff@andrew.cmu.edu
//Project-04
var diam; //circle diameters
var h; //ribbon flared ends control
var x; //horizontal ribbon driver
var y; //vertical ribbon driver
var sd = 40; //starting diameter of circles
function setup() {
createCanvas(480, 640);
}
function draw() {
background(23, 51, 68);
noFill();
for(diam = sd; diam <= 260; diam *= 1.1) { //background circle left
stroke(75);
strokeWeight(1);
ellipseMode(CENTER); //modify ellipse drawing origin
ellipse(width / 2.4, height / 2.667, diam, diam);
}
for(diam = sd; diam <= 250; diam *= 1.1) { //background circle right
stroke(75);
ellipse(width / 1.37, height / 1.44, diam, diam);
}
h = 50; //assign flared end control value
for (y = 200; y <= 400; y += 10) {
stroke(200, 91, 111); //vertical ribbon color backdrop
strokeWeight(.5);
bezier(y + 80, 0, h + 5, 575, 450, 280, y + 75, height);
stroke(220);
strokeWeight(0.75); //vertical ribbon white overlay
bezier(y + 100, 0, h, 550, 500, 270, y + 10, height);
h -= 15 //flared end multiplier
}
for (x = 50; x <= 250; x += 15) {
stroke(200, 91, 111); //horizontal ribbon color backdrop
strokeWeight(0.35);
bezier(0, x - 30, 125, 305, 950, 300, 0, x + 370);
stroke(200); //horizontal ribbon white overlay
strokeWeight(0.25);
bezier(0, x - 50, 125, 285, 950, 300, 0, x + 350);
h -= 12; //flared end multiplier
}
for(diam = sd; diam <= 230; diam *= 1.05) { //white circle left
stroke(255);
strokeWeight(1);
ellipse(width / 2.133, height / 2.783, diam, diam);
}
for(var diam = sd; diam <= 150; diam *= 1.05) { //white circle right
stroke(215);
ellipse(width / 1.574, height / 1.471, diam, diam);
}
}
With this project I explored using arrayed curves to mimic ribbons across the defined canvas. By focusing in on the intersection points of the two ribbons using ellipses, the intent was to create depth using tone and varying line weights.
