# Designs! Lines!

This is me playing around with Processing. It took me a surprisingly long time but I think I managed to create something that made sense. It was a challenge thinking about coordinates. I was tempted to do crazier things with these lines but it was tricky mapping them out. Will do another attempt soon!

# Flappy Bird

Simple flappy bird design.

```{
size (400, 400);
background(97, 217,141);

fill(255, 244, 79);
strokeWeight(3);
stroke(0);
ellipse(200, 200, 200, 150);

fill(255, 250, 150);
stroke(0);
ellipse(115,200, 80, 60);

fill(255,255,255);
stroke(0);
ellipseMode(CORNERS);
ellipse(225,140,280,200);

line(270,170,265,180);
line(268,170,263,180);

fill(200,0,0);
stroke(0);
ellipseMode(CORNERS);
rect(250, 210, 70, 13);
rect(250, 223, 55, 14);

triangle(235, 220, 250, 210, 250, 238);

}```

# woOoOoOooo

not sure what else to call it…

```size(610,250);
background(112,128,144);

{
fill(225,228,225);
rect(100,50,20,200);
rect(90,45,20,200);
rect(80,40,20,200);
rect(70,35,20,200);
rect(60,30,20,200);
rect(50,25,20,200);
rect(40,20,20,200);
rect(30,15,20,200);
rect(20,10,20,200);
rect(10,5,20,200);
rect(0,0,20,200);
}

fill(225,228,225);
rect(0,50,20,200);
rect(10,45,20,200);
rect(20,40,20,200);
rect(30,35,20,200);
rect(40,30,20,200);
rect(50,25,20,200);
rect(60,20,20,200);
rect(70,15,20,200);
rect(80,10,20,200);
rect(90,5,20,200);
rect(100,0,20,200);

fill(225,228,225);
rect(200,50,20,200);
rect(190,45,20,200);
rect(180,40,20,200);
rect(170,35,20,200);
rect(160,30,20,200);
rect(150,25,20,200);
rect(140,20,20,200);
rect(130,15,20,200);
rect(120,10,20,200);
rect(110,5,20,200);
rect(100,0,20,200);

fill(225,228,225);
rect(100,50,20,200);
rect(110,45,20,200);
rect(120,40,20,200);
rect(130,35,20,200);
rect(140,30,20,200);
rect(150,25,20,200);
rect(160,20,20,200);
rect(170,15,20,200);
rect(180,10,20,200);
rect(190,5,20,200);
rect(200,0,20,200);

fill(225,228,225);
rect(300,50,20,200);
rect(290,45,20,200);
rect(280,40,20,200);
rect(270,35,20,200);
rect(260,30,20,200);
rect(250,25,20,200);
rect(240,20,20,200);
rect(230,15,20,200);
rect(220,10,20,200);
rect(210,5,20,200);
rect(200,0,20,200);

fill(225,228,225);
rect(200,50,20,200);
rect(210,45,20,200);
rect(220,40,20,200);
rect(230,35,20,200);
rect(240,30,20,200);
rect(250,25,20,200);
rect(260,20,20,200);
rect(270,15,20,200);
rect(280,10,20,200);
rect(290,5,20,200);
rect(300,0,20,200);

fill(225,228,225);
rect(400,50,20,200);
rect(390,45,20,200);
rect(380,40,20,200);
rect(370,35,20,200);
rect(360,30,20,200);
rect(350,25,20,200);
rect(340,20,20,200);
rect(330,15,20,200);
rect(320,10,20,200);
rect(310,5,20,200);
rect(300,0,20,200);

fill(225,228,225);
rect(300,50,20,200);
rect(310,45,20,200);
rect(320,40,20,200);
rect(330,35,20,200);
rect(340,30,20,200);
rect(350,25,20,200);
rect(360,20,20,200);
rect(370,15,20,200);
rect(380,10,20,200);
rect(390,5,20,200);
rect(400,0,20,200);

fill(225,228,225);
rect(500,50,20,200);
rect(490,45,20,200);
rect(480,40,20,200);
rect(470,35,20,200);
rect(460,30,20,200);
rect(450,25,20,200);
rect(440,20,20,200);
rect(430,15,20,200);
rect(420,10,20,200);
rect(410,5,20,200);
rect(400,0,20,200);

fill(225,228,225);
rect(400,50,20,200);
rect(410,45,20,200);
rect(420,40,20,200);
rect(430,35,20,200);
rect(440,30,20,200);
rect(450,25,20,200);
rect(460,20,20,200);
rect(470,15,20,200);
rect(480,10,20,200);
rect(490,5,20,200);
rect(500,0,20,200);

fill(225,228,225);
rect(500,50,20,200);
rect(510,45,20,200);
rect(520,40,20,200);
rect(530,35,20,200);
rect(540,30,20,200);
rect(550,25,20,200);
rect(560,20,20,200);
rect(570,15,20,200);
rect(580,10,20,200);
rect(590,5,20,200);
rect(600,0,20,200);

fill(225,228,225);
rect(600,50,20,200);
rect(590,45,20,200);
rect(580,40,20,200);
rect(570,35,20,200);
rect(560,30,20,200);
rect(550,25,20,200);
rect(540,20,20,200);
rect(530,15,20,200);
rect(520,10,20,200);
rect(510,5,20,200);
rect(500,0,20,200);

fill(225,228,225);
rect(600,50,20,200);
rect(610,45,20,200);
rect(620,40,20,200);
rect(630,35,20,200);
rect(640,30,20,200);
rect(650,25,20,200);
rect(660,20,20,200);
rect(670,15,20,200);
rect(680,10,20,200);
rect(690,5,20,200);
rect(700,0,20,200);```

