Introduction

Processing is geared towards creating graphics and interactive art. In this sketch, we are going to continue building drawing programs. This drawing program will draw its color palette from an image of your choice. A bright, colorful image will result in bright colors in your creation. A darker image will bring dark colors. As the sketch runs, Processing will translate the mouse's current x and y position and select the corresponding pixel from the image as the current color. Additionally, clicking and holding the mouse or trackpad button will cause the brush size to grow. The brush will start shrinking once the button is released.

Sketch #7

First, use Google Images to find an image that you like, or select an image you already have saved to your computer.

First, we are going to define the datatype for an image as well as the brush size:

PImage img;

float brushSize = 5;

Next, the void setup() defines the size of the sketch and the background color:

void setup() {

size(800,600);

background(0);

Final part of setup is to load the image

//load the image ..can use a URL here to load from the web

img = loadImage("classicwave.png");

}

Next we will tell processing to draw when the mouse button is clicked and to grow the brush size while the button is pressed and shrink it when the button is released:

void draw() {

if (mousePressed) {

brushSize += 0.3;

} else {

brushSize *= 0.99;

}

translate(mouseX, mouseY); //Processing translates the cursor's current x and y positions and rotates the image slowly across the black

rotate(frameCount * 0.05);

noStroke();

color c = img.get(mouseX, mouseY); //the color is selected from the pixel the cursor is over at any given moment and fills an ellipse that //serves as the brush shape

fill(c,150);

ellipse(0,0,brushSize, brushSize);

}

More information:

Use the "Find in Reference" command and explore these commands:

• PImage
• translate
• rotate