The plan with this is to have a small system of pipes and boxes that move around in a circle. There needs to be multiple paths that it can take with an input, a cycling feature, and a garbage. The plan is:

• Create SVG paths in Figma that lead around in a few ways.
• Add a few buttons to add a square, pause, and reset
• Add probability to move between different lines
• Add state for garbage collected overtime
• (optional) Add the ability to remove a pipe which will cause the squares to fall to the garbage

Lets jump into this!

Used Figma and SVGOMG to create paths that were copy and pasted into the page component. Each one was given a unique id and colour to help identify them. Currently there are three paths:

Garbage -> Grind 1 -> Pellet 2 -Product 2
Garbage -> Grind 1 -> Pellet 2 -Product 3
Garbage -> Grind 2 -> Pellet 1 -Product 1

Buttons added and moved to the centre of the diagram. Had to move their zIndex up since they were being blocked by the SVGs when trying to click. Debugged with a console log to make sure everything is working.

Hooked up some simple random logic that generates a new piece each time something gets to the end. By pressing 'Add' you can introduce parts to the system which will cycle around and around. Need to set up some more logic as well as a seperate state for the possible direction. Will also be usefull to figure out how to remove the elements after they complete as it slows down after a while.

Would also be interesting to play around with the 'speed' of the assembly line by having a contant that can be changed which effects the speed proportionally. There is a method on the anime.path() that should allow to figure out its length and then use some kind of velocity calculated off of distance/time.

Added a filter that removes the object when its converted to the next type. Have also implimented a lookup table for what paths the item can take. Now the state remains the same size throughout, though the ids of each object changes. Would like to next work on a click event to highlight something and then pass this property along to the next conversion. Additionally Id like to try splitting up the conversion so when 'garbage' converts to 'grind' it results in say 5 smaller circles which could go either way. Additionally, some conversions could only take place when a certain amount have accomulated, say when 5 pellets are turned into a product.