# ‘Murica!

I  was inspired to do this drawing because of the flag hanging above my bed. When trying to think of a geometric drawing, I realized that the American flag has a bunch of shapes and lines, so it would be the perfect candidate. However, I decided not to go for all 50 stars, to spare you the code eyesore and me the confusion of dealing with 50 different star shapes. What came out is my personal take on the flag, with 8 wonky stars and a black background to make it pop more.

my code:

```size(800,500);
background(0);

stroke(255,0,0);//1
fill(255,0,0);
rect(100,100, 600, 23);

stroke(255,255,0);//2
fill(255);
rect(100,123, 600, 23);

stroke(255,0,0);//3
fill(255,0,0);
rect(100,146, 600, 23);

stroke(255);//4
fill(255);
rect(100,169, 600, 23);

stroke(255,0,0);//5
fill(255,0,0);
rect(100,192, 600, 23);

stroke(255);//6
fill(255);
rect(100,215, 600, 23);

stroke(255,0,0);//7
fill(255,0,0);
rect(100, 238, 600, 23);

stroke(255);//8
fill(255);
rect(100,262, 600, 23);

stroke(255,0,0);//9
fill(255,0,0);
rect(100,284, 600, 23);

stroke(255);//10
fill(255);
rect(100,307, 600, 23);

stroke(255,0,0);//11
fill(255,0,0);
rect(100,330, 600, 23);

stroke(255);//12
fill(255);
rect(100,353, 600, 23);

stroke(255,0,0);//13
fill(255,0,0);
rect(100,376, 600, 23);

stroke(0,0,255);//blue
fill(0,0,255);
rect(100,100, 200,161);

stroke(255);
fill(255);
beginShape();//row 1 star 1
vertex(125, 100);//t
vertex(132, 126);//rti
vertex(148, 126);//r
vertex(140, 152);//ri
vertex(148, 180);//rb
vertex(125, 152);//b
vertex(100, 180);//lb
vertex(110, 152);//li
vertex(100, 126);//l
vertex(116, 126);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 1 star 2
vertex(175, 100);//t
vertex(182, 126);//rti
vertex(197, 126);//r
vertex(190, 152);//ri
vertex(197, 180);//rb
vertex(175, 152);//b
vertex(150, 180);//lb
vertex(160, 152);//li
vertex(150, 126);//l
vertex(166, 126);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 1 star 3
vertex(225, 100);//t
vertex(232, 126);//rti
vertex(248, 126);//r
vertex(240, 152);//ri
vertex(248, 180);//rb
vertex(225, 152);//b
vertex(200, 180);//lb
vertex(210, 152);//li
vertex(200, 126);//l
vertex(216, 126);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 1 star 4
vertex(275, 100);//t
vertex(282, 126);//rti
vertex(297, 126);//r
vertex(290, 152);//ri
vertex(297, 180);//rb
vertex(275, 152);//b
vertex(250, 180);//lb
vertex(260, 152);//li
vertex(250, 126);//l
vertex(266, 126);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 2 star 1
vertex(125, 180);//t
vertex(132, 206);//rti
vertex(148, 206);//r
vertex(140, 232);//ri
vertex(148, 260);//rb
vertex(125, 232);//b
vertex(100, 260);//lb
vertex(110, 232);//li
vertex(100, 206);//l
vertex(116, 206);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 2 star 2
vertex(175, 180);//t
vertex(182, 206);//rti
vertex(197, 206);//r
vertex(190, 232);//ri
vertex(197, 260);//rb
vertex(175, 232);//b
vertex(150, 260);//lb
vertex(160, 232);//li
vertex(150, 206);//l
vertex(166, 206);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 2 star 3
vertex(225, 180);//t
vertex(232, 206);//rti
vertex(248, 206);//r
vertex(240, 232);//ri
vertex(248, 260);//rb
vertex(225, 232);//b
vertex(200, 260);//lb
vertex(210, 232);//li
vertex(200, 206);//l
vertex(216, 206);//lti
endShape(CLOSE);

stroke(255);
fill(255);
beginShape();//row 2 star 4
vertex(275, 180);//t
vertex(282, 206);//rti
vertex(297, 206);//r
vertex(290, 232);//ri
vertex(297, 260);//rb
vertex(275, 232);//b
vertex(250, 260);//lb
vertex(260, 232);//li
vertex(250, 206);//l
vertex(266, 206);//lti
endShape(CLOSE);```

