Episode 3: Sol LeWitt in Vanilla JavaScript

Slides

Exercise options:

  • Reproduce any Sol LeWitt piece.
  • Create generative art in the spirit of Sol LeWitt.
  • Add animation to what we’ve created (e.g. rotation).
2 Likes

Hello @curran,
Here is my Exercise: Curran’s Face A Là Sol LeWitt

I have no clue how to make this code cleaner! And the animations are really bugging me. I was not able to make you spin when clicked. (Commented code).

Move around and click.
(At mobile it is not draggable but where you click it moves the face, and changes the color pattern of the background)

Well, it was fun!!

[edit note: I’ve edited this post so many times… after every change. Last change: Randomizing the four backgroungs when clicked with On Off Timer)

3 Likes

Here is my work so far. I am still trying to get some rotation in there but it seems to be rotating after the mask is applied.

7 Likes

Let’s add some animations to Sol LeWitt’s masterpiece.

6 Likes

Next Attempt

5 Likes

Sol LeWitt: Get It Right In Black & White - The Game

Ok, here is another update of my Exercise.
This time it is becoming the Game “Get It Right In Black and White”. So, there are few patterns (all related to Sol LeWitt), and you need to stop the flicking of the screen when ALL the patterns are Black / White, only.
When you score, speed increases.

ToDo: Create lives, and learn to refactor my code.

(ps: Just learnt that we can edit only 7 times the post! LoL!)
https://vizhub.com/felipemaion/b79cb6bdcb3d4e84a14b5877667ad266

3 Likes

Recent work - circles grid

5 Likes

@Nita Very nice! That’s pretty close to this Sol LeWitt piece:

image

I bet with a little tweaking you could get it to look like that.

6 Likes

Tried to do something different. It took a bit of time of time and fiddling, but was really rewarding as I learn a lot through the process.

Would be interested in if it is possible to make the repeating paths for the bands into a single path. Or other ways to produce this more efficiently.

3 Likes

That’s brilliant! Very nice work.

Nothing immediately comes to mind in terms of ways to optimize.

2 Likes

Is there a way of capturing one of the paths of a band (i.e. repetition of VizHub logo across the width) programmatically into one path?

When you inspect it via the browser it is in its coded state, i.e. prior to translation and the iteration of each original path with how each it’s repositioned/ translated each time. So I’m interested if there is a way of referencing the paths state once it’s transferred, and maybe concatenating these into one path that forms the band? I know you can do it by capturing the actual svg as a picture and getting with inkscape it something, but is this it possible to do another way?

There must be some way to combine them into a single path, yes. I’m not sure exactly how to do it though. The gist of the process would be:

  • Make a copy of the original path.
  • Parse all the coordinates and translate them.
  • Re-serialize the path using the translated coordinates.

It might be possible to use SVG Patterns too. I’ve never used them, but it might work.

1 Like

My LeWitt Reproduction.
I used Curran’s example as a starting point. Centering the triangle horizontally was the challenge. I had to figure out how to use variables to specify polygon points.

2 Likes

Very nice work! I’m thrilled to see that the course is still inspiring folks to create new things and learn.

1 Like

i’m sorry for yor eyes

3 Likes

Here’s mine! Didn’t get too creative… only changed colors and gave it a setInterval() for animation. :smiley:

1 Like
1 Like

So LeWitt with some bizarre animation!

1 Like

Wow very nice! Stroboscopic!

1 Like