CompSci//Media Arts - Starting P5.js

Starting P5.js

Today's Goal

Learn a bit about p5.js,
choose where you'll work with it,
& explore examples.

Completed

Basics of HTML & CSS
Block-based Programming
Typing Benchmark

Today

p5. js
drawing shapes

Upcoming

More JavaScript
more p5.js

Typing Practice

https://shaunwegs.github.io/LetsType/t/5-6.html

Slides for the Week

We will start new slides for this week, even thoguh we only have 2 days due to bad weather.
That's ok.

Make a copy of these slides for this week:
https://docs.google.com/presentation/d/1ciwYLVux_5xvoeGVrl976oaKgFbCFlDdPDjFDk3CvH8/edit?usp=sharing

About P5.js

P5.js is a library. It's a library specifically designed to help artists and creatives make interactive art and designs with code in the online web environment. It can do other things too, but that was its main intent.

Let's learn a bit more about it from Professor Dan Shiffman for NYU's Tisch School of the Arts.

dan-intro.mp4

Why Care?

There are lots of different ways to code, and p5.js is just one tool. Some people really focus on working with just the vanilla versions of languages. That isn't bad, but it takes longer to make anything interesting, and can be more frustrating. Building off of others' work with the use of libraries and tools can help us both learn faster and also create cool stuff sooner.

Here's are a few of the things I've made with p5.js, which you can learn how to do too, if you choose to... as well as much more sophisticated things too. Part of today, I want you to spend looking into things other people have made.

Bloomin' Bee Game
work in progress

Hashed & Salted Password Simulation

Random Walker Experiment

Disease Simulation

Task, part 1: Setup

Next, spend a moment or two to see how you can access an environment to work in p5.js. We'll start creating with p5.js tomorrow, so make sure you can access an editing environment that you're comfortable with.

setup.mp4

Task, part 2: Explore

Next, I want you to check out some of what other people have created using P5.js (or other versions of the processing library).

Check out a few examples from this site:

Examples on P5.JS site
(also, check out the older 2022 Showcase, or 2021, or 2020)
Examples on Open Processing
(There's more examples in the Discover section)

If you continue with Computer Science in High School, you'll continue learning how to create larger and more interesting things... including games, art, music, simulations, and more. If you're interested in any STEM careers, or art, you should consider continuing with tech & comp sci course in high school.

What to submit today?

Add a screenshot for your slide today showing which coding environment you intend to use tomorrow.

Add a screenshot of the three interesting examples of p5.js that you found, and for each, explain why you think it's interesting.

You can create additional slides for today if you need to.