Latest version of this page is at https://www.notion.so/neillzero/Creative-Coding-Lunch-6da6f9b0ce0e49a2a1bf918ebf8ad721
Class code for Creative Coding Wednesdays
https://www.openprocessing.org/class/64094 119E57
p5.js examples: https://p5js.org/examples/
P5js reference:
Quick Start p5.js for intermediate users
Migrating from khan academy to p5.js - why, and how
Courses:
- Code! Course (p5.js javascript)
- Coding Challenges
- Introduction to Computational Media with p5.js
- Printing Code - Rune Madsen
Communities:
Palettes:
- 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
- draw a line from previous mouse position to current mouse position
- change colour and strokeWeight
tutorial challenge: https://www.openprocessing.org/sketch/812093 This may be difficult to study from in a noisy group environment
challenge: https://www.openprocessing.org/sketch/812356
(Should be comfortable working with arrays of objects)
(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
- starter grid sketch https://www.openprocessing.org/sketch/912350
https://medium.com/openprocessing/collaborative-sketches-1643d9751777
https://www.openprocessing.org/sketch/108668#
- starter hand-drawn lines sketch: https://www.openprocessing.org/sketch/900331
Use translate(x, y, z) and box(w, h, d) function to lay a trail of boxes as your walker moves around.
Demo and solution: https://p5js.org/examples/simulate-particles.html
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)
Suitable for london class 6 (finished JS3)
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.
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
- space invaders? frogger? pacman? missile defense? pong?
- very advanced: include 3d models in game with with three.js or babylon.js
- "Concentric"
- "Four Seasons" or "Summer"
- demo plan: polygons: https://gist.github.com/nbogie/8ad4948fe7e65518095c004364cdd754
