DESIGN by CODE

Helpful Resources

The resources below are either created by Design by Code or by a third party, and we hope you find them helpful. If you know of a resource we should add, or you own one of these and would like it removed, please get in touch.

We've included links to other websites to make things easier for you. We don't control what's on these third party sites. We are not endorsing them or recommending any of their resources so we can't take responsibility for their content, accuracy, or privacy policies.

Intro to editor and setup() code

p5.js community

p5js.org

Fantastic resources on the p5js.org website to inspire your coding.  There's helpful reference material and tutorials. Particularly helpful for explaining the common terminology you'll find in a lot of creative coding sketches. 

YouTube Tutorials

Design by Code
p5.js foundations playlist
p5.js shapes playlist
Creative coding in p5.js playlist
Other YouTube channels

Websites

OpenProcessing - https://openprocessing.org/ Great source of ideas of what you can create. 

Courses & Tutorials

NOTE: The list is for reference only. We have not undertaken the courses so cannot comment on their suitability.

p5js.org - https://p5js.org/tutorials/

OpenProcessing - openprocessing.org/learn/

Codecademy - codecademy.com/learn/learn-p5js

freeCodeCamp - freecodecamp.org/news/art-of-coding-with-p5js

Udemy - various courses - search results - https://www.udemy.com/courses/search/?src=ukw&q=p5js

Communities

On the p5js.org website, in the footer there are links to different socials.

Other resources

☑️ p5.js color reference: https://p5js.org/reference/p5/color/ https://p5js.org/reference/p5/fill/

☑️ Wikipedia list of color names: https://en.wikipedia.org/wiki/Web_colors#HTML_color_names

☑️ RGB color picker tool: search "RGB color picker" online

☑️ Transparency & alpha resources: https://p5js.org/reference/p5.Color/setAlpha/ and  https://p5js.org/reference/p5/alpha/

Exploring Creative Coding 

Empty editor for you to run your creative coding designs

Thanks to the p5.js community for the p5.js library (p5js.org) that runs the sketch in this editor.  Note: The code in this editor is provided 'as is' for educational use only.

Join the newsletter

Creating designs with code

Receive the latest designs and exclusive resources direct to your inbox.

We respect your privacy. Unsubscribe at any time.