Scribd
Upload
210 views

Function Draw p5.js

- p5.js is similar to Processing but with some changes like replacing size() with createCanvas() and removing the frameRate variable. - JavaScript loads asynchronously so load methods take callbacks or loading can be done in preload(). - Mouse and touch events are mapped differently, like mouseX to touchX. - push/popMatrix and push/popStyle are replaced with just push and pop. - Sketches can be created globally or with instance mode. - Not everything from Processing is implemented yet in p5.js like 3D, PShape, PFont.

Uploaded by

Hansi Rüting
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
210 views

Function Draw p5.js

- p5.js is similar to Processing but with some changes like replacing size() with createCanvas() and removing the frameRate variable. - JavaScript loads asynchronously so load methods take callbacks or loading can be done in preload(). - Mouse and touch events are mapped differently, like mouseX to touchX. - push/popMatrix and push/popStyle are replaced with just push and pop. - Sketches can be created globally or with instance mode. - Not everything from Processing is implemented yet in p5.js like 3D, PShape, PFont.

Uploaded by

Hansi Rüting
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Processing transition

Laurent COOPER edited this page on 7 Dec 2016 25 revisions


Pages 37
Find a Page
Home
Archived Content
Beyond the canvas
Code of Conduct
Contributed Tools, Projects, Demos
Design Principles
Development
Development Checklist
Development extended
DOM notes
Education
Embedding p5.js
Frequently Asked Questions
Friendly Debugger
Getting started with WebGL in p5
Show 22 more pages
Clone this wiki locally
https://github.com/processing/p5.js.wiki.git
Clone in Desktop
Overview of differences
The p5.js language looks very similar to the Processing language with a few chan
ges:
Because you can think of your sketch as more than just the drawing canvas, size(
) has been replaced with createCanvas(), to suggest the possibility of creating
other elements.
frameRate(num) sets the frame rate, but the frameRate variable has been removed.
To get the current frame rate, call frameRate() with no arguments.
JavaScript doesn't always load things synchronously, there are a couple options
to deal with this:
All load methods take an optional callback argument. That is, a function that ge
ts called after the file has been loaded.
Alternatively, you can place load calls in a preload() method that happens befor
e setup(). If a preload method exists, setup waits until everything inside is lo
aded, see this image example.
The variable mousePressed has been replaced with mouseIsPressed.
In addition to mouse events, there are touch events, the mapping is like this:
mouseX ~ touchX
mouseY ~ touchY
mousePressed() ~ touchStarted()
mouseDragged() ~ touchMoved()
mouseReleased() ~ touchEnded()
There is a touches[] array that contains a series of objects with x and y proper
ties corresponding to the position of each finger.
push/popMatrix(), and push/popStyle() have been replaced with push() and pop(),
the equivalent of calling both matrix and style methods together.
By default, everything is in the global namespace, and you can create your sketc
hes like you do with Processing. However, there is something we call "instance m
ode" for creating a p5 sketch that plays nice with the rest of the code running
on your page. See this instance mode example and this global vs instance mode tu
torial.
In global mode, p5 variable and function names are not available outside setup()

, draw(), mousePressed(), etc. (Except in the case where they are placed inside
functions that are called by one of these methods.) What this means is that when
declaring variables before setup(), you will need to assign them values inside
setup() if you wish to use p5 functions. For example:
var n;
function setup() {
createCanvas(100, 100);
n = random(100);
}
Not everything in Processing is implemented in p5.js, but we are working on it!
Right now there is no 3D, PShape or PFont equivalent. The camera model in p5js i
s yet very basic, with only eye position and no "look at" or axis direction. See
the reference for up to date documentation of what functions work.

You might also like