INDEX - Coding Art in p5.js Processing
Three Options for Coding p5.js ProjectsThe 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 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 SketchThe 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 ResourcesWhen 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/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
- Getting Started with p5.js - The p5.js Editor
Editor's Picks Articles
Top Ten Articles
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.