Blockly L-System Generator Demo

102 views
Skip to first unread message

Beka Westberg

unread,
Jan 2, 2019, 11:22:44 AM1/2/19
to Blockly
Hello Fellow Developers,

The L-System playground is a Blockly-based web application for creating turtle-interpreted L-Systems.

L-Systems are (in inaccurate terms) a way to create drawings through rules you make up. And because of the way they work, you can use them to make cool fractals like these:

LSystem (6).png

LSystem (7).png



with only a handful of blocks.

You can try it out here. And if you check out the "more options" button in the top right there are some ready-made examples that you can modify and play around with.

I did do a not-insubstantial amount of messing with the core to get this to work (plus this is my first web project) so there will be bugs and rough spots (and please tell me when you find them!). All comments, critiques, and c... questions are welcome :D

Thank you for your time,
Beka

kushal bhattacharya

unread,
Jan 2, 2019, 2:23:17 PM1/2/19
to Blockly
Wow looks cool :-)

Abby Schmiedt

unread,
Jan 2, 2019, 5:22:50 PM1/2/19
to Blockly
This is awesome! Absolutely loved playing around with it : ) 

Thanks for sharing!

Abby

Rachel Fenichel

unread,
Jan 7, 2019, 5:52:08 PM1/7/19
to Blockly
Nifty!  I like how quickly the complexity can grow with L-systems.

Some questions/comments:
- How did you implement parameters?  Your implementation seems like it's partly between blockly and scratch, with things like clicking on a parameter name in the repeat block to get a copy of that parameter.
- What was the inspiration for this project?
- I would make replace, draw, and create different colors.  That would emphasize that "create" blocks always change the list of commands, "replace" blocks are run in the intermediate stages, and "draw" blocks are run at the end.
- I would change "create <command>" to "add <command> to list", and generally emphasize the fact that there is a list of commands that is being modified.
- It would be cool to have add a visualization step for the replacement operations.  I can tell from the descriptions that everything is operating on a command stack, and that it's mutating that command stack as it goes, but I have a hard time keeping track of how my changes can affect the stack.  The result is that I can make cool things, but I can't debug my designs when I want to make a *specific* cool thing and made something else instead.

Cheers,
Rachel

On Wednesday, January 2, 2019 at 8:22:44 AM UTC-8, Beka Westberg wrote:

Beka Westberg

unread,
Jan 7, 2019, 6:36:57 PM1/7/19
to Blockly
Hi Rachel,

Thanks for checking out the project!

- The parameters are implimented as a custom field, where the showEditor_ function creates a new parameter block. You can see the code here (ignore the disabled property, it's never used in the final project). My original goal was to to have them be "draggable" like scratch, but the parameters were a thing I added pretty early on, and I couldn't get it to work at the time. Maybe I'll take a look at the scratch code and give it another shot!

- The original inspiration was the book The Algorithmic Beauty of Plants. I read it because of another project I was working on a year or two ago. It talks about the theory behind L-Systems and how they were originally created for plant simulation. I haven't been able to look at a plant without thinking about it since lol.

- Good idea! (also the more colors the better hehe)

- I struggled with finding a way to articulate the idea, I think your suggestion works a lot better. Thank you! :D

- Hmm I like this idea... I'll have to think on it and see if I can come up with a cool visualization. The standard way to represent L-Systems (I think) is with a tree like this:

L-System Tree.jpg

Maybe there'd be a way to animate something like that... or it could be something different entirely! If you have any suggestions I'd love to hear :D

Best Wishes,
Beka

On Monday, January 7, 2019 at 2:52:08 PM UTC-8, Rachel Fenichel wrote:
Nifty!  I like how quickly the complexity can grow with L-systems.
about 

Andrew n marshall

unread,
Jan 8, 2019, 2:58:05 PM1/8/19
to blo...@googlegroups.com
Just playing with Kock Curves a bit.  Workspace XML attached. I would love an ability to easily save and load from file.
I would recommend looking at the how the Blockly Code demo allows saving  to a server with a URL anchor parameter to load it.  The server code for it is here.
LSystem-KochCurve.png



--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
LSystem-KochCurve.xml

Andrew n marshall

unread,
Jan 8, 2019, 2:58:35 PM1/8/19
to blo...@googlegroups.com
Correction Koch Curves.

Beka Westberg

unread,
Jan 8, 2019, 6:35:34 PM1/8/19
to Blockly
Thanks for checking it out Andrew! That Koch curve looks beautiful (I may be a little bit jealous :P). And I'll definitely look into a better saving solution, thanks for sending me the link : )

Updates:

- Replace & Draw blocks are now different colors. Replace blocks are blue, while Draw blocks are yellow-green. Some other colors had to be moved around to make room.
- "create a: <piece> <parameters>" has been changed to "add <piece> <parameters:> to list"
- Parameter blocks can now be dragged from the parameter fields. (super hacky but it works!)
Reply all
Reply to author
Forward
0 new messages