jeffeb3 / sandify

web based user interface to create patterns that could be useful for robots that draw in sand with ball bearings.

Sandify

Sandify turns your cold, empty-hearted, emotionless sand tables into cold, empty-hearted, emotionless sand table robots with enchanting patterns.

Sandify outputs code you can run on your sand table. The code produced is:

• Continuous, since the ball can't lift to travel to another location.
• Bounded to never exceed machine limits, as the firmware isn't typically smart enough to handle.

Sandify supports a large number of shape types and effects, so be creative! Input is welcome from the community.

Using Sandify

• Head over to [sandify.org]((https://sandify.org).
• Adjust the machine limits to match your table.
• Add shapes and effects until you create a pleasing pattern.
• Export the code in a format supported by your table.

More info

• Check out the wiki for lots of details on features.
• Read about how Sandify came into being.

Running from source locally

• Install npm and node.js.
• Clone the Sandify repository, and change to that directory.
• npm install
• npm start
• View in your browser at http://127.0.0.1:3000 or http://localhost:3000.

sandify's Issues

Support for circle tables

Hi there, I am contemplating having a square table, with only a circle area exposed in the middle. Right now in the software the limits are defined as a rectangle. Would it be impossible to defined the usable space as a circle? I'm not opposed to rolling up my sleeves and sending you a pull request, would just like to know ahead of time if you see this as even a possibility?

Basic Instructions

Basic instructions or pointer tips are needed to help those just getting started understand what each variable does in order to create desired effects.

As an add-on to this, a basic getting started tutorial that goes through creating several patterns would be helpful. The faster this program is to learn, the more awesome designs people will create and share.

Background: I just finished putting together my machine and really wanted to see it working, but got flustered in trying to quickly create a pattern that would look interesting and fill the entire area.

Sandify Webpage issue

Web page loaded incompletely and cannot able to design. Kindly rectify it

Text needs support for multiple lines.

I want to make a \n or to go to the next row.

Layout

The layout isn't great. The canvas is a static size, and the machine settings don't look like they fit, and the GCode button is hidden, with no indication that there's anything down there.

Import gcode files

Similar to the way the thetarho import lets gcode users convert thr files, thr users should be able to convert gcode files.

This is a little more complicated, because I'll need to parse the gcode for the features, which will mean at least supporting everything G0/1/2/3 does. But I'd like to do that anyway. Maybe someone knows of a good gcode javascript library?

In the UI, it probably makes sense to have it in the Code tab, and have the import button handle both, with some auto detection based on the extension, or the content. The rest shouldn't change.

Direct gcode dump

It seems like a no-brainer, but I believe we should support having Sandify download directly to the Arduino via a USB, Wifi or Bluetooth connection. It should look to the ZenXY device as if something like Repetier-Host were connected and sending data. This would allow us to skip a bunch of steps in getting from the design of a pattern to the actual drawing of that pattern on the table.

Store parameters in output

Mark (mrehorst) suggested I save the parameters that created the pattern in the gcode file. This is a great idea, and I would like to do that.

Support vector of vertices.

The text is especially bothering me. I think the whole sentence needs to be treated as one object, so that growing and scaling don't mess with the shape of any single letter.

If the vertices computed were actually arrays of vertices, then we could assign each array a proportional grow/spin and not grow or spin inside the vertices of a particular array. This would let us avoid scaling letters like 'B' while drawing the B or even avoid drawing the entire sentence "FREE BEER".

How about a Y axis offset?

I have a long rectangular table- the current offset only works in X. Any chance a Y offset can also be added?

More text characters

lowercase, international currency symbols. more punctuation. More fonts.

Import Thr files

Maybe an alternate input should be reading thr files. There is a great community of sisyphus creators out there that share their drawings on the sand tables and there is even some decent software for making patterns. Maybe it makes sense to read in those files, and output in gcode, or maybe allow some rudamentary editing for other thr tables.

gcode optimization

I've started working on a flow chart for a post processor for optimizing gcode. My goal is to eliminate duplicate lines in the gcode files, but more importantly, to minimize the motion around the edges of the table while still preserving the sequence of the pattern generation. The motion around the edges is boring to watch, takes up a lot of time, and adds to wear on the mechanism.

I've been making sketches and looking at patterns for a couple days and think I have a handle on all the special cases that have to be allowed:

Stuff to keep from the source file:

1. any non duplicate, non G01 line
2. the first G01 line
3. all non-duplicate, on-table G01 lines
4. edge to table transitions
5. table to edge transitions
6. corner to corner transitions
7. edge to corner transitions
8. corner to edge transitions
9. corner to table transitions
10. table to corner transitions
11. edge to other edge transitions

Stuff to throw away:

1. sequential duplicate lines
2. all "in between" points along an edge
3. in between points along multiple edges

Regarding transitions- the key point is that you have to keep anything that draws on the table, and minimize the travel between the points where the ball leaves the table (a transition) and where it reenters the table (another transition). The source file may have the ball racing back and forth on the same edge, or around 3 corners several times before it gets back onto the table. We can throw away all the in-between stuff and just keep (or generate) a (the shortest?) path between the ball exiting and entering the table along as many edges as it takes.

I'm trying to figure out how to make this work in a single pass, reading the source gcode line by line. I suspect it may be easier to use multiple passes, (example- one pass that eliminates duplicate lines is very easy), but we'll see.

This is going to take a while for me to finish because I am going to have to learn whatever programming language I end up choosing once I have worked out the algorithm. I may be able to get some coding help from people at the makerspace.

Base Input component?

See commit c7ffa3a.

Machine Limits

Recompute vertices so that the shape is as preserved as possible when the vertices exit the prescribed machine size.

Drawing Text

I don't know, maybe this should be in #57. I'd like to be able to enter some text into a text box and have it rendered on the table. This would be pretty complex to do, I believe, even if you limit to a single font style. But it's really open the package to commercial uses. Perhaps with the added functionality of adding line feeds... "Buy Beer/nHere" would display as:

Buy Beer
  Here

Hamburger Menu Icon

A quick UI improvement would be to add chevrons to each box bar when it is collapsed to give the user a hint that it expands down. A second option that may be easier to implement would be the horizontal lines used to show menus on mobile UIs.

Looping gcode

Assuming we have direct downloads of gcode (#49) it would potentially be helpful to allow the user to specify that the patterns be repeated after completion, or even that several patterns could be chained and the chain repeated. I know this one is likely to be complex, since we'd have to deal with moving from one pattern to another, preferably without walking all over the previous pattern in the process, but it'd sure make it easier to sell a ZenXY system into a business if they didn't have to manually trigger each 'print'.

Tests

We should have tests. We should probably be doing test driven development.

new UI generating coordinates beyond set limits

I love the updated UI- it's much easier to generate patterns quickly by scrolling the parameter values. I generated a bunch of gcode today and for some reason the files contain coordinates far beyond the limits I set on the UI.

I set X limits to min 5, max 730, and Y to min 5, max 1560.

Here's a start of one of the files (I added file name and speed):

; r_l_p7.gcode
G01 X3227.500 Y26459.896 F30000
G01 X3227.500 Y26459.896
G01 X3227.500 Y26557.500
G01 X3227.500 Y26557.500
G01 X2502.500 Y26557.500
G01 X2502.500 Y26557.500
G01 X2502.500 Y25727.604
G01 X2502.500 Y25727.604
G01 X2502.500 Y25002.500
G01 X2502.500 Y25002.500
G01 X3227.500 Y25002.500
G01 X3227.500 Y25002.500
G01 X3227.500

Smooth Transform Pattern

I should be able to smooth out the growth/spinning of the pattern so the end doesn't just jump from one ring to the next.

Basically, I'm thinking that while looping through the vertices of the shape, I will have a measurement of the percentage through the shape, either by vertex number or by distance out of the total distance for the shape. Then I'll adjust the scale and rotation value based on that percentage. It should end up with a smooth transition at the ends of the shape.

Modularize App.js

App.js has a bunch of stuff in it, like input things, and there should instead be some simple groupings of objects in different files. Something like:

• Shapes.js
• Transforms.js
• Drawing.js
• Ouput.js

Thoughts?

Machine Preview More Visible.

Another area that could be improved is the location of the preview window. I think a floating window that always stays on screen would be ideal (at least for non-mobile users) but the place I personally spent the most time messing with settings and wanting to see the changes are all the modifier options. The UI is rather chunky (not a judgement, just the best description I could think of) so not very many options fit on my screen at once, so frequent scrolling is necessary. Between options this isn't bad, but having to go to the top of the page to see the visual output of each modification I make gets very tedious fast.

Options could be:

• Make the visual window float so it stays in the upper right of the webpage on the screen all the time.

• Flip the visual window and the machine settings to make the window closer to the modifications options.

Thoughts and opinions from others user experiences?

Flush out the inputs

I have some example pieces in there, just toying with react-bootstrap stuff. This issue is taking those pieces and really cleaning up the input, so that different input boxes become available when they are needed, and the backend gets properly generated.

At the end of this issue, someone can select a starting shape:

• Triangle
• Square
• Star
• Other
  and the options for each shape will show, with defaults. The user can then select:
• Spin: "speed" and "center"
• Grow: "speed" and "direction"
  And select reasonable choices for that. The user will then set up the boundaries of their machine:
• X, Y, min/max
• Rate?
  On the backend, these things will generate a useful set of coordinates from that path, ready to be used in other components of the App.

GCode Precision

Marlin chokes on more than 4 decimal places. Limit the resolution of the output.

Logo

The spinning logo at the top is the react logo. It seems very apropos to me, but it's not our logo. If anyone has any ideas on what it could/should be, please help.

Sandify local

Hello,
I wanted to run SANDIFY local on my WINDOWS 7 computer but it don't work.

I installed NPM and NODE.JS
Download and unpacked the ZIP file
Run "npm install package"
Run "npm start"
2018-07-14T16_22_02_462Z-debug.log

How can I fix it?

Docs on sandify's live page

• Help people find the source code for sandify
• Point to the ZenXY machine
• Encourage people to post problems/questions on the github page, in addition to the vicious1.com forums.

Versions/News/History

Now that ZXY is in the wild, people will start to really "need" this tool. I don't think it's feasible to have previous versions working, but I wouldn't mind having a developer/staging branch and a stable/deployed branch. Then the next thing is to add version numbers, and figure out a way to post a changelog and a way to announce any new features to users.

Anyone have any thoughts on a good way to do that?

Turtle scaling

Hey guys, turtle won't scale the design big enough for my table. All I can make is a little spiral maybe 6" across.
Oh, table is X max = 1280, Y max = 2060.

Double line text font

Instead of sleeping I've been thinking of the variations needed to the primitives we are using for the single lined font we're currently using. For instance to generate the outline for a font like this:

We might need to create and place curves that aren't in 90° increments, such as at the top left of the V, where the serifs require different curves. I suggest that replacing the current 'bulge direction' with a number between -360 and 360 to draw circular (modified by the font scale itself, so almost all will actually be ovals) curves the indicated number of degrees (<0 for counter clockwise, 0 for straight line and >0 for clockwise) from the current position to the ending coordinates. We'd have to have a mechanism to track the starting angle in degrees from vertical as well, using that to give the direction we're curving from.

Large files in Chrome end up in Error

This is mostly using thr output formats. It only happens when there are a ton of vertices, which happens in thr because each flat face is many arcs.

I found this, and I think this is probably the right solution:

https://github.com/jimmywarting/StreamSaver.js

It makes sense to build the file and download it at the same time anyway. There's no reason to put 500MB into memory that's headed only for the hard drive.

Wipe First Flag

I envision a checkmark on the Sandify page that tells the gcode to do a wipe of the table before starting on the drawing. Though maybe it should be a named wipe, so you can choose a circle wipe before an angular drawing...

GCode Settings

Allow the user to set some parameters for gcode generation. For now, these params would be:

• Pre and Post scripts
• Max Feed Rate

Hitting Enter Reloads Page

When entering in numbers to any of the fields, and by habit hitting enter, the page reloads erasing all current inputs for everything except the machine size fields.

Using Firefox 65.0.1

Integrate Turtle

We need to merge turtle into sandify. How do we do that?

1. Make turtle another input mode, similar to the Transforms.js. We could bring back the ace.js editor, and the command line and remove all references to the canvas from turtle, but make the output an array of vertices.
   -The design you have won't look the same because there's no way to lift the pen with an array of vertices. We could add a member to the Vertices to indicate a move vertex.

2. Make turtle handle the canvas, and have it use an array of vertices as input.

• This promotes turtle too much. The benefit of turtle is it's interface with the user, making it our backend seems like it's going to be crippling.
• Other input modes, by other people would fit in parallel to Transform.js and Turtle.js. So making turtle different doesn't make sense to me.

Dynamic or custom shapes

Here's a code snippet that I added to Transform.js to create a polygon of arbitrary number of sides.

    var poly_points = []
    var numsides = 8
    var angle = 360.0 / numsides
    var poly_scale = 1.0
    for (var i=0; i<numsides; i++) {
          var radians = angle * Math.PI / 180.0
      poly_points.push(Vertex(poly_scale * (i + 1) * Math.cos(radians * i), poly_scale * (i + 1) * Math.sin(radians * i)))
    }

Jeff, it’s really a special case for when you are working with a regular polygon. The turtle stuff will be much more useful for non-regular shapes (conic sections, hearts and eggs, fractals). It could easily replace the code that’s in there for the triangle and square. But then it might make sense to just do them all with turtles…

How about we do two types of regular polygons, the one I’m playing with and another that alternates between ‘in’ and ‘out’ vertices, that would allow for multi-pointed stars. Leave turtle for the odd shapes.

From:
https://www.vicious1.com/forum/topic/does-this-count-as-a-build/page/8/#post-38887

Get Drawing Working

My intention was to bring in as much of this as possible:
https://github.com/wrschneider/js-turtle/blob/master/turtle.js

But it's just very intertwined with the image canvas stuff, which seems (to me) to be completely incompatible with react-bootstrap and react.js. I found an example of a react canvas, and it's drawing a rectangle. Maybe it would be better to either:
a) copy-paste the turtle.js into TurtleCanvas.js and start hacking away at getting the functions to use the react canvas instead or
b) Use turtle to generate a list of positions, x, y and then have TurtleCanvas be sent in that list of locations or
c) ditch the turtle alltogether, if it's not helping us.

