Table of Contents Introduction Introduction 00:00:00 - 00:08:33 Introduction 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. - http://github.com/mattdesl/workshop-generative-art Setup & Guidebook 00:08:34 - 00:14:53 Setup & Guidebook 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. Print Art with Canvas Installing canvas-sketch-cli 00:14:54 - 00:20:01 Installing canvas-sketch-cli Matt begins by introducing his npm package, and giving an overview of the setup necessary to utilize it. Canvas Sketch Introduction 00:20:02 - 00:24:33 Canvas Sketch Introduction Matt 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 Basics 00:24:34 - 00:29:11 Canvas API Basics Matt demonstrates the basic methods of drawing in Canvas through a live example. Canvas Sketch Applications 00:29:12 - 00:36:48 Canvas Sketch Applications Matt addresses why canvas sketch is useful, and shows how to specify things like dimensions and orientation. The Grid 00:36:49 - 00:41:30 The Grid 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. Drawing the Grid 00:41:31 - 00:49:21 Drawing the Grid Matt jumps back into the code and demonstrates how the basic grid print comes together. Linear Interpolation 00:49:22 - 00:53:29 Linear Interpolation Matt integrates the lerp module into the basic grid example. Adding Randomness 00:53:30 - 00:59:41 Adding Randomness 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. Radius & Organic Randomness 00:59:42 - 01:06:08 Radius & Organic Randomness Matt gives each circle its own radius by using destructuring and a random Gaussian distribution. Color Palettes 01:06:09 - 01:12:40 Color Palettes The nice-color-palette module is introduced into the project to provide low-effort harmonious colors. Noise 01:12:41 - 01:17:34 Noise Matt introduces the concept of noise in both what it does, and the basics of how to implement it with noise2D. Coding Noise with noise2D 01:17:35 - 01:19:57 Coding Noise with noise2D Matt jumps back into the code and demonstrates how to implement noise2D in the existing example. Drawing with Text Characters 01:19:58 - 01:26:59 Drawing with Text Characters Matt instructs on how to insert characters into the existing example. Canvas Q&A 01:27:00 - 01:30:42 Canvas Q&A A question is asked about how to save work when it is randomly generated, Physical World Canvas Generative Wall Drawings 01:30:43 - 01:35:09 Generative Wall Drawings 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/ Generative Wall Exercise 01:35:10 - 01:37:27 Generative Wall Exercise Students are instructed to perform their own interpretation of one of Sol LeWitt's works. Takeaways of Generative Wall Exercise 01:37:28 - 01:39:37 Takeaways of Generative Wall Exercise 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 The Third Dimension 01:39:38 - 01:44:46 The Third Dimension 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. - http://threejs.org Three.js Concepts 01:44:47 - 01:53:00 Three.js Concepts Matt 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 Cube 01:53:01 - 02:05:43 Coding a ThreeJS Isometric Cube Matt introduces a basic ThreeJS 3D isometric cube template, and walks through what the variables are. Capabilities of Three.js: Isometric Perspective 02:05:44 - 02:21:01 Capabilities of Three.js: Isometric Perspective Matt introduces a basic ThreeJS template, how to render with isometric perspective, and how to instance many meshes in a single scene. - http://github.com/mattdesl/workshop-generative-art/blob/master/docs/cheat-sheet.md Capabilities of Three.js: Color, Lighting, and Composition 02:21:02 - 02:28:15 Capabilities of Three.js: Color, Lighting, and Composition Matt improves the scene by introducing color variation, directional lighting, and changes in composition. Three Dimensional Thinking Q&A 02:28:16 - 02:29:46 Three Dimensional Thinking Q&A A question is asked about how ThreeJS handles intersecting objects. Rationale for Simple Shapes 02:29:47 - 02:31:02 Rationale for Simple Shapes Matt 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 GIF 02:31:03 - 02:34:00 Making a GIF Matt explains why a GIF may be a solution for showing solutions to clients, and transforms the example from the last section. Exporting GIFs & MP4s 02:34:01 - 02:42:59 Exporting GIFs & MP4s Matt demonstrates how to export GIFs using gitftool. Easing & Trigonometry 02:43:00 - 02:51:46 Easing & Trigonometry Matt introduces tools to solve easing issues that are associated when applying trigonometric functions. - cubic-bezier.com Troubleshooting and webGL Q&A 02:51:47 - 02:54:28 Troubleshooting and webGL Q&A Matt addresses several questions that were introduced, including clarifying what the difference between WebGL and ThreeJS is, and bugs in the previous example. Shaders Shaders 02:54:29 - 03:04:41 Shaders Matt conceptualizes shaders and GLSL, and explains how shaders work in practice using gradients. Primary Branding 03:04:42 - 03:05:51 Primary Branding Matt shows an example of generative branding for a company by DIA Studio. Shaders Example: Introduction 03:05:52 - 03:16:10 Shaders Example: Introduction 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. Shaders Example: Shape & Form 03:16:11 - 03:26:22 Shaders Example: Shape & Form Matt applies shaders to the template to start forming the desired image. Shaders Example: Step Functions 03:26:23 - 03:30:55 Shaders Example: Step Functions Matt continues iterating on the Primary Branding example by introducing the smoothstep function in order to smooth and feathered edges. Shaders Example: Additional Thoughts 03:30:56 - 03:32:53 Shaders Example: Additional Thoughts Matt introduces other aspects that can be augmented in the example that may yield interesting results, including gradient. Shaders Q&A 03:32:54 - 03:38:03 Shaders Q&A 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. Hot Reloading & Future Features 03:38:04 - 03:40:05 Hot Reloading & Future Features Matt demonstrates how to use hot module reloading in a project to speed up development. Future improvements to the tool are also discussed. Introducing Noise 03:40:06 - 03:47:16 Introducing Noise Matt applies noise to the shader using the glsl-noise npm module. Introducing Color 03:47:17 - 03:53:02 Introducing Color Matt introduces color to the shader using the glsl-hsl2rgb npm module. Conclusion Additional Thoughts and Q&A 03:53:03 - 04:02:52 Additional Thoughts and Q&A 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. Live Example: Thought Process 04:02:53 - 04:19:52 Live Example: Thought Process 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. Live Example: Advanced Topics 04:19:53 - 04:32:28 Live Example: Advanced Topics 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. Penplotter 04:32:29 - 04:36:39 Penplotter Matt introduces the penplotter template for applications such as wood etching. Blender 04:36:40 - 04:41:34 Blender Matt introduces another project that was accomplished by scraping images of cities and using Blender, along with other methods, to create a crystalline image. Current Projects 04:41:35 - 04:46:07 Current Projects Matt discusses what he's been recently working on at the bequest of the audience.
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах Вы не можете прикреплять файлы к сообщениям Вы можете скачивать файлы