Freelancer
Creative Coding with Canvas & WebGL
4 hours, 45 minutes
CC
Course Description
Learn to use Canvas and WebGL with ThreeJS in this JavaScript course on Creative Coding! Tour the vast landscape of graphics programming on the web. Learn about generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. These are the fundamental concepts behind creative development work, including VR/AR apps, games, art installations, interactive web experiences, and various other forms of computational arts.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: December 11, 2018
Learning Paths
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 14 minutes
Matt DesLauriers introduces himself and the general structure of the workshop. Generative art is defined, and some interesting projects are highlighted within the field, showcasing work that can be created with code for both artistic and commercial purposes.
Matt introduces the repo for the workshop, which includes recommendations for tooling, a cheatsheet, external repos that will be utilized, and a quick how-to for command line arguments. We recommend using Node version 16+ in this course.
Print Art with Canvas
Section Duration: 1 hour, 15 minutes
Matt begins by introducing his npm package, and giving an overview of the setup necessary to utilize it. We recommend using Node version 16+ in this course.
Matt gives an overview of how the canvas sketch library does some of the setup for the built-in canvas module in the browser.
Matt demonstrates the basic methods of drawing in Canvas through a live example.
Matt addresses why canvas sketch is useful, and shows how to specify things like dimensions and orientation.
Matt walks through several examples of art that incrementally increase the complexity of the original grid, and foreshadows what the next few sections of the course will look like.
Matt jumps back into the code and demonstrates how the basic grid print comes together.
Matt integrates the lerp module into the basic grid example.
Matt first checks in with students and shows them where they can go should they need to check their code during the course. Randomness is introduced into the example using the Random module, and thus adds an extra dimension to the work entirely.
Matt gives each circle its own radius by using destructuring and a random Gaussian distribution.
The nice-color-palette module is introduced into the project to provide low-effort harmonious colors.
Matt introduces the concept of noise in both what it does, and the basics of how to implement it with noise2D.
Matt jumps back into the code and demonstrates how to implement noise2D in the existing example.
Matt instructs on how to insert characters into the existing example.
A question is asked about how to save work when it is randomly generated,
Physical World Canvas
Section Duration: 8 minutes
Matt introduces some of Sol LeWitt's work, which was not the artwork itself, but was the instructions to construct the visual piece. - solvingsol.com/solutions/
Students are instructed to perform their own interpretation of one of Sol LeWitt's works.
Matt demonstrates some of his own outputs from the Generative Wall Drawing exercise, and shows examples of how it looks in a 3D environment.
Three Dimensional Thinking
Section Duration: 51 minutes
Matt introduces the three.js documentation, and shows a current events story about an AI artwork that sold at auction as a way to demonstrate where the field is going.
Matt introduces Materials, Geometries, Scene, and Camera used in ThreeJS that allow the user different views of the datapoints input into the system.
Matt introduces a basic ThreeJS 3D isometric cube template, and walks through what the variables are.
Matt introduces a basic ThreeJS template, how to render with isometric perspective, and how to instance many meshes in a single scene.
Matt improves the scene by introducing color variation, directional lighting, and changes in composition.
A question is asked about how ThreeJS handles intersecting objects.
Matt discusses a project that inspired him from a film festival in Brazil, demonstrating how simple shapes can produce powerful images.
Making a GIF
Section Duration: 23 minutes
Matt explains why a GIF may be a solution for showing solutions to clients, and transforms the example from the last section.
Matt demonstrates how to export GIFs using gitftool.
Matt introduces tools to solve easing issues that are associated when applying trigonometric functions. - cubic-bezier.com
Matt addresses several questions that were introduced, including clarifying what the difference between WebGL and ThreeJS is, and bugs in the previous example.
Shaders
Section Duration: 58 minutes
Matt conceptualizes shaders and GLSL, and explains how shaders work in practice using gradients.
Matt shows an example of generative branding for a company by DIA Studio.
Matt jumps back into the code to re-create a branding design using shaders. The shaders template is introduced, and each section's use is explained.
Matt applies shaders to the template to start forming the desired image.
Matt continues iterating on the Primary Branding example by introducing the smoothstep function in order to smooth and feathered edges.
Matt introduces other aspects that can be augmented in the example that may yield interesting results, including gradient.
A different way of achieving the circle is explored. A question about whether smoothstep() and mix() are shader or glsl functions is asked. Resources from the repo are also reviewed for further learning about topics such as how to apply pixel shaders to a 3D mesh.
Matt demonstrates how to use hot module reloading in a project to speed up development. Future improvements to the tool are also discussed.
Matt applies noise to the shader using the glsl-noise npm module.
Matt introduces color to the shader using the glsl-hsl2rgb npm module.
Conclusion
Section Duration: 52 minutes
Matt provides additional variables to tweak in the example, and questions are asked about the shader template. Further examples that demonstrate additional features are shown.
Matt begins with the WebGL example, and demonstrates some of the thought process that goes into a creative coding project by coding on the fly.
Questions are asked about advanced topics in noise, and when to use pixel shaders versus vertex shaders. Matt explores more advanced topics with the vertex and fragment shaders. A question is addressed at the end regarding incorporating light in from ThreeJS while using shaders.
Matt introduces the penplotter template for applications such as wood etching.
Matt introduces another project that was accomplished by scraping images of cities and using Blender, along with other methods, to create a crystalline image.
Matt discusses what he's been recently working on at the request of the audience.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops