creative coding lunch

creative-coding-lunch.md

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

Resources

p5.js examples: https://p5js.org/examples/

P5js reference:

• https://p5js.org/reference/

Quick Start p5.js for intermediate users

• on OpenProcessing
• on repl.it

Migrating from khan academy to p5.js - why, and how

• https://github.com/CodeYourFuture/fundamentals-course/blob/master/after-the-course/from-khan-academy-processingjs-to-p5js.md

Courses:

• Code! Course (p5.js javascript)
• Coding Challenges
• Introduction to Computational Media with p5.js
• Printing Code - Rune Madsen

Communities:

• https://www.facebook.com/groups/creativecodingp5/

Palettes:

• https://www.colourlovers.com/palettes

Inspiration

• 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

Some challenges

Easy challenges

random squares, random colours

concentric circles

paint tool

• draw a line from previous mouse position to current mouse position
  • change colour and strokeWeight

random polygons

Improver Challenges

Random walk

• e.g. Coding Train random walk challenge

random words poster tutorial

tutorial challenge: https://www.openprocessing.org/sketch/812093 This may be difficult to study from in a noisy group environment

Intermediate Challenges

fonts-as-points challenge

challenge: https://www.openprocessing.org/sketch/812356

(Should be comfortable working with arrays of objects)

web cam video manipulation

(Should be comfortable working with 2 dimensional arrays)

Technique: Symmetry

• 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: multi-user!

https://medium.com/openprocessing/collaborative-sketches-1643d9751777

Technique: layered alpha composition

https://www.openprocessing.org/sketch/108668#

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:

Example sketch

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.

Challenge: Advanced

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

Past themes

• "Concentric"
• "Four Seasons" or "Summer"

For neill:

• demo plan: polygons: https://gist.github.com/nbogie/8ad4948fe7e65518095c004364cdd754

colour wheel to show hues - needs modded to stay always bright: https://editor.p5js.org/kgrnbrg/sketches/ryhPaDNn