Name: ONLINE ⭐️ Creative coding with JavaScript Part 2: p5.js and generative art
Start: 2024-01-31T19:00:00+09:00
End: 2024-01-31T20:30:00+09:00

**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](https://p5js.org/) and how to make simple generative sketches. p5, and its Java-based predecessor [Processing](https://processing.org/) 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](https://processing.jp/).

[In the first part of this series, which you can find [here](https://www.youtube.com/watch?v=kuQXxYtGc_M), 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](https://www.youtube.com/watch?v=kuQXxYtGc_M) 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/](https://editor.p5js.org/)

🚀**About Le Wagon Tokyo** 🚀

Le Wagon Tokyo ([https://www.lewagon.com/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!

Yann

Sylvain Pierre

Douglas Berkley

Sasha Kaverina

Chieri

Le Wagon Tokyo - Coding Bootcamp

Technology

Technology Startups

Startup Businesses

Computer Programming

Web Design

Ruby

Data Science

Software Development

JavaScript

Web Development

Entrepreneurship

Ruby On Rails

Lean Startup

HTML5

Courses and Workshops

Machine Learning

Dea has been a data visualisation developer at the Reuters Graphics team in London for the last 2 years, and previously worked as a visiting researcher in data viz at the Graduate School of Interdisciplinary Information Studies at UTokyo. She pivoted from a career as a data scientist/machine learning engineer, having worked at Microsoft and a London-based tech startup, to pursue the more creative direction offered by data visualisation. In addition to data viz, she loves data art, front-end development and creative coding on the web.
[https://deabankova.com](https://deabankova.com)






Le Wagon Tokyo - Coding Bootcamp

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

Le Wagon Tokyo - Coding Bootcamp

Details

Members are also interested in