Category Archives: Paint By Numbers

Flappy Bird

Simple flappy bird design.

 

Flappy Bird!

{
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…

Screen Shot 2014-02-24 at 1.35.29 PM

 

 

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!

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.

photo (8)

 

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);

 

 

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:

This is a flower.
This is a flower.

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!

Screen Shot 2014-02-24 at 1.18.57 AM

 

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

 

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

void draw(){
    background(219,255,240);
    //Head
    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:

Screen Shot 2014-02-23 at 11.18.48 PM

The code (or recipe?):

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

//ROTHKO NO.10 ON WHITE
stroke(110,50,0); //bread crust
  //(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.

Muffin1

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

Random Ellipses

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

屏幕快照 2014-02-22 2.57.33 AM

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);

fill(c);  //lip shadow 
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);

//neck shadow
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.
1

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);

 

Albers Illusion

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

Screen Shot 2014-02-17 at 10.27.52 AM

 

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);