Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
creative coding lunch

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:

Quick Start p5.js for intermediate users

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

Courses:

Communities:

Palettes:

Inspiration

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

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

Technique: Grid (by re-using code)

Technique: multi-user!

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

Technique: layered alpha composition

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

Technique: hand-drawn lines

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:

@nbogie

This comment has been minimized.

Copy link
Owner Author

@nbogie nbogie commented May 27, 2020

image

@nbogie

This comment has been minimized.

Copy link
Owner Author

@nbogie nbogie commented May 27, 2020

image

@nbogie

This comment has been minimized.

Copy link
Owner Author

@nbogie nbogie commented May 27, 2020

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

@nbogie

This comment has been minimized.

Copy link
Owner Author

@nbogie nbogie commented May 27, 2020

image

@nbogie

This comment has been minimized.

Copy link
Owner Author

@nbogie nbogie commented Jun 5, 2020

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.