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.
| User Controls | Change brush size | Select Drawing Mode / Brush Stroke Type |
| To paint, click the picture and drag your mouse over the image |
|
|
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() {
size(1067,600);
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);
// SAVE DISABLED FOR JAVASCRIPT VERSION
// 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