Link Search Menu Expand Document

Script 02 - Setup

Letโ€™s Get To Know Each Other ๐Ÿ˜

In this class we are going to work with p5.js, which is a library for JavaScript. This means that you write JavaScript code and that you can use additional commandos from p5.

p5 is based on the Java framework Processing. p5 is Processing running in a Webbrowser. p5 and Processing are very similar, with only few differences in syntax. If you know one, you can easily work with the other one.


Processing was developed in 2001 in the research group Aesthetics and Computation of the Technology Media Labs at the Massachusetts Institute of Technology by the students Ben Fry and Casey Reas. In 2012 the Processing Foundation (a non-profit corporation) was established.

Our mission is to promote software literacy within the visual arts, and visual literacy within technology-related fields โ€” and to make these fields accessible to diverse communities. Our goal is to empower people of all interests and backgrounds to learn how to program and make creative work with code, especially those who might not otherwise have access to these tools and resources.โ€**



Resources & Community

One of the aspects that made Processing, and now p5, so popular is its community and the vast amount of resources.


For this course, we are using the class environment in OpenProcessing. Within that environment, there is a fully functional editor for p5 online, with which you can start to work right away. Also, you can submit your assignments through the website.

Please create a personal account for yourself and sign up to our class:

If you want to be nice to me, please use a profil picture for your account so that I can learn your names.

First Steps ๐Ÿ‘ถ๐Ÿผ

In p5 a programm is called a sketch.


The Editor (Create a Sketch)


Under Options -> Editor -> Layout, I recommend that you chose the side by side layout.

Error Messages

If you have an error in your code, it will show up in text-form below the sktech window. This window is called the console and p5 communicates with you through the console, for example it lists errors here.


Always listen to what p5 has to say!

Saving a Sketch


Uploading a Sketch to The Class

  1. Save your sketch.
  2. Make sure that visibility is set to either Anyone or My Classes
  3. Open the share panel (see 1. below)
  4. Submit to Class (see 2. below)


The End

๐Ÿงฐ ๐Ÿ›