Name: Creative coding with JavaScript - Online Workshop
Start: 2023-10-11T19:00:00+09:00
End: 2023-10-11T20:30:00+09:00

**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](https://deabankova.com/)

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

Sasha Kaverina

Douglas Berkley

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

Creative coding with JavaScript - Online Workshop 

Front-end Development

Creatives

Online event

Share

Le Wagon Tokyo - Coding Bootcamp

Creative coding with JavaScript - Online Workshop

Le Wagon Tokyo - Coding Bootcamp

Details

Members are also interested in