Creative Coding in Canvas & WebGL
Join us for an Awesome Workshop on:

Creative Coding in Canvas & WebGL

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

This workshop has already been published as a course!

Watch the Full Course

Creative Coding in Canvas & WebGL

Some Key Takeaways!

By coding along with us in the Workshop, you'll:

  • 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

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