Creative coding with JavaScript - Online Workshop

HTML5 Canvas & GSAP animations

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 first part, we’ll focus on how to get started drawing with an HTML5 Canvas and animating your sketch with GSAP. [Later we’ll learn how to make these sketches generative, relying on the many useful abstractions of the p5.js library.]

What’s covered

- Quick overview of various ‘branches’ of creative coding and what tools they might use.
- How to use HTML5 Canvas to draw various shapes on a web canvas.
- How to create dummy data that you can start drawing and experimenting with.
- How to use the powerful animation library GSAP to create custom animations and transitions of the drawings on the Canvas.
- Time permitting, we’ll use a real dataset of colours in each frame of the animation of an anime (~50,000 data points) and arrange them in a couple of different patterns to creatively visualise the colours.

Prerequisites

- Basic knowledge of JavaScript, CSS and the HTML DOM
- Some previous experience or interest in creative coding and/or generative art, using any framework or tools. Some D3.js would be particularly useful to know.
- If you’d like to code along, please make a free account on Observable:[ https://observablehq.com/](https://observablehq.com/)

🎤 About Dea Bankova 🎤

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

🚀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!