1 of 16

Code Camp

Day 1

2 of 16

3 of 16

Introductions

Use pages here to introduce faculty and helpers

4 of 16

5 of 16

What is p5.js?

Some examples

Recursive Tree

Snowflakes�WaveMaker

More...

6 of 16

What is p5.js

It is a JavaScript library and online editor.

7 of 16

Where will I ever see JavaScript?

On almost every single web page out there.

8 of 16

Why not just do JavaScript?

It’s a little tough to get started in.

p5.js gives you a running start.

​

We’ll talk some about using JavaScript without p5.js a little bit tomorrow.

9 of 16

JavaScript in the Wild

Part of a typical web page:

HTML - Structure

(sometimes generated with php)

CSS - Style

JavaScript - Behavior

10 of 16

Server/client

11 of 16

So this is only web programming?

  • JavaScript is mostly web-oriented.
  • But the camp is about programming in general.
  • You can use the concepts from the camp to do all kinds of programming.
  • Different languages have different strengths, but they share a lot of the same core ideas.

12 of 16

Make an Account

13 of 16

p5.js starts your sketch for you..

You can change this if you want.

Runs once

Loops

14 of 16

Saving and Running Programs

Must have an account to save.

Running

Saving

Auto-Refresh

Sharing

15 of 16

Review Video Zero

0:00 Introduction

0:30 Make an account at p5js.org

1:40 The p5js.org Editor

3:11 createCanvas()

4:10 setup() & draw()

5:05 Auto-refresh

5:55 Menu Options

7:00 Naming your File

8:44 The p5.js Reference

16 of 16

Review Video 1

0:00 Error messages

0:20 The Console

1:15 Case Sensitivity

2:09 Drawing a Rectangle: rect()

2:22 p5.js Reference

3:28 Rectangle Parameters

4:32 Drawing Coordinates

6:40 rectMode()

8:24 Color Settings

8:47 fill(), stroke(), & strokeWeight()

9:54 Tidy Code

10:25 Getting mouse locations: mouseX, mouseY

11:28 Draw order - Display one shape on top of another

​