RoboSketch

I am trying to stay within the theme of a CHALKBOARD...

And having images just "appear" on the screen is out of character for a chalkboard.

I had this odd idea and tried it out.... It was easier than I had first thought, thanks to this post by one Jason Sturges regarding "live drawing". His post helped solve half of the puzzle. He gave a set of code (that I just cut-n-pasted into a mini project that I titled "MousePen") that allows one to draw with the mouse. It uses lineStyle and MoveTo (along with mouse events) to draw a lot of straight lines from point-to-point as the mouse moves. I made some modifications to that program.

(1) I added a trace command that displayed the line point coordinates, in the correct format, to the Console. Above you can see the trace command which will output a single set of coordinates that maybe looks something like "[101,234,102,236]"  Now I just run the program and draw with my mouse as it outputs all of the data points to the console.
(2) Problem is that I ended up with over a THOUSAND points for a single, simple diagram, because it drew a little line whenever the mouse moved AT ALL. So I added a DISTANCE check. At the very top of the code you can see that I make sure the distance between two points is greater than 4.5 pixels before it actually draws the segment of line. This greatly reduces the number of data points.

Then I just cut-n-paste all of the data points into a second program that I called RoboSketch.

This program uses a big array (called _drawingPoints) that I just paste my few hundred data points into. Then it runs with a timer to slow it down, drawing every line that was recorded, as before. With the delay it LOOKS like someone is sketching, live, as it recreated my pen strokes, in order. In the code above you can see the tail end of the array, then the sketchTimer, and the beginning of the updateTimeHandler event that re-draws the lines.

Here is an example of the ORIGINAL DRAWING on the left, and the RoboSketch drawing, on the right. (This will all make more sense once you see it in action... You have to imagine that the drawing on the right takes about 7 seconds to complete as it looks like someone is drawing it in the moment.)

 

UPDATE: The next day I tried to implement RoboSketch into my actual program. There were several problems, of which I solved many. I was able to create a really neat effect by measuring the time delay while the user picked up the "pen" so that I could accurately simulate the pen strokes when the pen was "in the air" between drawing objects. It worked great. However, when I inserted it into my actual program I found that the graphic method only seemed to work on a BLANK background. I could not get the drawing to go OVER the blackboard image. I believe I could somehow transfer a .bmp image of the blackboard to the background and then draw on top of that, however this is just WAYY too much work to go through for this one effect. I have decided to drop this idea and just go back to inserting .gif images over the blackboard and using them. Too bad. (I added more time at the bottom of this blog entry due to the extra hours "used up" today in this dead-end pursuit.)

 





Time: 4 hours