NMD 105 Creative Coding I

P5js Coding Environments

"Green Brain99099" by Luis Ruiz

Who made p5js?

Lauren McCarthy, founder

Moira Turner, maintainer

Coding environments

P5js editor

A website you type code into.

P5js "library" in HTML

You type your own HTML page in a code editor (Sublime, Atom, Brackets, etc.).
Requires importing the P5js library using <script src="..."></script>
This is what's under the hood of the P5js editor.


<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

p5js v. JavaScript

Dialects require a specialized environment

Environment

Expression

Response

Maine

"Ayuh"

Away

"Ayuh"

p5js

rect( 100, 100, 50, 50 )

🔲

JavaScript

rect( 100, 100, 50, 50 )

❌ "rect is undefined!"

P5js Interface

✅ `Command-S` when you've clicked in the code pane saves the sketch.

❌ `Command-S` elsewhere on the screen tries to save the entire web page to your desktop.

🐞 If your old code appears when you click the New Sketch button, try File > New.

🐞 Disable autorefresh when writing a loop, or you could get caught in an infinite refresh.

🐞 `Control-Z` doesn't always undo. Worried about ruining your code? Duplicate the sketch.

Other P5js-like coding environments

OpenProcessing.org

Offers an editor similar to the P5js editor.

Much of the code can be re-used in P5js.

Processing

A different language of its own that can be used to control physical devices.

P5js commands look like Processing commands but are written in JavaScript.

NMD 105 Creative Coding I

P5js Coding Environments

Who made p5js?

Lauren McCarthy, founder

Moira Turner, maintainer

Coding environments

P5js editor A website you type code into.

p5js v. JavaScript

Dialects require a specialized environment

P5js Interface

✅ Command-S when you've clicked in the code pane saves the sketch.

❌ Command-S elsewhere on the screen tries to save the entire web page to your desktop.

🐞 If your old code appears when you click the New Sketch button, try File > New.

🐞 Disable autorefresh when writing a loop, or you could get caught in an infinite refresh.

🐞 Control-Z doesn't always undo. Worried about ruining your code? Duplicate the sketch.

Other P5js-like coding environments

OpenProcessing.org Offers an editor similar to the P5js editor. Much of the code can be re-used in P5js.

Processing A different language of its own that can be used to control physical devices. P5js commands look like Processing commands but are written in JavaScript.

🤔 Confused? Just stick with the P5js editor

P5js editor

A website you type code into.

✅ `Command-S` when you've clicked in the code pane saves the sketch.

❌ `Command-S` elsewhere on the screen tries to save the entire web page to your desktop.

🐞 `Control-Z` doesn't always undo. Worried about ruining your code? Duplicate the sketch.

OpenProcessing.org

Offers an editor similar to the P5js editor.

Much of the code can be re-used in P5js.

Processing

A different language of its own that can be used to control physical devices.

P5js commands look like Processing commands but are written in JavaScript.