Getting started with p5.js

p5js

p5.js is a programming language created for artists. It is easy to learn and uses Javascript, the computer language of the internet and beyond. p5.js runs on a web browser, recent versions of Firefox, Chrome or Safari are fine. As such you can even run it on a mobile phone or tablet. Here you go to the p5js homepage to get an overview over the language.

Normally you need to open several windows to run Javascript on a browser, and you also need to embed your code in some basic HTML and CSS structure. p5.js provides a so called IDE that allows you to focus on the main part, coding with Javascript. It consists of an editor, allows you to execute the code, read and write data, save code and more. Launch the p5.js Web Editor by clicking on the link. Then you can code away!

First, please create an account by clicking on Sign Up in the top right corner of the window and follow the instructions to create an user account.

Don’t forget to write down your username and the password! It is a good idea to save these credentials on your Google account, then you have it always available.

A short introduction to p5.js you find here. Whenever you have finished a program or need to stop, don’t forget to save your file by selecting Save in the File menu item of the editor. Later you can reload your project with Open and continue to work.

A more comprehensive source to learn p5.js is Getting Started With p5js. This is a good introductory book with lots of code samples you can copy and paste into the editor and try out. Happy Coding is another site that introduces you to p5.js covering some topics with tutorials, and others with sample code.

These information will allow you to get up and running, on this site you also find more posts on p5.js going into more detail and showcasing sample projects.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.