# Rose Colored Glasses

Woo!

```size(640,360);
stroke(255,255,255);
fill(255,15,155);
rect(200,100,100,70);
stroke(255,255,255);
fill(255,25,255);
rect(400,100,100,70);
line(300,125,400,125);
line(300,150,400,150);
line(100,50,200,150);
line(600,50,500,150);```

# I Can Draw Flowers (And Other Daily News) (AKA Flower Power)

I decided just to get used to drawing with the simplest idea I could think of. A flower on some grass with some clouds. And that is what I did. As you can see in the picture:

I wanted to try working with arcs and that’s what I did. I was going to add more but then I decided why mess with a perfectly beautiful drawing. As far as the other daily news, well I lied about that, you can always ask me about that later if you so choose.

Now for the fun part! Here’s my code:

```size(600,600);
background(0,150,255);

stroke(255);
fill(255);
ellipse(50,50,200,200);
ellipse(200,30,200,150);
ellipse(350,50,200,250);
ellipse(500,20,200,75);
ellipse(575,45,200,160);

stroke(0);
fill(255);
arc(50,50,100,100,0,PI+QUARTER_PI,OPEN);
arc(250,30,75,75,0-QUARTER_PI,PI-QUARTER_PI,OPEN);
arc(400,10,50,50,PI-QUARTER_PI,PI+QUARTER_PI,OPEN);
arc(575,30,60,60,0-QUARTER_PI,PI-QUARTER_PI,OPEN);

stroke(0,50);
fill(0,255,0);
ellipse(450,425,100,30);

stroke(0,90);
line(415,425,490,425);
line(415,425,420,430);
line(415,425,420,420);
line(425,425,435,435);
line(425,425,435,415);
line(435,425,445,435);
line(435,425,445,415);
line(445,425,455,435);
line(445,425,455,415);
line(455,425,465,435);
line(455,425,465,415);
line(465,425,475,435);
line(465,425,475,415);
line(475,425,480,430);
line(475,425,480,420);
line(485,425,487,427);
line(485,425,487,423);

stroke(0,255,0);
fill(0,255,0);
rect(380,300,25,400);

stroke(200,40,255);
fill(200,40,255);
ellipse(395,320,150,150);

stroke(100,0,255,50);
fill(100,0,255,75);
ellipse(395,320,100,20);

stroke(255,0,0,50);
fill(255,0,0,75);
ellipse(395,320,20,100);

stroke(0,50);
fill(0,50);
ellipse(395,320,25,25);

stroke(50,255,50);
fill(50,255,50);
rect(0,500,600,100);```

