Drawing Pad with Undo


Simpler than the original version and v2 should draw faster. Still FTU

The first version created all the clones (used to record line coordinates and draw the line) when the project started so the "next" clone just needed to be "turned on" as you drew. But all the clones checked to see if they were the "next" one, so that caused lag. Instead, v2 just creates the clones as you draw.

Code that was in When :iphone:is Pressed is now in When Object is Cloned. Also I simplified the setting of X2/Y2. An additional benefit of this method (v2) is that you're not limited to a preset number of lines (Clones). It'll just keep drawing until you hit the 4096 object limit (but it does get slower as more clones/lines are added).

Original Post

It's a bit complicated, but FTU (maybe someone has a better method? But I couldn't find it)

The drawing pad itself is simplistic. Feel free to remix (or copy the code) and add all the features you prefer!

The basic premise of operation is that it records all the X & Y coordinates using a series of clones as you draw. Each clone has self properties for the starting & ending coordinates as well as a self property that tells each clone if it should draw it's lines during an Undo. When you press Undo (shake to undo, just like in Hopscotch) the entire image is redrawn except the last bit of the most recent line. You don't see the redraw because it happens all in one "step".

The only downside is you're limited to how much you can draw by how many clones there are. Also, the use of many clones currently makes the Hopscotch Player lag quite a bit, so I only used 600 clones. But you can change the Pen code to use more!

The idea here should theoretically also allow for layers & maybe even a zoom.

I'd enjoy any thoughts about how to do this differently :smiley:

(Tap to enlarge)

Additional explanation below

Nominations for Featured!
Nodundo Draw Pad Development

Okay, thats awesome.


If each clone has a different Speed variable when created, and a variable is increased each time a clone is made and the clones speed is that variable when created, could clones be made invisible when an arrow is tapped and the variable is reduced by 1 and the clones check if their speed is less than the variable?
This might remove the need to check a clones coordinates.
Unless you are using trails as well.


Hi @Stradyvarious
Yes, all the clones are indexed. And the current index or 'draw index' is kept in a global iPad variable, so it's easy to turn on the next clone as you continue to draw or turn off the previous one(s) as you use Undo. And, yes, the drawing uses trails just like a normal drawing pad.

could clones be made invisible when an arrow is tapped and the variable is reduced by 1 and the clones check if their [index] is less than the variable

This is a good observation. Yes, for the "Undo redraw", any clone with a self index less than the 'draw index' could redraw its line instead checking their self 'Draw: On' variable. But either way there's one conditional so the performance is the same, and as I was writing the code I hoped using the 'Draw: On' self variable would be more flexible.


This is so interesting. I never thought it'd be possible! This is simpler than I had suspected, too. The only problem in my mind is speed - I don't have access to Hopscotch anymore (I played the project through the web player), and the trail drew really slowly. Is it the app's speed or the indexing that makes it slow? I can't really tell from the web player, but maybe it's a combination of both?


There's a number of concurrent When :iphone:Is Pressed events, but only 2 Clones are actively participating in indexing. One sets it's X2,Y2 while another sets it's X1, Y1. After thinking about it a bit more, I think the problem (source of lag) is that all clones check their self indexes to see if they're the 2 that need to do something.

Hmmm, that gives me an idea :thinking: Maybe it'd be faster if the clones were created as they're needed (similar to how Spiral Draw works) rather than creating them in advance. Yes, I'm pretty sure that'll be less laggy. Let's give it a try and see!

This is exactly what I'd hoped for. Community questions, comments, & discussion that might lead to a better project :smiley: Thanks!


This is really cool! I also love the thumbnail you drew xD


Ironically I needed to use the Undo function quite a few times :laughing:


Yup, it's my pleasure! :)


Try v2 and let me know what you think. I changed the way it works and it should be much less laggy now.

I'll update the OP with a new link.


Will do. I'm on an iPad Air now (I was on a Samsung Galaxy S7 last time), so I guess I'll see if there's any other performance difference here. It shouldn't be that different, I'm pretty sure.

EDIT: the page isn't even loading for me. My internet is being super slow right now ;-; I'll try in an hour or so and see if it gets better.


Oh wow, this is much faster. My iPad allows shaking in the web player as well! This is great! :smiley:


Thanks for confirming it's faster :+1:


Yup, it works like a charm on my side. Definitely a major improvement from the last version!


Tagging those who liked the original post to let you know it's been updated with v2 which works even better :blush:




Cool! I'll take a look at it!
Edit: it looks really nice :wink:


This's really amazing!! I never really thought that it could be possible to make an undo button but you did it.


I've been thinking about this too, and i've started on it a couple of times but never finished.
Additional things that could be done is a selection tool, with scaling and rotating, or maybe a smudge tool


selection tool, with scaling and rotating

Hmm. Very interesting thought... Since each line corresponds to a non visible text object that holds its data, there's quite a few possibilities.

  • Lines or series of lines could be scaled or rotated (as you said)
  • The colors & widths of drawn lines could be changed
  • End point locations of line segments could be adjusted (with adjacent lines "rubber banding" to stay connected
  • Lines could have various layer controls
  • Zoom & pan could be implemented
  • A series of line segments could have a smoothing function applied
  • Custom "stamps" could be created

Though I wounder how much those types of features would be used in a Hopscotch drawing pad?

smudge tool

Also an interesting idea! I can easily conceptualize how to implement all the above ideas, but I'm not sure about this one. I can see how one would do this in more advanced programming languages where more sophisticated image processing techniques could be used, but in Hopscotch... I'm not sue. What are your thoughts on how a smudge tool might work?


It would just move the lines rather than making them blur out (which is pretty impossible in Hopscotch.)