Learn the process of generative art to create your own prints, installations, and web experiences.
Learn how to draw graphics with the Canvas 2D API for games, data visualization, and other web experiences.
Learn how to add rich animations and interactions to your web projects.
Learn the basics of how to make 3D and WebGL experiences with ThreeJS.
Learn how to write your own GLSL shaders to add unique and beautiful graphic animations to your web projects.
Learn how to apply creative coding skills to real-world jobs, like in games, advertising, and installation artwork.

Your (Awesome) Instructor

Matt DesLauriers

Matt DesLauriers is a freelance creative developer. DesLauriers designs and develops creative technology projects, including digital installations, rich 3D web experiences, generative art, interactive games, data visualizations, and more.

Learn graphics programming with Canvas and WebGL

Workshop Details

Learn to use Canvas and WebGL in this JavaScript workshop on Creative Coding! By taking in the vast landscape of graphics programming on the web, students will learn about generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. This workshop introduces the some of the fundamental concepts behind creative development work, including VR/AR apps, games, art installations, VJing & audio visualizers, motion graphics, interactive web experiences, and various other forms of computational arts.

Daily Schedule

We've already held over 150 workshops with thousands of attendees in-person and online. In this time we've discovered ways to schedule the day, so it goes smoothly and efficiently. Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.

9:30AM
Introduction, Tools, and Coding Environment
10:00AM
Generative Art — Canvas 2D API Basics
10:30AM
Generative Art — Introducing Randomness
11:00AM
Motion Graphics — Adding an Animation Loop
11:30AM
Motion Graphics — Using Custom Motion Curves with Anime.js
12:00PM
Lunch
1:00PM
WebGL — Intro to ThreeJS
2:00PM
WebGL — Animating Your First 3D Scene
3:00PM
GLSL — Intro to Shaders
4:00PM
GLSL — Integrating Custom Shaders into ThreeJS
5:00PM
Open Creative Coding, Creating a Canvas-Based Artwork

Expand...

Interact with the Instructor - Online & In-Person

Get Your Questions Answered • Code Along with the Class • Classroom Format

Is This Workshop for Me?

Summary

This workshop is best suited for intermediate to advanced coders with prior experience in JavaScript. If you’re looking to learn more about rich web experiences using Canvas and WebGL, or if you’ve ever wondered how to start coding a 3D game, this workshop will be ideal for you. The material will be split between the HTML5 Canvas API for 2D graphics, and ThreeJS for 3D graphics. By the end of the workshop, students will have the tools, knowledge, and resources needed to pursue their own creative coding projects.

Any Prerequisites?

JavaScript and ES6 Syntax
Node 8+ and npm 5+ installed
Chrome browser
Terminal basics
Node.js and npm basics
Git and GitHub basics
Chrome DevTools basics
HTML/CSS basics

Event Details

What

One Full Day Workshop Session

Replay Videos (available immediately)

When

October 25, 2018 - 9:30am to 5:30pm Central US Time

Where

Option 1: Attend online on our full HD live stream

Option 2: Attend in-person at HQ in Minneapolis, MN

RSVP to Attend Online

Join in Person

You're Registered to Attend Online!

This Workshop's Online Chatroom is Currently Open!

You can watch video of this workshop!

Creative Coding in Canvas & WebGL