Creative Coding with Canvas & WebGL

Takeaways of Generative Wall Exercise

Creative Coding with Canvas & WebGL

Check out a free preview of the full Creative Coding with Canvas & WebGL course

The "Takeaways of Generative Wall Exercise" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:

Matt demonstrates some of his own outputs from the Generative Wall Drawing exercise, and shows examples of how it looks in a 3D environment.

Preview
Close

Transcript from the "Takeaways of Generative Wall Exercise" Lesson

[00:00:00]
>> Mathew DesLauriers: Maybe you had a moment to try and work on this exercise that we had up here. If not, that's okay too. We can just talk about it a bit. I can show what I came up with when I was experimenting with this idea of instructions. And this is one of the outputs.

[00:00:17]
The colors look a little bit different on the projected artwork than they do on the final artwork. But sort of the same idea, and when you project that kind of an image onto a 3D scene, which is not something we're gonna get into today cuz it involves blender and three dimensional animation softwares which we're not gonna get into.

[00:00:35]
But, just know that you can take these images that you're exporting with Cmd+S or Ctr+S from kernel sketch. And you can use those in other forms of media, or you can continue to design with those and continue to tweak those in different ways. Here's another export. And this is just using the same exact formula, or the same exact algorithm.

[00:00:56]
It's just trapezoids that are overlapping, and each trapezoid is colored differently. Each trapezoid has a stroke, and the stroke is the same as the background. So you can start to see these disconnections between them. And I also did a few other small things. Like I used a slight opacity, instead of filling it completely with a solid color.

[00:01:17]
So you can start to see some of them are almost like stained glass, showing the background image or the content behind them. And also generally when I do this kind of, this artwork with 2D shapes, I then put the image through Photoshop or through a similar software and add a bit of noise, add a bit of grain.

[00:01:38]
Just to do some final processing on it. I just find that it ends up sharing much better when you share it on Instagram or online, or something like that. And there it is again projected onto an actual wall. So this is kind of taken the idea of Sol LeWitt's wall drawings, taking the same idea of using instructions to create simple scenes that are random and generative.

[00:02:03]
And then producing actual murals, or in this case, virtual murals using that code.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now