And there you have it folks!

# Meow!

I like cats, so I decided to make a cat!

```void setup(){
size(600,600);
}

void draw(){
background(219,255,240);
fill(111,89,126);
ellipseMode(CENTER);
ellipse(300,300,400,400);

//Left Eye
fill(0);
ellipseMode(CORNER);
ellipse(220, 260, 20, 20);

//Right Eye
fill(0);
ellipseMode(CORNER);
ellipse(360, 260, 20, 20);

//Left Ear
fill(111, 89, 126);
triangle(80, 80, 107, 250, 220, 118);

//Right Ear
fill(111, 89, 126);
triangle(520, 80, 493, 250, 380, 118);

//Nose
fill(255, 167, 249);
triangle(285, 330, 315, 330, 300, 360);

//Whiskers
line(150, 280, 270, 345);
line(330, 345, 450, 280);

line(150, 355, 270, 355);
line(330, 355, 450, 355);

line(150, 420, 270, 365);
line(330, 365, 450, 420);

}```

# Rothko toast

(Excuse for not doing the other assignment…yet:

Strange way to explain things but I think the neural pathways in my brain tie themselves into knots each time I try to figure out how variation in the Arduino software works so I’m putting off the stupid pet trick for some doodling.)

The idea:

One day I came across a post from San Francisco Museum of Art (SFMOMA)’s Tumblr on their pastry team’s (yep, they have one) art-inspired treats (check them out). I was inspired by their recreation of a Mark Rothko piece using toast and jam and since I’m all about making art engaging and enjoyable, if not edible, I present to you two slices of ROTHKO TOAST:

The code (or recipe?):

```size(640,360);
//(width,height of screen)
background(100,100,200); //periwinkle, I guess

//ROTHKO NO.10 ON WHITE
//(Red,Green,Blue)
fill(230,160,90); //white wheat toast
rect(100,75,210,200,65,65,15,15);
//rect(x,y,width,height,top left radius,top right,bottom left,bottom right)
//more rounded on top left and right edges

stroke(220,255,205);
fill(220,255,205); //maybe...sour cream and onion cream cheese?
rect(120,90,170,5);
//(x,y,w,h,radius of all edges - because can you apply condiments neatly?)

stroke(25,45,130,230);
//(R,B,G,A for transparency)
fill(25,45,130,230); //blueberry jam
rect(110,100,190,20,5);

stroke(255,205,0);
fill(255,205,0); //BUTTER!
rect(110,125,190,80,5);

stroke(220,255,205);
fill(220,255,205);
rect(110,210,190,60,5);

//ROTHKO NO.14 ON WHOLE WHEAT
stroke(110,50,0); //the crust
fill(170,90,20); //whole wheat toast
rect(350,75,210,200,65,65,15,15);

stroke(210,30,40);
fill(210,30,40); //strawberry or raspberry jam
rect(360,100,190,100,5);

stroke(25,45,100,230);
fill(25,45,100,230); //blueberry jam
rect(360,205,190,65,5);```

# Mother and Baby Sphere in the Playroom

For my design I tried using some animation and some 3D shapes. I don’t have a solid grasp of it yet but I got something working. View it on my website.

