More links

Adobe Connect | Adobe Conect Custom Pods | AutoHotkey | Android | Arduino | Blog | COMM140Fractals | Grammar Checkers | Knots | a Million Dots |  Processing | RedBubble | Tutorials | Weather | World Time Meeting Planner |

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.

Processing Home Page

// 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.

// 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");



// 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


APA citation:
Russell, R. (2017, January 14, 03:35 pm). Processing code snippits.
     Retrieved February 19, 2018, from

Last refreshed: February 19 2018. 10:57.05 am

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.

648 Visits since November 17, 2016