I’ve always been fond of drawing apps. I remember the first time I ever opened up paint. Life was never the same again. Somehow, through the pixels of colors I was able to discover myself. I would draw random shapes and sizes, and they would end up nicely on the screen. From paint, I’ve moved on to other drawing programs, and today, I work on paper by Fifty Three.

So, a lot of the inspiration of this project which I called PEARL, comes from those childhood memories of drawing as a way of discovering myself. Through the Processing platform, I coded this drawing app that you could run on your computer. It has 5 main functions:

• Pencil tool
• Pen tool
• Marker Tool
• Paint Tool
• Eraser Tool

You can also create a new white canvas as well as choose a random color for your this canvas. There are also cool surprises with this program! Before I show you some of the more technical design choices I made, here are some of the things I was able to create!

First of all, is the Logo! I created the image part of the logo using the program I wrote! How cool is that?

Other than that, you can also other types of art! Here are some examples:

The lizards swirls is what I call this piece! It’s pretty cool huh? Here’s another awesome one!

I call this one floors. But that’s just me. Anyway, it’s cool! And here’s my last piece. It’s called big man.

It symbolizes big in Chinese. However, the word big in itself is just a man with arms spread out wide open. So, here’s the big man.

So with these awesome designs, I’ll get a little bit more technical, and explain the different things the program can do.

The Canvas

The most basic is how to get a white canvas. At the start of the set-up the canvas is already set to white, but you can also change it to a random colored background. To change the canvas back to white again, all you need to do is to just do a regular click. To change to a random colored background color, you have to do a right click.

So for example, this design is made on a white canvas.

 

This one is made on a green canvas.

 

Getting Around

When the program starts up, you can hover around your canvas and nothing will happen. With the keyboard buttons that you will learn below, you will be able to use various tools(pens, markers, paint). To stop any of the tools, all you have to hit is the ENTER key.

 

The Pencil

One of the most basic functions I included is the pencil. It is just a simple black line with a pencil like feel due to the transparency. To access the pencil, simply hit the p button.

The Pen

The second thing I worked on was the pens. This is pretty much just like the pencil but will a full blast of color. One of the challenges I had with color was that I had to communicate to people a palette of colors using a keyboard. So, what I did to do that easily is to an entire row of the keyboard, firstly, and secondly, use the colors of the rainbow. This way, even if there aren’t any visual cues, people mostly know the colors of the rainbow, so from there, they can confidently access the keys, given the limitations of Processing (at least for now!)

So, for example, to access the pen, you will have to hit 1 for black, and then 2, 3,4,5,6, 7 and 8 represent the main rainbow colors (red, orange, yellow, green, blue, indigo, pink*) I replaced violet with pink since indigo is already around! And then there’s a secret with the last button which I will discuss later. So to access any of the colors, you just have to hit one of the numbers and you can start drawing with the colors. Here’s a sample with the pen tool! Once you would like to stop any of the pens, hit the ENTER key.

The Marker

So, the next tool up is the heart and soul of Pearl. It’s the marker tool. I wanted this to the heart and soul of the program. So, to do that, I wanted the lines to feel as naturally nice as possible. To be able to do this, I used easing all throughout the code. What this means is that it considers your movement as it decides the weight of the lines. As a result, it gives this very artistic dash-like design. (You can see how I do this in the code below!)

Just like the pen, I also used the rainbow and used an entire row of a keyboard. So, I used the qwerty row, where q is black, wertyui are all the colors of the rainbow*. (Again, I replaced violet with pink since indigo is already around!) And then, o is a special character again. Once you would like to stop any of the markers, hit the ENTER key.

 

The Paint

So, the coolest tool up in my opinion is the paint tool. It’s this thick line that can paint through the different shapes that you make!

Just like the pen, I also used the rainbow and used an entire row of a keyboard. So, I used the asdf row, where a is black, sdfghjk are all the colors of the rainbow*. (Again, I replaced violet with pink since indigo is already around!) And then, l is a special character again. Once you would like to stop the paint brush, hit the ENTER key.

 

 

The Eraser

The final tool is the eraser, where you can erase things if you do not like it. It’s pretty clean, and whites out whatever you don’t want! To access the Eraser, simply enter the SPACE key. Again, once you would like to stop the Eraser, hit the ENTER key.

And one last thing–The Secret Buttons!

The last button of every row which I haven’t mentioned to you yet is actually a secret button! It’s called the random color button! What it does is that it gives you a pen, marker and a paint brush in a random color each time you hit it. So, watch out when you hit the 9,o, and l keys! Let the colors explode! So for example, this one design below was made using the secret button for markers!

So that’s it for now. It’s a pretty cool thing, huh? If you’re on the techie side and you’d like to know how I implemented the program, here’s the source code in Java. If you want to know how to run and play around, shoot me a comment, and we’ll work something out!