I'm inclined to do b) but Maybe @jamesd256 has a better way of doing that? Maybe I'm thinking about this all wrong?

Double mirrored?

The double negatives are gone now but I know for sure the Y is inverted and I believe the X is as well.

Math Shapes

I want to add something for a polar cycloid (like a spirograph) and something like a cardoid (or some other heart shape).

http://mathworld.wolfram.com/Spirograph.html

http://mathworld.wolfram.com/HeartCurve.html

GCode generation

From a set of properties, like {speed, coordinates} the gcode generator should generate the text needed to run the machine. Ideally, this would be available as a download. Anything that will make this slicker, such as a pre or post script should be pushed into the next issue, just so we can get this going faster.

NaNs in the wiping code

"I just started playing with the sandify website. Started with a wiper program
My parameters on wiper are angle=180 wiper size 12, X:0,193 y:0,193

It generates proper code, but then ends up doing something odd for a while, including values of "NAN" in the gcode file. Maybe this is a known problem. It's an easy workaround, just delete the code after the pattern is done. Maybe it's never seen a zen as small as mine!"

Flaskify?

"Flask it is then. Seems better suited to a web application than Bottle:

https://www.quora.com/Flask-vs-Bottle-what-are-their-advantages-and-disadvantages

Two boilerplate examples to try out for a quick start:

