NOC W9 – dress and swing🌿 – Welcome to Lisa's Blog ! (◓Д◒)۶

Infinite Patterns

Brief:

This sketch utilizes the concepts of fractals and L-systems to depict a little girl swinging, with her dress billowing in the wind.

Inspiration:

At first I just want to try L-systems myself after watching Daniel Shiffman’s tutorial. I actually have no idea what I can do. I used to think about feathers in wings, veins in human body, human alveoli… So many stuff! But I don’t think I can visualize them vividly.

I suddenly find a website. This website allows me to view my drawings of L-system in real time, all I need to do is just write the algorithm myself. Thus, I stopped obsessing about what I could do and I started exploring algorithms. And finally I think I can make dress based on them.

The amazing website here: https://kevs3d.co.uk/dev/lsystems/

Process:

I have to admit that this code heavily depends on Daniel Shiffman’s code in his coding challenge#6. especially the part how to “read” the algorithm to draw on screen.

So I first watch this video. For the algorithm part, I feel it is so interesting and begin to search for other L-system online.

image form here

So how such many F works? Basically, we need our computer to read through “[]”, “F”, “+”, and “-“. (I draw a very simple example as follows😋 (hope it is not wrong😇 (or misguide someone

After watching numerous videos, I finally found a website that allows for the online, real-time editing and viewing of L-systems.

I also find that, axiom can also be other formula.

So I try multiple times, and explore other geometry as well.

So in sketch1, I just tried to have different algorithm with the axiom equaling F.

In sketch2, I struggled to make the axiom to be FX. Which means I should also add another rule for X.

At first I was very confused, how can I make that??? But then I noticed that Daniel Shiffman’s very friendly code has such lines:

Since it mentions about rules.length, the rules should be an array here. So following Daniel Shiffman’s sketch, I changed the line for the rules.

It looks very easy, but I still spend sometime to figure it out.

In sketch3

I try to put them all in class, and also let them move as well. (Move here simply means rotate actually) And I also implement dat.gui here.

I spends a long time trying to find a satisfying shake formula. Finally involving i here makes they more nature.

(just find it funny haha)

And I also modify the button, so that instead of clicking the button, users can use gui to change the generation.

Yeah I also meet the problem with updating something that is in the setup.

Since Prof. Moon mentioned about onChange()

I searched for the example code online.

So I write another function called update. I suppose with onChange(), each time the value of them in gui are changed the function will be called.

In the final sketch, I do some modification about the aesthetic aspect.

And one of the most important thing, I write different set (algorithm) for the users to choose from, so that the dress can vary a little bit.

After my research online, Object.keys might be a solution.

However, I first failed to create a dropdown. What I create can only work at the beginning. If you change your selection, then the pattern won’t display anymore.

So I asked Chatgpt for help.

here is the example code he provides me.