ONLINE ⭐️ Creative coding with JavaScript Part 2: p5.js and generative art

Creative coding with JavaScript Part 2: p5.js and generative art

The power of JavaScript to produce beautiful, fun, and creative experiences on the web is immense, whether that’s generative art, fun mini-games, brand new story formats, or data art. If you’ve ever wanted to use your creativity to make something of your own with code, this hands-on workshop might be for you!

In this creative coding with JavaScript series, we’ll cover some of the fundamentals of how to create both data-driven and generative art using a combination of tools (HTML5 Canvas, p5.js, D3.js, GSAP). In this second part of the series, we will learn how to get started with the popular Canvas wrapper tool p5.js and how to make simple generative sketches. p5, and its Java-based predecessor Processing are amongst the most popular tools for generative art and creative coding and you can find many communities that share their work, including the Processing Community Japan.

[In the first part of this series, which you can find here, we learnt how to get started drawing with an HTML5 Canvas and animating with GSAP. ]

What’s covered
Recap from last time, or introduction to those of you who weren’t there, including quick overview of various ‘branches’ of creative coding and what tools they might use.
How to get started with p5 using the p5 web editor, including the purpose of the setup and draw functions.
Introduction to the most widely-used parts of the p5 API and how these differ from drawing with only HTML5 Canvas.
Introduction to Perlin noise.
We’ll draw a generative sketch together (it will be a surprise!)

Prerequisites
Basic knowledge of JavaScript.
Some previous experience or interest in creative coding and/or generative art, using any framework or tools. Some knowledge of HTML5 Canvas would be particularly useful. You can check out Part 1 of the workshop to catch up.
We’ll use the p5.js web editor. It is free and doesn’t require a registration. If you’d like to be able to save your sketches, you should make an account: https://editor.p5js.org/

🚀About Le Wagon Tokyo 🚀

Le Wagon Tokyo (https://www.lewagon.com/tokyo) is the #1 ranked coding school for startups, creative people and tech entrepreneurs.
Our Web Development and Data Science bootcamps are designed for individuals who want to change their career, become freelancer, or launch their own venture!