-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Processing transition
###Overview of changes
The p5.js language looks very similar to the Processing language with a few changes:
- Variables do not have a type. Use var instead of float, int, double, long, char, String, Array, etc.
- A var can be anything -- any of the types mentioned, but also functions.
- Rather than specifying a return type for functions, they are assigned to vars. See the example below.
- Currently, not all Processing functionality is supported in p5.js, and the syntax for a few have changed slightly. See API and API progress for up-to-date documentation of all supported functions and future plans.
###Conversion examples
####Basic sketch
This is the basic setup for a Processing and p5.js sketch. Note that p5.js will also require an empty HTML file that links to the p5.js library and your sketch file in the header (see getting started).
void setup() {
// setup stuff
}
void draw() {
// draw stuff
}
function setup() {
// setup stuff
};
function draw() {
// draw stuff
};
####Converting a Processing sketch to p5.js
Here are two examples of sketches that have been converted from Processing to p5.js. The changes made are shown in the comments, all the other lines remained the same.
/**
* This example can be found in the Processing examples package
* that comes with the Processing PDE.
* Processing > Examples > Basics > Form > Bezier
* Adapted by Evelyn Eastmond
*/
function setup() { // **change** void setup() to function setup()
createCanvas(640, 360); // **change** size() to createCanvas()
stroke(255); // stroke() is the same
noFill(); // noFill() is the same
}
function draw() { // **change** void draw() to function draw()
background(0); // background() is the same
for (var i = 0; i < 200; i += 20) { // **change** int i to var i
bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0)); // bezier() is the same
}
}
/**
* This example can be found in the Processing examples package
* that comes with the Processing PDE.
* Processing > Examples > Basics > Form > Bezier
* Adapted by Evelyn Eastmond
*/
var x = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // **change** float[] x = new float[20] to array of 20 0's
var y = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // **change** float[] y = new float[20] to array of 20 0's
var segLength = 18; // **change** float to var
function setup() { // **change** void setup() to function setup()
createCanvas(640, 360); // **change** size() to createCanvas()
strokeWeight(9); // strokeWeight() is the same
stroke(255, 100); // stroke() is the same
}
function draw() { // **change** void draw() to function draw()
background(0); // background() is the same
dragSegment(0, mouseX, mouseY); // functions calls, mouseX and mouseY are the same
for(var i=0; i<x.length-1; i++) { // **change** int i to var i
dragSegment(i+1, x[i], y[i]); // function calls are the same
}
}
function drawSegment(i, xin, yin) { // **change** void drawSegment() to function drawSegment(), remove type declarations
var dx = xin - x[i]; // **change** float to var
var dy = yin - y[i]; // **change** float to var
var angle = atan2(dy, dx); // **change** float to var, atan2() is the same
x[i] = xin - cos(angle) * segLength; // cos() is the same
y[i] = yin - sin(angle) * segLength; // sin() is the same
segment(x[i], y[i], angle); // function calls are the same
}
function segment(x, y, a) { // **change** void segment() to function segment(), remove type declarations
pushMatrix(); // pushMatrix() is the same
translate(x, y); // translate() is the same
rotate(a); // rotate() is the same
line(0, 0, segLength, 0); // line() is the same
popMatrix(); // popMatrix() is the same
}
####Converting a p5.js sketch to Processing
Here are two examples of sketches that have been converted from p5.js to Processing. The changes made are shown in the comments, all the other lines remained the same.
/**
* This example can be found in the Processing examples package
* that comes with the Processing PDE.
* Processing > Examples > Basics > Form > Bezier
*/
void setup() { // **change** function setup() to void setup()
size(640, 360); // **change** createCanvas() to size()
stroke(255);
noFill();
}
void draw() { // **change** function draw() to void draw()
background(0);
for (int i = 0; i < 200; i += 20) { // **change** var i to int i
bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));
}
}
/**
* This example can be found in the Processing examples package
* that comes with the Processing PDE.
* Processing > Examples > Topics > Interaction > Follow3
* Based on code from Keith Peters.
*/
float[] x = new float[20]; // **change** array of 0's to be float[] x = new float[20]
float[] y = new float[20]; // **change** array of 0's to be float[] x = new float[20]
float segLength = 18; // **change** var to float
void setup() { // **change** function setup() to void setup()
size(640, 360); // **change** createCanvas() to size()
strokeWeight(9);
stroke(255, 100);
}
void draw() { // **change** function draw() void draw()
background(0);
dragSegment(0, mouseX, mouseY);
for(int i=0; i<x.length-1; i++) { // **change** int i to var i
dragSegment(i+1, x[i], y[i]);
}
}
void dragSegment(int i, float xin, float yin) { // **change** function drawSegment() to void drawSegment(). add type delcarations.
float dx = xin - x[i]; // **change** var to float
float dy = yin - y[i]; // **change** var to float
float angle = atan2(dy, dx); // **change** var to float
x[i] = xin - cos(angle) * segLength;
y[i] = yin - sin(angle) * segLength;
segment(x[i], y[i], angle);
}
void segment(float x, float y, float a) { // **change** function segment() to void segment(). add type delcarations.
pushMatrix();
translate(x, y);
rotate(a);
line(0, 0, segLength, 0);
popMatrix();
}
####About variables
In p5.js, all variables (whether they are numbers, strings, arrays, functions, objects, whatever!) are declared using the symbol "var". In Processing, you must specify the variable type. Here is a summary of the supported Processing data types (table borrowed from Getting Started with Processing).
Name | Description | Range of values |
---|---|---|
int | Integers (whole numbers) | -2,147,483,648 to 2,147,483,647 |
float | Floating-point values | -3.40282347E+38 to 3.40282347E+38 |
boolean | Logical value | true or false |
char | Single character | A-z, 0-9, and symbols |
String | Sequence of characters | Any letter, word, sentence, and so on |
PImage | PNG, JPG, or GIF image | N/A |
PFont | VLW font; use the Create Font tool to make | N/A |
PShape | SVG file | N/A |
###Supported functions
Currently, not all Processing functionality is supported in p5.js, and the syntax for a few have changed slightly, refer to the API pages for further documentation.
####> API page Currently supported functions from Processing, as well as new ones supported in p5.js.
####> API progress page API progress and future support.
###Finding examples
You can find a lot of example code on OpenProcessing, a website for sharing Processing sketches.
Dan Shiffman's Learning Processing and The Nature of Code books online also have a lot of Processing examples and tutorials.
The Processing site contains many examples for using the functions of the API.
If you would like to edit this wiki and don't already have edit access, please open an issue or comment on an existing one noting the wiki page you'd like to edit. You will then be added as a repository contributor with edit access.