float x;
float y;
float px;
float py;
char determiner;
float easing=0.05;

//This controls the stroke of the pen and pencil.
int pen=2;
int paint=30;
int eraser=50;

//This controls the transparency of the tools.
int paintt=50;
int pent=230;
int markert=255;

void setup(){
  size(800,800);
  background(255,255,255);
  smooth();
  noStroke();
}

void draw(){
 float targetX=mouseX;
 x+=(targetX-x)*easing;
 float targetY=mouseY;
 y+=(targetY-y)*easing;
 float weight=dist(x,y,px,py);
 
 
 if (determiner=='e'){
   strokeWeight(weight);
 }else if(determiner=='p'){
   strokeWeight(pen);
 }else if(determiner=='b'){
   strokeWeight(paint);
 }else if(determiner=='c'){
   strokeWeight(eraser);
 }
 
 
 line(x,y,px,py);
 py=y;
 px=x;

 
}

void keyPressed(){
  println(key+" key was pressed!");

  if (keyPressed){
    
    //Hovering Around the Screen
    if(key==ENTER){
      noStroke();
    }
    
    //PEN
    
    //black
    else if (key=='1'){
        stroke(0,0,0,pent);
        determiner='p';
    }
    
    //red
    else if (key=='2'){
        stroke(#FF0000,pent);
        determiner='p';
    } 

    
    //orange
    else if (key=='3'){
        stroke(#FF7F00,pent);
        determiner='p';
    }
    
    //yellow
    else if (key=='4'){
        stroke(#FFFF00,pent);
        determiner='p';
    }
    
    //green
    else if (key=='5'){
        stroke(#00FF00,230);
        determiner='p';
    }
    
    //blue
    else if (key=='6'){
        stroke(#0000FF,pent);
        determiner='p';
    }
    
    
    //violet
    else if (key=='7'){
        stroke(#8B00FF,pent);
        determiner='p';
    }
    
    //pink
    else if (key=='8'){
        stroke(#FF33E4,markert);
        determiner='e';
    }
    
 
    //random
    else if (key=='9'){
        stroke(random(255),random(255),random(255),pent);
        determiner='p';
    }
    
    
    
    
    //MARKER
    
    //black
    else if (key=='q'){
        stroke(0,0,0,markert);
        determiner='e';
    }
    
    //red
    else if (key=='w'){
        stroke(#FF0000,markert);
        determiner='e';
    }
    
    //orange
    else if (key=='e'){
        stroke(#FF7F00,markert);
        determiner='e';
    }
    
    //yellow
    else if (key=='r'){
        stroke(#FFFF00,markert);
        determiner='e';
    }
    
    //green
    else if (key=='t'){
        stroke(#00FF00,markert);
        determiner='e';
    }
    
    //blue
    else if (key=='y'){
        stroke(#0000FF,markert);
        determiner='e';
    }
    
    //violet
    else if (key=='u'){
        stroke(#8B00FF,markert);
        determiner='e';
    }
    
    //pink
    else if (key=='i'){
        stroke(#FF33E4,markert);
        determiner='e';
    }
    
    //random
    else if (key=='o'){
        stroke(random(255),random(255),random(255),markert);
        determiner='e';
    }
    
    
    
    //PAINT
    
    //black
    
    else if (key=='a'){
        stroke(0,0,0,paintt);
        determiner='b';
    }
    
    //red
    else if (key=='s'){
        stroke(#FF0000,paintt);
        determiner='b';
    }
    
    //orange
    else if (key=='d'){
        stroke(#FF7F00,paintt);
        determiner='b';
    }
    
    //yellow
    else if (key=='f'){
        stroke(#FFFF00,paintt);
        determiner='b';
    }
    
    //green
    else if (key=='g'){
        stroke(#00FF00,paintt);
        determiner='b';
    }
    
    //blue
    else if (key=='h'){
        stroke(#0000FF,paintt);
        determiner='b';
    }
   
    
    //violet
    else if (key=='j'){
        stroke(#8B00FF,paintt);
        determiner='b';
    }
    
    //pink
    else if (key=='k'){
        stroke(#FF33E4,paintt);
        determiner='b';
    }
    
    //random
    else if (key=='l'){
        stroke(random(255),random(255),random(255),paintt);
        determiner='b';
    }
    
    
    
   //eraser
   else if (key==' '){
        stroke(255,255,255);
        determiner='c';
   }

   
   
   //Pencil
   else if (key=='p'){
        stroke(0,0,0,100);
        determiner='p';
   }
}
}

void mousePressed(){
   if (mouseButton==LEFT){
     background(255,255,255);
   }else if(mouseButton==RIGHT){
     background(random(255),random(255),random(255));
   }
}

Hope you enjoyed!