Draw-Your-Own-Pattern Functionality #308

moeller5002 · 2024-12-02T03:36:04Z

Hi!
I just wanted to share my attempt at a HTML/Javascript program to create a Sandtable pattern from just drawing it on your screen.
It has functionality to import & position a background image for tracing, and my attempts can be seen in the attached images. There are still some bugs with reflections & rotations in the pattern when I import them into sandify, but overall it works reliably. Would love to see this feature implemented into the standard sandify!
DrawYourOwnTHR.txt
Appreciate all you've done,
Justin

vincentbraillard · 2024-12-02T20:40:21Z

Whow that very nice. Have you a video ton better see it?

moeller5002 · 2024-12-03T03:31:32Z

Here's a really quick sketch using my mouse. If you have a touchscreen or stylus, its much easier!

Untitled.video.-.Made.with.Clipchamp.COMPRESS.mp4

vincentbraillard · 2024-12-04T23:05:01Z

Nice 🙌🙌

Phoenix203apple · 2024-12-06T09:38:22Z

There is a coding error in the APP, how can it be resolved?

moeller5002 · 2024-12-06T13:38:55Z

12/6/2024 Updates:
Improved functionality with pen raises & drops. Improved theta formula to take into account crossing different axis. (Prevents the weird rotation/reflection issue of last program).
DrawYourOwnTHR - BEST.txt

