Thread by @rasagy

Earlier this month, I dropped by my alma mater
@NID_Bangalore for a fun week-long @p5xjs workshop on Computational Design / Generative Art / Data Art.

Here is what I covered, along with thoughts on what worked & what I want to do better next time.

(1/n) 👇

@NID_Bangalore @p5xjs Context: This was for the M.Des. Information Design students, who had just finished a few weeks of Info Vis module.

I was told:
👉 They had a hectic past few weeks, so this should be a breather week 😅
👉 Most had no coding background & had struggled with learning code.

(2/n)

@NID_Bangalore @p5xjs We started the first day talking about expectations & aspirations, and hearing about their previous attempts at learning JS (D3!)

These students were in their first sem last year when I dropped by* for their foundation:

https://twitter.com/rasagy/status/1024673111860363265

*quit my job to drop by 😅

(3/n)

@NID_Bangalore @p5xjs I was really glad that even though most were *scared* of code — having tried & failed at learning d3 before — they were keen to try again.

So my goals were simple:
👉 Make a strong case for *WHY* they should still learn code
👉 Show coding can be fun

(4/n)

I knew that everyone picks up code differently. So my goals for the students were:
👉 You compete with your past self, not with your peers. Till you're learning something new, you're doing great. 👏
👉 On the final day, you get to exhibit whatever you're proud of. ♥

(5/n)

On Day 1, we didn't touch our computers. Instead, we watched videos & looked at examples of generative & data art projects, and then made some simple truchet tiles (10 PRINT FTW!) and encoded data (dates, phone numbers…) in them.

(6/n)

We wrapped up with a short reading task: @artnome’s piece on “Why love Generative Art”, that walks through some of the classic art movements that inspired modern artists to explore & embrace randomness & chaos.

artnome.com/news/2018/8/8/…

(7/n)

@artnome For the next two days, we decided to make classic abstract art paintings in @p5xjs!

The goal was to recreate (copy), randomize (add some chaos), & reanimate (add motion & interactivity) to these paintings.

I shortlisted a few painters here: in.pinterest.com/rasagy/artists…

(8/n)

@artnome @p5xjs This idea was inspired by some animations of Kandinsky’s paintings that I saw on

https://twitter.com/BauhausMovement/status/1165957906858172416

And this framework (3 R’s!) was inspired by Prof. Venkatesh from IDC who used a similar method for teaching data visualization.

And it worked wonders!

(9/n)

@artnome @p5xjs Here are some examples of paintings recreated and reanimated in @p5xjs by the students:

Painting by Laszlo Moholy-Nagy

(10/n)

@artnome @p5xjs A painting by Hilma af Klint that smoothly floats with mouse movements:

(11/n)

@artnome @p5xjs And an interactive version of Circles in a Circle by Wassily Kandinsky:

(12/n)

@artnome @p5xjs This was really easy for the students to pick up — they were already familiar with the cartesian plane (most design tools have grids & origin with x,y etc).

Once recreated, they would play around with adding randomness, and then swap some constant values with mouseX/Y.

(13/n)

@artnome @p5xjs Relying on these classic paintings meant that they didn’t have to spend as much time on aesthetics. So everyone focused on understanding their new tool (P5) to achieve a result, trying new shapes, blend modes etc as needed.

Quickly seeing a visual output was great!

(14/n)

@artnome @p5xjs Not having a set plan also meant that the environment felt like a studio, not a classroom.

Everyone picked their own goals, they would come together to understand a few commands & then would go back to working on their paintings.

@p5xjs reference was open all the time.

(15/n)

@artnome @p5xjs The last two days, each student picked an idea to learn, and figured out different commands & techniques that they’ll need for it. Some of them were excited about generative art, while others wanted to make something from data.

Here are few of their ideas:

(16/n)

Some played with names, and I have them the starter code from my viznam project. It was amazing to see them encode names into abstract shapes, like this project that generated occult shapes based on the letters & vowels:

Another one that made a tree like shape from alternative letters on the name:

(18/n)

Some made looping gifs, like this one:

(19/n)

While some had fun with patterns & randomness:

(20/n)

Along with these, we looked at a few more articles, videos & papers, like this article on the value of randomness: fastcompany.com/3052333/the-va… and this PBS video introducing Abstraction in Art:

(21/n)

Since they’re Info Design students, I also suggested reading:
👉 “Stone Soup, Anyone?” — a critique of data art hype: medium.com/s/story/stone-…
👉 Paper on Data Viz vs Data Art by @eagereyes: dl.acm.org/citation.cfm?i…
👉 Data Humanism by @giorgialupi: giorgialupi.com/data-humanism-…

(22/n)

I was glad to have some inspiring folks drop by to talk about their work & share feedback with the class:

Priti on generative typography,
@mathuramg on her time at @ITP_NYU (generative mandalas ftw!),
@d0ndeti on generative design & architecture.

Thanks everyone! 🙏

(23/n)

We wrapped up the week with a tiny class exhibition, with some of the experiments printed out and some running on laptops.

A great way to wrap up the week!

(24/n)

You can find more screenshots, gifs & links to source code on two Github Issues:

1. Abstract paintings in P5: github.com/rasagy/generat…
2. Final projects: github.com/rasagy/generat…

Interested in learning? I’ve started adding the resources here: github.com/rasagy/generat…

(25/n)

(Reflections, failures & notes to self tomorrow!)