3 ms·

I wasn't sure if this would have been better as an Ask HN. This was a small project to learn to use canvas and Ruby on Rails better. It isn't an ongoing projec

by hfsktr 12y ago

I wasn't sure if this would have been better as an Ask HN. 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 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.

jcr 12y ago
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.
bjterry 12y ago
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.

by hfsktr 12y ago

jcr 12y ago

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.

bjterry 12y ago

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.