Created Debugger Graphs to help discover any issues.
Includes a graph showing theta & rho as a function of time (point #). For a good pattern, this should be continuous, with no big jumps.
Includes a second canvas, that live-plots your pattern, to ensure that the calculated theta&rho can be converted back to the original coordinates.

DrawYourOwnTHR - BEST - With Debug Graphs.txt

Phoenix203apple · 2024-12-07T04:50:47Z

What should I do? This is the first time I encounter this situation. Are the two files you gave me to replace the files in the SD card? If possible, please guide me, thank you!

moeller5002 · 2024-12-07T14:48:08Z

Happy to help, sorry for not being clearer...

How to use:

Save the ".txt" files above to your computer.
Open the file in your text editor
File > Save As > Hyper Text Markup Language (.html)
Close out of ".txt" file
Open the .html file. You should see the webpage!

You can then draw whtever pattern you'd like. When finished, click "export pattern" to save the ".thr" file. This ".thr" file is the file you will put on the SD Card for your table

bobnik · 2025-01-25T13:28:37Z

Hi Justin. I've finally played around with your DYOP page. I like it, and I can see a place for this in Sandify. Here's what I am imagining, roughly:

Add new "draw" top tab.
On this tab, the user has a canvas like your current page where they can draw whatever they want.
Palette buttons:
- Arrow: Select an existing line.
- Pencil: Draw a new line. The line appears as a series of dots as you are doing now. However, as soon as they stop drawing, the application converts it into a contiguous line like you have in the preview. This "line" is now an object that can be selected, moved, and/or deleted.
Other buttons:
Import as layer - adds it to the Patterns tab.
Clear - clears all lines.

Let me know your thoughts, and I'll give some more thought on how we can pull the logic in your app into the Sandify structure.

jeffeb3 · 2025-02-06T21:10:49Z

Moeller, This code is really cool. I have been paying attention to this, but I haven't given it much consideration until today. Sorry. I'm really glad you shared it. Sharing this tool the way you did is a good way to get this started. Are those first patterns really drawn using this tool? They are amazing.

The rest of this pertains to sandify, not the drawing code as it is.

Bob, I like your thoughts on it. Drawing is pretty fun, and tactile, and obviously a great feature. I think your idea of cutting the drawing into multiple lines is a good one. But I bet people are going to be drawing pretty continuously, and not being able to select multiple lines would make any movement really frustrating. I also want to keep it pretty simple (at least as an MVP) to avoid doing any kind of playlist feature (like reordering lines) inside the drawing layer.

I haven't done a lot of drawing on a tablet or mouse. But I have tried a few and they all seem to have an undo button. It is common to frequently lift your pen to "save progress" as you draw. If you mess up, you only undo a little bit. So in my mind, the lines go into a queue, and we can add an undo button to pop them off (could be a feature for the next version). But I would want the whole layer to move, scale, loop, etc together.

Some open questions I have:

Does the drawing (in sandify) happen in a new window (maybe a modal) or in the existing preview window?
Can users reopen the drawing once they have finished the initial drawing?
How important is the importing of a background image, like the Shrek trace? It seems pretty useful. I worry about making it simple for users. Simplicity and extra features are luxuries that we don't have to have at the start though.
Does it make the most sense to have this be part of sandify, or push it to a different project/page and just be as friendly as possible to make the two tools work together? If it is a simple drawing tool, I would like it in sandify. If it is a more feature full thing, then a separate tool would make the interface a lot easier and both projects easier to maintain. If we added editable bezier curves or the background image or layers than a separate tool might be better.
I have also really wanted to have a simple coding interface forever. Like writing turtle code to make a pattern. If there is a way to support these kind of "complex input" pattern types at the same time, I would just want to have a nod toward that.

That is a lot of opinions. But this project is not me dictating things. If anyone wants to push on these features and you're not breaking the existing functionality too much, then I will test, approve, and release it.

moeller5002 · 2025-02-07T23:16:54Z

Hi Bob & Jeff,

Thanks so much for all your feedback on this project. I'll start off by saying that this entire project is outside of my area of expertise, I work in insurance and have only used html or JavaScript a couple times before this project. On top of that, my free time is limited these next couple months as I'll be studying for some professional exams.
That being said, here's my my thoughts on enhancements

Other Tab VS Existing Window
-Existing window would be ideal but would require a little more work/logic to get running smoothly with the rest of Sandify. We'd need a distinct operation for editing the layer (moving/rescaling operations) vs editing the drawing. It should also auto-hide the other layers when you 'draw' functionality is activated (or at least make them un-selectable). The imported image/background should be pretty easy to incorporate just like another layer, with the ability to move or resize.
I do think it would be worth it to cohesively integrate with the existing structure though.

Clear Button/Undo Button
-This might be more difficult to implement in my stand-alone file than in Sandify itself. I havent looked closely into the Sandify source code, but if individual layers are actually just THR files, I think the setup in the screenshot below would work pretty well. Essentially, each pen stroke would create its own "sub pattern" that is also just a THR. The same code that connects layer-to-layer could also connect penstroke-to-penstroke.

*Side note: The Sandify preview at 100% is too small, and 200% is too big. Idk if this is monitor specific, but having an in-between size would be nice.

Contiguous VS Dotted Line
-Weird limitation here is the number of cursor points per second that the draw functionality actually tracks. I have not found a way to modify this, and only place down a point if the distance from the last point is at least 0.0125 units. So if a user moves the cursor super fast, a straight line would make it look fine, but the dotted line would show just a couple dots. Since the Sisyphus table uses circular interpolation by default, the actual path would not be a straight line. Interpolation between drawing points that are super far from each other is a pretty simple enhancement to my code, but one that I don't think is necessary for 99% of situations. Regardless, I’ll work on it if I get the time

Coding Interface
-I would really love this functionality but can’t see a way to mesh it with the drawing code. While I’ve never used Python turtle graphics, I have made several parametric patterns such as https://en.wikipedia.org/wiki/Butterfly_curve_(transcendental) for my table using Excel VBA. Having some interface where you could write turtle code, or parametric code, or whatever, would be very nice.

bobnik added the enhancement label Jan 25, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Draw-Your-Own-Pattern Functionality #308

Draw-Your-Own-Pattern Functionality #308

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Draw-Your-Own-Pattern Functionality #308

Draw-Your-Own-Pattern Functionality #308

Comments

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!