Creative Coding with Canvas & WebGL

Generative Wall Drawings

Creative Coding with Canvas & WebGL

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

The "Generative Wall Drawings" 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 introduces some of Sol LeWitt's work, which was not the artwork itself, but was the instructions to construct the visual piece. -


Transcript from the "Generative Wall Drawings" Lesson

>> Speaker 1: I wanted to take like take us back a bit because we've just been coding this whole time. I want to talk a bit more about some of the theory and some of the stuff that inspires me. And this is one artist that was really, really came to fame I guess in the '60s and '70s for his wall murals and Sol LeWitt.

And the murals, they look a bit like this. They're huge and they're in museums and galleries, and he's done hundreds of them. And he simply just numbers them like to 60 or 120 or something. And when you look at his work you start to maybe see that it looks a bit reminiscent of generative stuff that you might be seeing today with code and with creative coding.

And especially when you look at something like this you think maybe this is done with a computer. But he was doing all of this work without a computer. I don't really think he was using computers or code, and this was certainly done at a time where those tools weren't very accessible.

And the way he would do this kind of artwork is that he would have instructions. And his instructions, this is a bit blurry but I transcribed a couple of them. But his instructions would very much just be like do this, do this, do this and then you end up with the artwork.

And so, just to give you an idea for this Wall Drawing 273, one of his wall drawings in the San Francisco MoMA, he says, his instructions that he gave his builders and his draftsman is to create a six inch grid covering the walls, lines from corners, sides and center of the walls to random points on the grid.

And he has different instructions for different walls. And on the 7th wall you do red lines from the midpoints of the four sides. Blue lines from four corners, yellow lines from the center. And so, that was kind of, his art wasn't actually creating the work because he wouldn't go there and paint it and sketch it or draw it or draft it out.

He would just create these instructions. Sometimes he'd also create a little drawing that's just on paper with pencil or something like that, that he would give to the builders. And the result of that looks a bit like this. And so this is actually what it turned out to be in SF MoMA.

And the kinda interesting thing is that every time he would give the same instructions to different people, they would end up with different results. And that's because there's this element of chance and randomness, as well as interpretation. How do you interpret the line width or line length? Is it a thick line or is a thin line, what exact colors are you using?

And so, if we were to look at this through the lens of creative coding and generative art, we can actually take his instructions just as they are exactly and we can try and re-implement as a bit of an exercise. So this is what I did here. And it looks a bit like a bunch of random lines.

It's maybe not the most impressive looking image. But in the context of a virtual space, or in his case a real mural that's 100 feet wide or however many feet it is wide, it starts to look at lot more impressive. And so I thought as I was doing this, I was looking, and I thought it was a kind of cool idea.

But it turns out it's not new. Other people have been trying to create his work with JavaScript before. And I found this really interesting site, GitHub Repo. You can just go to their site, And it has a lot of different examples of actual instructions that Sol LeWitt, back in the '60's or '70's would have written.

Like this one is squares divided horizontally and vertically into equal parts, each with lines in four directions superimposed progressively. And somebody has tried to re-implement that instruction with JavaScript and with code. And so, it's kind of an interesting thing, because at his time he was giving it builders and giving it to draftsmen engineers to build the mural.

But now, we're taking the same instructions and we're giving it to a computer and we end up with this sort of generative machine that produces an image that can be used as mural. And if you go to this site, there's a lot of them. So if you just GitHub button.

It's a really cool resource. They have all the instructions in this JSON file, and so it's actually a great way if you're lost to come back to this and just remind yourself that simple instructions like this can be really powerful as an image. And these simple instructions, they're not always super hard to come up with.

But they can still create powerful images.

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