Latest version of this page is at https://www.notion.so/neillzero/Creative-Coding-Lunch-6da6f9b0ce0e49a2a1bf918ebf8ad721
Class code for Creative Coding Wednesdays
p5.js examples: https://p5js.org/examples/
Quick Start p5.js for intermediate users
Migrating from khan academy to p5.js - why, and how
- Coding Challenges
- Introduction to Computational Media with p5.js
- Printing Code - Rune Madsen
- categorised art styles from Matt Deslauriers
- Takawo: an artist on openprocessing
- Why love generative art - article
- Short PBS video on creative coding(5 min)
- Joshua Davis - artist
- [Tyler Hobbs](https://tylerxhobbs.com/ - artist
random squares, random colours
- draw a line from previous mouse position to current mouse position
- change colour and strokeWeight
random words poster tutorial
tutorial challenge: https://www.openprocessing.org/sketch/812093 This may be difficult to study from in a noisy group environment
(Should be comfortable working with arrays of objects)
web cam video manipulation
(Should be comfortable working with 2 dimensional arrays)
starter: simple symmetry: https://www.openprocessing.org/sketch/914702
demo:polygon symmetry: https://www.openprocessing.org/sketch/911095
Technique: Grid (by re-using code)
- starter grid sketch https://www.openprocessing.org/sketch/912350
Technique: layered alpha composition
Technique: hand-drawn lines
- starter hand-drawn lines sketch: https://www.openprocessing.org/sketch/900331
Challenge: Random walk 3D
Use translate(x, y, z) and box(w, h, d) function to lay a trail of boxes as your walker moves around.
Challenge: electric particles
Demo and solution: https://p5js.org/examples/simulate-particles.html
Challenge: Recording and playing back gestures:
Make the p5 program remember your mouse movements.
Either it should show the recorded movement immediately
OR it should animate its plaback over time.
Hint 1: You'll need mousePressed(), mouseDragged(), mouseReleased()
Hint 2 (for correct playback): frgGvzrbhg (use rot13 to decode this hint)
Challenge (Particle systems) with classes (Intermediate/Advanced level)
Suitable for london class 6 (finished JS3)
make it rain 1: a particle system using classes to make the objects.
the class should include a draw() function and an update() function. The update function should move the particle down the screen. Ensure each particle has: position, speed, colour, size, and perhaps shape.
make it gravitate!:
Extend the above class-based particle system to have particles gravitate towards the mouse pointer.
Each particle will need a velocity and the update function will add a force to that velocity (the force should be a vector pointing towards the mouse). The p5.Vector class will make this easier.
sound synthesis and looping https://p5js.org/reference/#/p5.SoundLoop
Challenge: Advanced: Make a video game!
- space invaders? frogger? pacman? missile defense? pong?
- very advanced: include 3d models in game with with three.js or babylon.js
- "Four Seasons" or "Summer"
- demo plan: polygons: https://gist.github.com/nbogie/8ad4948fe7e65518095c004364cdd754