More links

AutoHotkey | Android | Arduino | COMM140Fractals | Grammar Checkers | Knots | A Million Dots Activity |  Processing | Processing for Scratch Users | RedBubble | Tutorials | Weather | World Time Meeting Planner | Favicon Generator.

Home > Processing > Processing Code Snippits

Processing Code Snippets


Processing is an open source programming language and environment for people who want to create images, animations, and interactions. Initially developed to serve as a software sketchbook and to teach fundamentals of computer programming within a visual context, Processing also has evolved into a tool for generating finished professional work. Today, tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production.


Save screen with key click
Calculate points on a circle
Draw an Arc between X,Y points on a circle
Text along a curve
Change pixel colours in an image
Round Numbers and convert to strings


Processing Home Page


Save screen with key click

// Save the screen as a png file when you press the s key exit if you type x
// note requires a global variable called click

void keyTyped() {
   println("typed " + int(key) + " " + keyCode);

   if (int(key) == 115) { // s for save
      save("circle005-" + click + ".png");
      println("Saved: " + "circle005-" + click + ".png");
      click ++;

   if (int(key) == 120) {
      exit(); // x to exit the program




How to calculate points on a circle


// How to calculate points on a circle
// Based on code from http://www.mathopenref.com/coordcirclealgorithm.html

void setup() {
  strokeWeight(4); // Thicker
  size(300, 300);

void draw() {
  double step = 2 * PI/20; // see note 1
  float h = 150;
  float k = 150;
  float r = 50;

  for(float theta=0; theta < 2 * PI; theta += step) {
    float x = h + r * cos(theta);
    float y = k - r * sin(theta); //note 2.

Like most graphics systems, the canvas element differs from the usual mathematical coordinate plane:

The origin is in the top left corner.
The code above compensates by assuming that h, and k are actually relative to the top left.
The y axis is inverted. Positive y is down the screen, not up. To correct for this, the k variable (the y coordinate of the center) must be positive to place the center some way down the screen.

Also the y calculation has to subtract the sin(x) term instead of add.
Marked in the code as Note 1.

Note 2. The step size is set to an exact division of 2π to avoid gaps or over-runs in the circle. This code divides the circle into exactly 20 segments.
Note too that as in most computer languages, the trig functions operate in radians, not degrees.
360° = 2π radians.


Draw an Arc between X,Y points on a circle


arc(0, 0, 590, 590, atan2(y3, x3), atan2(y5, x5));
arc(0, 0, 590, 590, atan2(y9, x9), atan2(y10, x10));






Text along a curve

// The message to be displayed
String message = "text along a curve";

PFont f;
// The radius of a circle
float r = 100;

void setup() {
  size(320, 320);
  f = createFont("Georgia",40,true);
  // The text must be centered!

void draw() {

  // Start in the center and draw the circle
  translate(width / 2, height / 2);
  ellipse(0, 0, r*2, r*2);

  // We must keep track of our position along the curve
  float arclength = 0;

  // For every box
  for (int i = 0; i < message.length(); i++)
    // Instead of a constant width, we check the width of each character.
    char currentChar = message.charAt(i);
    float w = textWidth(currentChar);

    // Each box is centered so we move half the width
    arclength += w/2;
    // Angle in radians is the arclength divided by the radius
    // Starting on the left side of the circle by adding PI

    float theta = PI + arclength / r;

    // Polar to cartesian coordinate conversion
    translate(r*cos(theta), r*sin(theta));

    // Rotate the box
    rotate(theta+PI/2); // rotation is offset by 90 degrees
    // Display the character

    // Move halfway again
    arclength += w/2;


See: http://processingjs.org/reference/char_/


see: https://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/

//16. high resolution output
//Sometimes you only need to draw to the screen. Sometimes you want to save that output. 
//Sometimes you need to have that output in a very high resolution, for example when you 
//want to print it. There are different ways to generate high resolution output. 
//One can use the PDF export options. Or one could use one of the many different ‘hacks’ 
//to create a high resolution copy of the regular draw() loop. 
//Here is an example of one such technique. void setup() {
  size(100, 100);

void draw() {

  for (int x = 0; x < 500; x ++) {
    fill(random(255), random(255), random(255));
    float size =  random(1, 10);
    ellipse(random(100), random(100), size, size);

void keyPressed() {
  if (key == 's') {
    saveHiRes(10);  // saves a copy @ 5000 * 5000 pixels

void saveHiRes(int scaleFactor) {
  println("starting to save high.res copy");
  PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, JAVA2D);
  println("saved high.res copy");





Change pixel colours in an image


// https://hadamlenz.wordpress.com/2014/07/21/pixel-pushing-with-processing/

PImage img; //declare the image
void setup() {
  size(300, 300);
  img = loadImage("grid.gif"); //load the image, but do not display yet

  color checkColor = color(#000000); //the color to check for
  color setColor = color(#FFFF00); //the color to replace it with (Yellow in this example)

  //pixel array method
  img.loadPixels(); //address the pixels directly, hello pixels!!!
  for (int p=0; p<img.width*img.height; p++) {
    //loop through all the pixels
    if (img.pixels[p]==checkColor) {
      //if the pixel has the color we are checking for
      img.pixels[p]=setColor; //replace it with the new color
  img.updatePixels(); //then update the pixels
  image(img, 0, 0); //now show the image



All black pixels are replaced with yellow ones



Round Numbers and convert to strings


roundedMeasuredDistance = float(nf((measuredDistance / distance), 0, 2));

float f1 = 1.2; println(nf(f1, 0, 2)); // 1.20
float f2 = 1.234; println(nf(f2, 0, 2)); // 1.23
float f3 = 1.0; println(nf(f3, 0, 2)); // 1.00
float f4 = 1234.567; println(nf(f4, 0, 2)); // 1234.57 - rounded up


Thanks to Daniel Shiffman



Note code formatting by Processing > EDIT > Copy as HTML

// Example 15-7: Displaying the pixels of an image
// http://learningprocessing.com/examples/chp15/example-15-07-PixelArrayImage#

PImage img;

void setup() {
  size(235, 174);
  img = loadImage("sunflower.jpg");

void draw() {

  // We must also call loadPixels() on the PImage since we are going to read its pixels.
  for (int y = 0; y < height; y++ ) {
    for (int x = 0; x < width; x++ ) {
      int loc = x + y*width;
      // The functions red(), green(), and blue() pull out the three color components from a pixel.
      float r = red(img.pixels [loc]); 
      float g = green(img.pixels[loc]);
      float b = blue(img.pixels[loc]);

      // Image Processing would go here
      // If we were to change the RGB values, we would do it here, before setting the pixel in the display window.

      // Set the display pixel to the image pixel
      pixels[loc] = color(b, g, b);


void mouseClicked(){
save("new sunflower.jpg");  



APA citation:
Russell, R. (2018, October 04, 08:02 am). Processing code snippits.
     Retrieved June 07, 2020, from

Last refreshed: June 07 2020. 04:45.28 pm

rupert dot russell at acu dot edu dot au Support Wikipedia

Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

1615 Visits since November 17, 2016