A Simple Processing/ProcessingJS Picture Painter

Note: the Java canvas used here is of fixed size so does not scale based on device type/form factor.

Unfortunately the web browser you are using does not support the canvas tag.

User ControlsChange brush sizeSelect Drawing Mode / Brush Stroke Type
To paint, click the picture and drag your mouse over the image
  • Press the up arrow key to increase brush size
  • Press the down arrow key to decrease brush size
  • Press 1 - draw using a '+' stroke
  • Press 2 - draw using a 'x' stoke
  • Press 3 - draw using a rectangle stroke
  • Press 4 - draw using a circle stroke
  • Press c - to clear and restart

Picture Painter Description

This picture painting program was the final project for the class Introduction to Computational Arts: Processing offered by Coursera. I signed up for the class as I was curious to see how this particular teacher approached the teaching of Processing. Rather than recommending this class, I would instead encourage those wanting to learn Processing to purchase any one of a number of the excellent books that are available on the subject.

In creating this simple picture painting program, I largely limited myself to statements and concepts taught in the class. The lesson here is that even a very simple Processing program can be a very powerful creative tool.

The final step in the process was to use the Javacript mode of the Processing IDE to build the basic code structure necessary to run the sketch (Processing lingo for program) in a browser.

Program Source Code

Following is the original Processing source code that is run from the Processing IDE. For those of you who would like to learn Processing, I encourage you to take this code and experiment with it.

// Introduction to Computational Arts: Processing Final Project Source Code
// Source Code Date: 02/27/2014
// Artistic Statement: Using a picture as a reference, create an impressionistic/abstract
// version of the photograph by using a variety of brush types and sizes.
// "Simple Picture Painter" by Jim Plaxco, licensed under
// Creative Commons Attribution-Share Alike 3.0 and GNU GPL license.
// Work: https://www.artsnova.com/processing/Simple-Picture-Painter-ProcessingJS.html
// License:
// http://creativecommons.org/licenses/by-sa/3.0/
// http://creativecommons.org/licenses/GPL/2.0/
// ----------------------------------------------
// global variables
PImage img;
String imgFile="Gaff_rigged_sloop.jpg"; // image to use
float cx=0, cy=0;   // current x,y
int drawMode=1;     // drawing mode variable
int bsize=3;        // brush size variable

void setup() {
  img = loadImage(imgFile); // load image
  image(img, 0, 0);    // display image
  rectMode(CENTER);    // x,y corresponds to center of rectangle
  ellipseMode(CENTER); // x,y corresponds to center of ellipse
  strokeWeight(1);     // pixel weight of lines drawn
  noFill();            // do not fill the rectangle or ellipse

void draw() {}                     // draw() needed for looping
void mouseDragged() { drawIt(); }  // Call drawIt() function to paint
void mousePressed() { drawIt(); }  // Call drawIt() function to paint

void drawIt() {
  cx=mouseX; // save mouse x
  cy=mouseY; // save mouse y
  // make sure x,y are inside screen
  if(cx < 0) cx=1; else if(cx > width-1) cx=width-2;
  if(cy < 0) cy=1; else if(cy > height-1) cx=width-2;
  color tc=get(int(cx),int(cy)); // get color at x,y
  stroke(tc); // set drawing color
  if(drawMode == 1) {
    line(cx-bsize,cy, cx+bsize,cy); // draw cross
    line(cx,cy-bsize, cx,cy+bsize);
  else if(drawMode == 2) {
    line(cx-bsize,cy-bsize,  cx+bsize,cy+bsize); // draw X
    line(cx-bsize,cy+bsize,  cx+bsize,cy-bsize);
  else if(drawMode == 3) {
    rect(cx,cy, bsize,bsize); // draw rect
  else if(drawMode == 4) {
    ellipse(cx,cy, bsize,bsize); // draw circle

void keyPressed() {
  if(key == CODED) {
    if (keyCode == UP) bsize+=4;
    else if (keyCode == DOWN) {
      if(bsize> 6) bsize-=4; // limit minimum brush size to 3
  else if (key=='1') drawMode=1;
  else if (key=='2') drawMode=2;
  else if (key=='3') drawMode=3;
  else if (key=='4') drawMode=4;
  else if (key=='c' || key=='C') image(img, 0, 0);
//  else if (key=='s' || key=='S') {
//    saveFrame("Week5FinalAssignment_####.png");
//    println("File saved");
//  }

Source Image: Edited "Gaff rigged sloop off Cap Ferret.jpg" from Wikimedia Commons

References: Built with Processing and Processing.js


Return to the Processing and Processing.js Experiments in Digital Art Index