This workshop has already been published as a course!
Creative Coding in Canvas & WebGL
Some Key Takeaways!
By participating along with us in the workshop, you'll learn:
- 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.
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 300 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:30AMIntroduction, Tools, and Coding Environment
- 10:00AMGenerative Art — Canvas 2D API Basics
- 10:30AMGenerative Art — Introducing Randomness
- 11:00AMMotion Graphics — Adding an Animation Loop
- 11:30AMMotion Graphics — Using Custom Motion Curves with Anime.js
- 12:00PMLunch
- 1:00PMWebGL — Intro to ThreeJS
- 2:00PMWebGL — Animating Your First 3D Scene
- 3:00PMGLSL — Intro to Shaders
- 4:00PMGLSL — Integrating Custom Shaders into ThreeJS
- 5:00PMOpen Creative Coding, Creating a Canvas-Based Artwork
Interact with the Instructor - Online & In-Person
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 Daylight Time
Where
Option 1: Attend online on our full HD live stream
Option 2: Attend in-person at HQ in Minneapolis, MN