https://github.com/pyankoff/flask-react
https://github.com/gabrielfalcao/flask-react-bootstrap (mentioned before"

Eventually, I'd like sandify to run (or at least the majority of the components to run) on a raspberry pi or similar connected to the machine. Sandify would then connect, and stream the gcode, showing the traversed path so far, etc. This isn't as much work as it seems, if we have the right backend, and python is a good choice.

I don't want to rewrite everything from scratch when that happens, but I think it's probably same to keep going with this NPM approach for now, because:

1. the work is in react and react-bootstrap, which should be basically transferrable. If we get too far into tuning the deploy or test scripts, then we need to think about how transferable that is and
2. node.js isn't a terrible decision either. Depending on who is working on this when we decide to do the pi approach, or what skills we have learned, using node might not be terrible.
3. Some folks have already cloned and ran this code locally. I think having one toolset (npm) instead of two (npm/python) makes that a little easier.

So I'm thinking this is a back-burner item. If that's not true, then let's talk about it here.

Machine Preview Progress

The machine preview could have a little slider for previewing a section of the pattern at once. I imagine the far left showing the whole pattern, and as you move it right, it will start with 5% or so of the pattern mapped out, and which 5% will vary based on how much you move the slider. Something like that.

Custom Shapes - feature request

Is there a way to easily add some more base shapes like, a star, pentagon, rounded triangle and some other shapes? Would be cool to be able to draw something inside a space and have it repeat out those shapes like it currently does with a square or triangle.

