INDEX - Coding Art in p5.js Processing

INDEX - Coding Art in p5.js Processing
Processing is an open source programming language and environment for creating static and interactive graphics with creative code. You can even code interactive games. But for this series of tutorials, we will be looking at how to create digital art with code.

Processing comes in several programming modes including the JavaScript (p5.js), Python (Processing.py), Android and the original Java mode. In these tutorials, we will be using the p5.js library, which is the original Processing code rewritten in JavaScript.

Three Options for Coding p5.js Projects
The first, and the easiest, option is to use the online p5.js Editor. This editor is set up and ready to use. You can test the editor by going to https://editor.p5js.org/. If you want to save any of your sketches, you will need to create an account. Once you have an account, you can save your sketches, create collections of sketches and share your sketches. The only drawback is that you must be online to code your sketches.

The second option is to use the Processing editor. If you are already coding in Java using the original Processing environment, you can now install the JavaScript library and use the same editor to code in p5.js. This is great for coders already comfortable with the Processing editor. You can download the latest release for Linux, Windows and Mac OSX from https://processing.org/download/.

The third option is to use a code editor and a web browser. You can download the latest release of the complete p5.js library file, a p5 sound file and a sample project from https://p5js.org/download/. Of course, you can also link to the file hosted online. This is the option that I like the most because it is the most flexible. If you are familiar with creating web pages in a code editor and testing in a web browser, creating p5.js projects with these tools is just as easy.

The Artist Sketch
The first thing you will notice is that each p5.js project file is called a sketch. Why do we call the file a sketch? The Processing project was created to help people learn how to code using a visual and artistic form of learning. Most artists begin with a sketch and therefore they carried the concept over to coding art.

Although you can export your finished sketch as a finished game, animation or image, that isn't the only purpose for p5.js. You can get a lot of inspiration from coding art that can be carried over to your projects in creative software, such as Adobe Photoshop or Affinity Designer, or even traditional methods.

p5.js Resources
When just getting started, you might want to check out some of these resource links. The Processing Foundation has done a great job providing an extensive collection of information.

  • https://p5js.org/ - p5.js main website
  • https://p5js.org/download/ -download p5.js
  • https://p5js.org/libraries/ - JavaScript that extends p5.js
  • https://p5js.org/get-started/ - how to set up p5.js
  • https://p5js.org/reference/ - p5.js documentation
  • https://p5js.org/learn/ - sample tutorials
  • https://p5js.org/examples/ - example sketches
  • https://processing.org/ - Processing main website
  • https://processing.org/download/ - download Processing
  • https://processingfoundation.org/ Processing Foundation


INDEX Coding Art in p5.js Processing


p5.js Basics


Advanced p5.js


Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.