Show HN: Minimator, a Minimalist Graphical Editor
minimator.appLoved the concept, makes drawing sooo easy even with a trackpad.
Some tips :-
1. When holding down shift allow straight lines only and no curves. It's the norm in design softwares
2. When I drag to create the line, the drop point if off and not accurate to the nearest dot of my mouse position. I'm unsure if it's a bug or have you deliberately built a non-accurate system.
Thanks for your kind words. About the trackpad I didn't manage to implement the pitch to zoom which is desperately missing.
1. That's a good point, I didn't implement this shortcut. In my head, I assumed it wouldn't be useful because the editor only let you do vertical lines, horizontal lines and circle quarter. So making a straight line is pretty easy. If it was pure freeform like on Illustrator, it would be vital. 2. Maybe it's related to the editor only letting you do vertical/horizontal/circle quarter, right?
Just in case you or anyone doesn’t know, pinch to zoom on touchpads is exposed as just scrolling with the control key held down. You can listen for it with the wheel event and look at the ctrlKey and deltaY properties.
I think shift is good while making a non-curved diagonal line.
I tried to make a diagonal without a curve and faced this issue.
Also, I personally find the accuracy important. I understand that it would add complexity to the vertical / horizontal / circle quarter system you've built.
But as a guy who draws, it feels like unnatural when it over-extends.
Either way good luck !
I like that it locks things to a grid. I wish I could draw horizontal lines and more complex curves. It's kinda weird that I can't connect any dot to any other dot. Definitely enforces a particular style though.
Congratulations on having a dependency free project [0]. (just typescript)
We got so used to read code using frameworks that pure JavaScript seems other world.
A similar tool: http://100r.co/site/dotgrid.html
Absolutely love small, simple tools like this that have one singular purpose and execute it with restraint.
very interesting "securityCheck": https://minimator.app/dist/services/features.js
Reminds me of dotgrid from 100rabbits http://100r.co/site/dotgrid.html
100rabbits looks way much better! This is very slick, thanks for sharing!
This is excellent.
Another commenter pointed it out, but it rang true for me; it is difficult to make an ugly drawing in this style. Very nice.
Love it! It does one thing, does it well, and it's hard to make an ugly drawing in this style :-) I'm not sure how useful it is in practice, but as a piece of computer art, it's great!
What a delightful tool. I can imagine having a lot of fun creating logos and icons with this.
This was very helpful. But I didn't understand the rules, so I thought it was broken when it kept showing me the same word.
I eventually figured it out by accidentally clicking the question mark (I am an avid interface clicker) and read the instructions...
The "pinch to change" is kinda bad, since.. mice. But the drawing itself is interesting, the constraints makes it a very enjoyable experience, but do try not to assume people are using a touch screen,.
Thanks, yes at first I was thinking of making it working on touch devices only. However, I'm a bit confused about your 'pinch to change' comment. If you want to zoom in/out you will have to use CTRL + [-/+]. Do you mind explaining a bit more? I feel like Im missing something here. Thx
Yes, it's the text on the bottom of the canvas when creating a new one, it says " Pinch to change dimensions" which is a bit confusing to someone using a mouse, and as far as I can tell, "zooming" with mwheel and control or +/- does something else (it zooms the page, which is not the same as "changing dimensions".
That said, I had a lot of fun with this, bookmarked :)
Oh yes right, this is very silly I know. It's only because changing the dimension values on touch screen is awful (need to focus on the input field then then tap the number). While on desktop, you can scroll on the input field to change it's value, which is more convenient.
Sadly, I made the "Pinch to change dimension" only on touch screen because it handle the pinch direction, so it can update x/y independently or together. While on desktop, the scroll would scale x/y together only.
However, glad you had fun with it :)
Hm, if I know the dimensions I want, then I find typing in the actual numbers far easier/more comfortable than the pinch gesture, as the latter is inaccurate and kind of uncooperative. I don't find typing on mobile “awful” at all.
Make it so you're presented a canvas right away and an option to give it a title and resize later. Excalidraw does this very well.
I thought that's what it was at first and tried drawing on it. Once I saw that wasn't the case I closed the tab. Not trying to be petty or anything but I just wanted to tell my real experience since I'm sure I'm not the only one. Naming things is one of the hardest things for me to do.
You are indeed not the only one.
Was this hijacking the browser's back button for anyone else? Not a fan of not being able to press back to go to the previous page. The site is neat though.
Oh sorry! I didn't realise I was hijacking it when the user was coming from another website (which I never tried during development). This is bad, I will fix it. Thanks for pointing it
Edit: Fixed and deployed!
This is super neat, thanks for making it. Two pieces of improvement:
1. Allow for diagonals straight lines 2. Allow for different line thickness
This is such a cool tool. Thank you very much.
I love these types of projects! Good job.
Is it just me or does it not work on iPhone? I try touching and dragging and long pressing but none worked :(
Wow, this is nice!
Is there a hotkey to toggle the eraser?
Sadly not, but should not be difficult to implement :)
Brilliant! Just, amazing. Well done.
Very nice, love it.