```float a = 0.0;

void setup() {
size(720,480, P3D);
}

void draw() {
background(149,255,224);

fill(253,216,235);
noStroke();
rect(100,90,100,100);

a += 0.005;
if(a > TWO_PI) {
a = 0.0;
}

translate(370,250,0);
rotateY(a);
stroke(255);
noFill();
box(200);

translate(0, 0, 0);
rotateY(a * 2);
noFill();
sphereDetail(7);
sphere(100);

translate(200,0,0);
rotateY(a * 2);
noFill();
sphereDetail(7);
sphere(50);
}```

# Muffin Men 2014

My friends and I -the self proclaimed ‘muffin men’ – draw a muffin whenever we get a chance.

My first experience with drawing with code was in Steinhardt’s Introduction to Digital Art. In that class we didn’t use processing, but did a similar assignment. You can check it out on my website.

I’d like to improve on the muffin through the semester. After drawing a new muffin in the processing environment, I took the first step to making interactive. Using the mouseX and mouseY functions/parameters and an if statement, I made it so the colors of the shapes change based on mouse movement. As we continue to explore mouseX & mouseY, I hope to make the interactiveness more fun and understandable. The code goes:

```void setup() {size(800,800);
background(88,30,106,1);
}

void draw(){

//if statement courtesy of Barbara Compagnon via openprocessing
if (mouseX>200 && mouseX < 400 && mouseY > 200 && mouseY < 400){
fill(0);
}
else {fill(88,30,106,1);
}
rect(125,550,550,175);
ellipse(125+75,550-100,250,250);
ellipse(125+550-75,550-100,250,250);
ellipse(125+150,550-225,225,225);
ellipse(125+550-150,550-225,225,225);
ellipse(400,550-300,225,225);
rect(250,250,300,300);

}```

# The World Will End in Processing

Wait, this doesn’t look very sinister, you say.

….

Or is it?

Some predict that the end of the world involves an interaction between Earth and the black hole at the center of the galaxy, the next meteor crashing down, or a collision with a planet called Nibiru. Meanwhile, I predict that the world will end in an explosion of bokeh and unhappy computer fans

Although really, this is just a few randomly generated ellipses, so there shouldn’t be anything to worry about. Right?

```void setup () {
size(600,600);
smooth();
noCursor();
stroke(0, 0, 0);
}

void draw (){
background(0);

drawEllipse(200, 200, 30, 50);
drawEllipse(400, 200, 50, 50);
drawEllipse(200, 400, 100, 50);
drawEllipse(400, 400, 210, 50);

}

void drawEllipse(float x, float y, float r, float b) {

fill(r, 0, b);
ellipse(random(x), random(y), 20, 20);

}```

# Drawrrr

So yeah, I did a face!

```size(280,300);
background(255,216,179);

color a = color(117, 91, 67); //left eye
fill(a);
noStroke();
quad(70, 45, 130, 42, 100, 100, 40, 90);

fill(a);   //right eye
noStroke();
quad(210, 45, 150, 42, 180, 100, 240, 90);

color c = color(152, 113, 77); //nose
fill(c);
noStroke();
triangle(140, 175, 165, 130, 115, 130);

color d = color(140, 68, 0); //lip
fill(d);
noStroke();
quad(110, 168, 170, 168, 180, 187, 100, 187);

noStroke();
quad(125, 200, 155, 200, 150, 220, 130, 220);

color e = color(47, 23, 0); //hair
fill(e);
noStroke();
rect(0, 0, 40, 300);

fill(e);
noStroke();
rect(240, 0, 40, 300);

fill(e);
noStroke();
triangle(180, 0, 240, 0, 240, 100);

fill(e);
noStroke();
triangle(40, 0, 60, 0, 60, 100);

fill(a);
noStroke();
quad(40, 165, 40, 300, 110, 300, 110, 255);

fill(a);
noStroke();
quad(240, 165, 240, 300, 170, 300, 170, 255);

fill(a);
noStroke();
rect(110, 255, 60, 45);```

# Albers Drawings

