[TW5] Etch-A-Sketch Demo to illustrate drawing of SVG paths

134 views
Skip to first unread message

c pa

unread,
Feb 1, 2017, 2:33:03 PM2/1/17
to TiddlyWiki
I've created an Etch-A-Sketch Demo to illustrate drawing of SVG paths

http://cpashow.tiddlyspot.com/#Etch-A-Sketch

Fun. Not a plug-in or anything. Required that I create a couple custom string manipulation javascript macro commands to allow the manipulation of the path elements.

Mat

unread,
Feb 2, 2017, 5:12:22 PM2/2/17
to TiddlyWiki
Thanx for sharing c pa ! lnteresting!

A possibly more useful variant, that still seems very close to what you've made, might be a kind of stamping thing where one stamps several element onto one another. Then there could be a palette of simple elements so that the user can create complex ones or icons for buttons in TW. (house = triangle + square).
Just an idea.

<:-)

c pa

unread,
Feb 3, 2017, 1:39:29 PM2/3/17
to TiddlyWiki
Mat,

The Etch-A-Sketch has the capability to do that. It works like this:

  1. All of the stamps are held in the tiddler [[SVG Bumps]]
    1. Right now there are only bumps for directions and various curves
    2. Each bump has a name
    3. Each bump has a relative path instruction string
      1. lower case letters used so the drawing has to come from the end point of the last line segment
  2. The number of elements of the each "bump" (its length) is held in the tiddler [[SVG Bump Lengths]]
    1. This is used so you can erase a bump from the end of the path
    2. e.g.: an "up-right-curve" is "a 5 5 0 1 1 5 5" so a length of 8
  3. There's a couple of other tiddlers [[SVG Bumps Directions]] and [[SVG Directions Enables]] that I'm pretty sure I don't use any more because it was too complex to store and manage that information

Reply all
Reply to author
Forward
0 new messages