Problem with polar table

Hello there,
I´m recently working on a round sandtable. So something like the sisyphus table, but its running on ramps 1.4 with gcodes.
The problem is now that when i export my designs as a gcode it is in cartesian system (X and Y) and not in polar (angle and radius) like i expected. So i already searced for a way to transform the cartesian coordinates to polar ones and i actually found one:
bdring build a polar pen machine and wrote a python script to do exactly what i want.
Here the link to how it works: http://www.buildlog.net/blog/2017/08/polar-pen-machine-kinematics/
and here where to download the script:http://www.buildlog.net/blog/2017/08/a-polar-pre-processor-for-the-pen-bot-written-in-python/

But with this solution there is another problem as this script espects the center/start position to be in the middle of the table. Sandify althogh has the center/start position in the lower left corner. And for that problem i didnt found any solutions jet.

Now i hope that someone could help me. Maby jeffeb3 could implement either the possibility to download directly the polar coordinate-gcode or to set the center point realy in the middle.

Thanks!

Rotation direction and reversal

It would be great if the direction of rotation could be specified, but even better if the direction could be reversed during the track. I've seen some sisyphus patterns that employ this technique and they look great. Maybe have an additional field with number of reversals specified?

Origin moves- Feature Request

Is it possible to have it continue from the end point along the edges to the lower left corner? Or maybe out to the nearest edge, then along them home? If it is rough I do not mind adding the 2-3 lines in by hand, just an idea.

If run in reverse this lets us home the machine and not over run the current pattern, without having to add in 2-3 lines of code by hand.

If run from the center it would make it end at the home point.

This just let you stack designs more easily. As it is I run the first in reverse (from "home" to the center) then the next from the center out by cutting and pasting them together. This seems to keep my table media really level.

Line coloring

Would it make sense to draw each line in a slightly different color? The progression of colors would show which lines get overwritten by later lines. It also would make the displayed shape a bizarre number of colors. I need to spend more time with github to figure out the mechanics of actually making the change in a branch.
-- BT
https://www.vicious1.com/forum/topic/does-this-count-as-a-build/page/6/#post-37730

Machine setting for ball size

Could a setting be added for the ball size the machine is using with a default to 12.7mm (1/2"), as I think most people are using that size, and then use this setting to drive the size of the red and green preview dots? This would visually help users see the scale of their design path better, so if you are trying to get the tracks to line up at certain intervals, there is less guess work since many of the modifier units are ambiguous (from what I have read elsewhere the ambiguity is intentional correct?)?

Another option could be to add faint adjustable grid to the preview, but I think that would add more clutter than is necessary.