Some drawings inspired by Josef Albers cause he was a strange and awesome and strange color theorist.

```size(300,300);
background(255);

stroke(10,199,220,50);
fill(10,199,220,50);//cirlce 1
ellipse(0,150,100,100);
stroke(255,0,205,50);//cirlc e8
fill(255,0,205,50);
arc(350,150,100,100,HALF_PI,PI+HALF_PI);
stroke(10,199,220,120);
fill(10,199,220,120);//circle 2
ellipse(50,150,100,100);
stroke(255,0,205,120);
fill(255,0,205,120);//circle 7
ellipse(300,150,100,100);
stroke(10,199,220,180);
fill(10,199,220,180);//circle 3
ellipse(100,150,100,100);
stroke(255,0,205,180);
fill(255,0,205,180);//circle 6
ellipse(250,150,100,100);
stroke(10,199,220,240);
fill(10,199,220,240);//circle 4
ellipse(150,150,100,100);
stroke(255,0,205,200);
fill(255,0,205,200);//circle 5
ellipse(200,150,100,100);

stroke(255,0,205,50);
fill(255,0,205,50);//cirlce 1
ellipse(0,50,100,100);
stroke(10,199,220,50);//cirlc e8
fill(10,199,220,50);
arc(350,50,100,100,HALF_PI,PI+HALF_PI);
stroke(10,199,220,120);
fill(10,199,220,120);//circle 7
ellipse(300,50,100,100);
stroke(255,0,205,120);
fill(255,0,205,120);//circle 2
ellipse(50,50,100,100);
stroke(10,199,220,180);
fill(10,199,220,180);//circle 6
ellipse(250,50,100,100);
stroke(255,0,205,180);
fill(255,0,205,180);//circle 3
ellipse(100,50,100,100);
stroke(10,199,220,240);
fill(10,199,220,240);//circle 5
ellipse(200,50,100,100);
stroke(255,0,205,200);
fill(255,0,205,200);//circle 4
ellipse(150,50,100,100);

stroke(255,0,205,50);
fill(255,0,205,50);//cirlce 1
ellipse(0,250,100,100);
stroke(10,199,220,50);//cirlc e8
fill(10,199,220,50);
arc(350,250,100,100,HALF_PI,PI+HALF_PI);
stroke(10,199,220,120);
fill(10,199,220,120);//circle 7
ellipse(300,250,100,100);
stroke(255,0,205,120);
fill(255,0,205,120);//circle 2
ellipse(50,250,100,100);
stroke(10,199,220,180);
fill(10,199,220,180);//circle 6
ellipse(250,250,100,100);
stroke(255,0,205,180);
fill(255,0,205,180);//circle 3
ellipse(100,250,100,100);
stroke(10,199,220,240);
fill(10,199,220,240);//circle 5
ellipse(200,250,100,100);
stroke(255,0,205,200);
fill(255,0,205,200);//circle 4
ellipse(150,250,100,100);```

```size(300,300);
background(255,205,0);

stroke(137,0,255);
fill(137,0,255);
rect(50,50,150,50);
rect(50,125,150,50);
rect(50,200,150,50);

stroke(255,85,0,150);
fill(255,85,0,150);
rect(150,25,100,250);```

# Drawing Stuff

```size(300, 300);
background(255);

stroke(0);
fill(0);
rect(0,0, 10, 300);

stroke(0);
fill(0);
rect(290, 0, 10, 300);

stroke(0);
fill(0);
rect(10, 0, 290, 10);

stroke(0);
fill(0);
rect(10, 290, 290, 10);

stroke(255);
fill(108, 182, 125);
ellipse(150, 150, 250, 250);

stroke(255);
fill(235, 179, 90);
ellipse(150, 150, 200, 200);

stroke(255);
fill(191, 109, 50);
ellipse(150, 150, 150, 150);

stroke(255);
fill(255);
ellipse(150, 150, 100, 100);

stroke(255);
fill(0, 123, 111);
ellipse(150, 150, 50, 50);```