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.
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.
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'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.
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.
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.
12 comments
[ 2.6 ms ] story [ 46.5 ms ] threadThis 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.
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.
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.
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.
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.
This and the kaleidoscope are two things that could keep me busy.
I could make it so that when drawing it reverses from the middle so that it was just one canvas. Well, I could try.
It only works with touch events, not mouse, so mouse support would make a nice next step.