Script 02 - Setup

• Script 02 - Setup
  • Let’s Get To Know Each Other 😍
    • Processing
    • Resources & Community
  • OpenProcessing
  • First Steps 👶🏼
    • Navigation
    • The Editor (Create a Sketch)
    • Error Messages
    • Saving a Sketch
    • Uploading a Sketch to The Class

---

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

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.”**

Spin-Offs

• p5.js
  • JavaScript library
  • Browser-based software
  • We are going to use this version
• Processing.py
  • Python mode
• Processing for Android
• Processing for Pi

Resources & Community

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

• p5 Reference
• Open Processing
• procssing.org
• Processing Reference
• Generative Gestaltung
• Creative Applications
• The fairest of them all: Daniel Shiffmann 🤴🏻
  • Dan is an Associate Arts Professor at the Interactive Telecommunications Program at NYU’s Tisch School of the Arts. He probably is some sort of crazy (no offense - the good kind of crazy…) and his tutorials are incredible for quick insights and as a starting point. For example in his youtube channel The Coding Train he covers a wide range of topics and explains everything very well. I am using a lot of his material in my lectures.
    Daniel Shiffman - The Coding Train Intro

OpenProcessing

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:

https://openprocessing.org/class/70403

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.

Navigation

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

🧰 🛠

---