Creative Coding with Canvas & WebGL
Table of Contents
IntroductionMatt 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.
Setup & GuidebookMatt 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.
Print Art with Canvas
Installing canvas-sketch-cliMatt begins by introducing his npm package, and giving an overview of the setup necessary to utilize it.
Canvas Sketch IntroductionMatt gives an overview of how the canvas sketch library does some of the setup for the built-in canvas module in the browser.
Canvas API BasicsMatt demonstrates the basic methods of drawing in Canvas through a live example.
Canvas Sketch ApplicationsMatt addresses why canvas sketch is useful, and shows how to specify things like dimensions and orientation.
The GridMatt 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.
Drawing the GridMatt jumps back into the code and demonstrates how the basic grid print comes together.
Linear InterpolationMatt integrates the lerp module into the basic grid example.
Adding RandomnessMatt 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.
Radius & Organic RandomnessMatt gives each circle its own radius by using destructuring and a random Gaussian distribution.
Color PalettesThe nice-color-palette module is introduced into the project to provide low-effort harmonious colors.
NoiseMatt introduces the concept of noise in both what it does, and the basics of how to implement it with noise2D.
Coding Noise with noise2DMatt jumps back into the code and demonstrates how to implement noise2D in the existing example.
Drawing with Text CharactersMatt instructs on how to insert characters into the existing example.
Canvas Q&AA question is asked about how to save work when it is randomly generated,
Physical World Canvas
Generative Wall DrawingsMatt 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/
Generative Wall ExerciseStudents are instructed to perform their own interpretation of one of Sol LeWitt's works.
Takeaways of Generative Wall ExerciseMatt 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
The Third DimensionMatt 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.
Three.js ConceptsMatt introduces Materials, Geometries, Scene, and Camera used in ThreeJS that allow the user different views of the datapoints input into the system.
Coding a ThreeJS Isometric CubeMatt introduces a basic ThreeJS 3D isometric cube template, and walks through what the variables are.
Capabilities of Three.js: Isometric PerspectiveMatt introduces a basic ThreeJS template, how to render with isometric perspective, and how to instance many meshes in a single scene.
Capabilities of Three.js: Color, Lighting, and CompositionMatt improves the scene by introducing color variation, directional lighting, and changes in composition.
Three Dimensional Thinking Q&AA question is asked about how ThreeJS handles intersecting objects.
Rationale for Simple ShapesMatt discusses a project that inspired him from a film festival in Brazil, demonstrating how simple shapes can produce powerful images.
Making a GIF
Making a GIFMatt explains why a GIF may be a solution for showing solutions to clients, and transforms the example from the last section.
Exporting GIFs & MP4sMatt demonstrates how to export GIFs using gitftool.
Easing & TrigonometryMatt introduces tools to solve easing issues that are associated when applying trigonometric functions. - cubic-bezier.com
Troubleshooting and webGL Q&AMatt addresses several questions that were introduced, including clarifying what the difference between WebGL and ThreeJS is, and bugs in the previous example.
ShadersMatt conceptualizes shaders and GLSL, and explains how shaders work in practice using gradients.
Primary BrandingMatt shows an example of generative branding for a company by DIA Studio.
Shaders Example: IntroductionMatt 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.
Shaders Example: Shape & FormMatt applies shaders to the template to start forming the desired image.
Shaders Example: Step FunctionsMatt continues iterating on the Primary Branding example by introducing the smoothstep function in order to smooth and feathered edges.
Shaders Example: Additional ThoughtsMatt introduces other aspects that can be augmented in the example that may yield interesting results, including gradient.
Shaders Q&AA 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.
Hot Reloading & Future FeaturesMatt demonstrates how to use hot module reloading in a project to speed up development. Future improvements to the tool are also discussed.
Introducing NoiseMatt applies noise to the shader using the glsl-noise npm module.
Introducing ColorMatt introduces color to the shader using the glsl-hsl2rgb npm module.
Additional Thoughts and Q&AMatt provides additional variables to tweak in the example, and questions are asked about the shader template. Further examples that demonstrate additional features are shown.
Live Example: Thought ProcessMatt begins with the WebGL example, and demonstrates some of the thought process that goes into a creative coding project by coding on the fly.
Live Example: Advanced TopicsQuestions 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.
PenplotterMatt introduces the penplotter template for applications such as wood etching.
BlenderMatt introduces another project that was accomplished by scraping images of cities and using Blender, along with other methods, to create a crystalline image.
Current ProjectsMatt discusses what he's been recently working on at the request of the audience.