Show HN: MirrorDraw – A small project to draw on a canvas(mirrordraw.herokuapp.com)
mirrordraw.herokuapp.com
Show HN: MirrorDraw – A small project to draw on a canvas
http://mirrordraw.herokuapp.com/
12 comments
I'll take a shot at your line width question. When you are dragging across the canvas slowly, you get sent an event for every pixel the mouse touches, and your code is drawing a 20px wide line between each new point. If the pixel is down from the last pixel, it will draw a 1px by 20px horizontal line. If it's the to right it will draw a 1x20px vertical line, because it's just trying to connect the last point to the new point. If the next mouse event happens to be perfectly diagonal from the last, it will draw a 20px wide line that's diagonal. Since the mouse is moving pixel by pixel, if you drag it diagonally, it's path will basically randomly be one of these three movements, so you get a mixture of vertical, horizontal, and diagonal lines. Notice that if you move the mouse quickly enough, you don't get an event for every pixel along the path (since the resolution of the mouse's motion isn't high enough), and it will draw a clean 20px line between each detected point.
What I would do to handle this is when you are drawing fat lines, draw a 20px diameter filled circle at the beginning point, then the line to the ending point, then a 20px diameter circle at the end point. This will give you strokes with rounded ends. Another possible improvement along this lines is that you could paint a circle when someone first clicks on the canvas rather than only when they move the mouse.
What I would do to handle this is when you are drawing fat lines, draw a 20px diameter filled circle at the beginning point, then the line to the ending point, then a 20px diameter circle at the end point. This will give you strokes with rounded ends. Another possible improvement along this lines is that you could paint a circle when someone first clicks on the canvas rather than only when they move the mouse.
I think "Show HN" was the right decision. If it was "Ask HN" I would
have not looked at it. It's also nice to see you made the source code
available too. I haven't looked at the code yet, but it's good to know
its out there.
I tested the app with an older version of chrome (24) and it worked well. Drawing and downloading was successful, although my supposed "artistic" skills are more than a bit embarrassing. I saw no errors when opening the downloaded file in gimp. I liked how you used a transparent background in the image --this violated the principle-of-least surprise due to the white background of the website, but at least for me it was a pleasant surprise.
Lastly, two possible suggested improvements, well three actually. (1) Allow background color to be set on resulting image (i.e. no surprises). (2) Enable sharing the image as a link of some sort, or via social media, or something like that. (3) Auto-detect viewport size and size the new image/canvas accordingly.
I tested the app with an older version of chrome (24) and it worked well. Drawing and downloading was successful, although my supposed "artistic" skills are more than a bit embarrassing. I saw no errors when opening the downloaded file in gimp. I liked how you used a transparent background in the image --this violated the principle-of-least surprise due to the white background of the website, but at least for me it was a pleasant surprise.
Lastly, two possible suggested improvements, well three actually. (1) Allow background color to be set on resulting image (i.e. no surprises). (2) Enable sharing the image as a link of some sort, or via social media, or something like that. (3) Auto-detect viewport size and size the new image/canvas accordingly.
The first few lines are drawn really slowly over here... after a couple of lines, they appear instantly. Weird behavior, is this intended?
No, it's not intentional. I have seen it but it is variable. On one computer it never happens and on another it happens like you said and on another it's always slow.
The way this works is that I add points to an array while dragging. There is a loop that adds a point and draws a line to the last point. I think that interval of drawing is what slows it down but that is just what I felt like it had to be.
The way this works is that I add points to an array while dragging. There is a loop that adds a point and draws a line to the last point. I think that interval of drawing is what slows it down but that is just what I felt like it had to be.
It's a fun toy to play with!
One thing I would improve: When drawing on the left half and moving to the right half without releasing the mouse, the drawing stops. I would expect the drawing to continue on the right canvas, while mirroring back to the left canvas, and vice-versa.
Maybe it's a browser specific, I'm on Chrome 38.0.2125.122, OSX 10.10.
One thing I would improve: When drawing on the left half and moving to the right half without releasing the mouse, the drawing stops. I would expect the drawing to continue on the right canvas, while mirroring back to the left canvas, and vice-versa.
Maybe it's a browser specific, I'm on Chrome 38.0.2125.122, OSX 10.10.
You are right. I had tried but never got it working. The problem was knowing when to stop one canvas and start the next (which is done with mousedown/mouseup or bounds right now).
This and the kaleidoscope are two things that could keep me busy.
This and the kaleidoscope are two things that could keep me busy.
Is there a reason to use two separate canvases? You won't have this problem if you had just one canvas.
When I started it was set up so that only the left canvas worked. I spent some time to make it work for both.
I could make it so that when drawing it reverses from the middle so that it was just one canvas. Well, I could try.
I could make it so that when drawing it reverses from the middle so that it was just one canvas. Well, I could try.
For the kaleidoscope, you might enjoy http://wry.me/hacking/kaleidopaint6.html
It only works with touch events, not mouse, so mouse support would make a nice next step.
It only works with touch events, not mouse, so mouse support would make a nice next step.
I think you can make it like Kaleidoscope
Writing chinese characters on it is an interesting experience...
This was a small project to learn to use canvas and Ruby on Rails better. It isn't an ongoing project but I would like to keep learning and get feedback on what I can improve on. Especially where I am doing something wrong in the javascript or completely against how I should be using RoR.
Source: https://github.com/Rhebel/MirrorDrawing
edit: I have a huge question for anybody who knows a solution. I don't know how to search for this properly. In the console you can adjust the line width manually; MD.PX = 20
Draw something after doing that and things are strange. I think it's because the line doesn't know which direction it should go between points so it seems to be pretty random. I had an idea that adding points would help but I don't know and I'd love to figure that out.