Workshop Overview
https://editor.p5js.org/

Setting up your “development environment”

In order to write and run a computer program, we need a “development environment”: the set of tools needed to plan, write, and run our programs.

In this workshop, your development environment will be:

• This website!
• An online editor that runs p5.js programs
• Your notebook!

Accessing the workshop resources

1. Log into a lab computer using the account info on the whiteboard.
2. Open the Chrome web browser using the East House shortcut on the desktop
   • This opens the workshop website: https://esmesh.github.io/east-house-intro-programming/

Using the online p5.js editor

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! (p5js.org)

We’re using it because it lets you get up and running quickly so you can play with some core computing concepts and see immediate results. :)

Open & login the editor

Without logging in, you can write and run programs using an online p5.js editor: https://editor.p5js.org/

If you want to be able to save your work for later:

1. In the top right corner, select Sign Up
2. If you have a Google email address, you can sign up via Login with Google
3. If you want to create a new login:
   1. Decide on a username and password.
   2. Enter an email address
   3. Click Sign Up

Create a new sketch

Use File -> New to create a new default program.

The editor will give it some kind of silly default name (e.g., “Fossil accelerator”). You can change the name to whatever you want.

Running the program

Press the play button to run the program. The default sketch will draw a single gray square.

Why do we still need paper?!

It helps to always have a plan of what we want to do before we ever touch a computer!

Professional software engineers use paper, whiteboards, etc. to brainstorm & collect ideas. This saves us time & rework later!

Because we’ll be writing programs that generate 2d images, you’ll make plans by drawing mockups of the final image on a grid.

If we wanted to draw a heart, the first step would be to think about the basic shapes needed and then start figure out the coordinates of where to draw them. That’s a mental/planning activity. No code needed!