header

More links

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 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() {
background(255);
strokeWeight(4); // Thicker
size(300, 300);
smooth(8);
}

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.
point(x,y);
}
}

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

stroke(255,0,0);
strokeWeight(5);
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);
textFont(f);
// The text must be centered!
textAlign(CENTER);
smooth();
}

void draw() {
background(255);

// Start in the center and draw the circle
translate(width / 2, height / 2);
noFill();
stroke(0);
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;

pushMatrix();
// 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

fill(0);
text(currentChar,0,0);
popMatrix();
// Move halfway again
arclength += w/2;
}
} //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() {
noLoop();
background(255);
smooth();
strokeWeight(0.5);

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') {
save("normal.png");
saveHiRes(10);  // saves a copy @ 5000 * 5000 pixels
exit();
}
}

void saveHiRes(int scaleFactor) {
println("starting to save high.res copy");
PGraphics hires = createGraphics(width*scaleFactor, height*scaleFactor, JAVA2D);
beginRecord(hires);
hires.scale(scaleFactor);
draw();
endRecord();
hires.save("hires2.png");
println("saved high.res copy");
exit();
} ### Change pixel colours in an image

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
save("new-grid.gif");
} Becomes 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

http://learningprocessing.com/examples/chp15/example-15-07-PixelArrayImage# becomes 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() {
loadPixels();

// We must also call loadPixels() on the PImage since we are going to read its pixels.
img.loadPixels();
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);
}
}

updatePixels();
}

void mouseClicked(){

save("new sunflower.jpg");

}

```

APA citation:
Russell, R. (2018, October 04, 08:02 am). Processing code snippits.
Retrieved August 24, 2019, from
http://www.rupert.id.au/processing/snippits.php

Last refreshed: August 24 2019. 10:54.32 am   This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.

1353 Visits since November 17, 2016