SODER Project and Using SODER v.IV

Get Hep!	Cool Flavors	SODER	Drink up!

Stroke Order Diagram Editor-Retrographer (SODER) Volunteer Project

Last Document Update: July 26, 2007

Looking for kanji stroke order diagram downloads?

Warning: SODER v.IIIa and forward does not work properly with either the Macintosh Safari browser, or Firefox version 1.5 or later. This is because these browsers use interpolation to magnify images. These are the only browsers which use this method of magnification. We have tried in vain to have the Firefox development team restore the nearest neighbor image scaling for large magnifications used in earlier versions, but they are in love with interpolation and will not fix it any time soon. For that reason, these Macintosh browsers will not properly magnify the single frame 7X image. We will be writing a fix for browsers which use interpolation, but it will work slower than SODER on other browsers.

Current Tool Verison: Login: SODER v.IV

February 24, 2006: Version IV: biggest improvement is that you can now access all color and tool commands with your keyboard. Also added links to Jim Breen's pages with Jack Halpern's SODs to use as a guide for the new series of kanji assignments. Added key command 'U' for 'Undo' and 'J' for 'unJam'. About 900 SODs done at this time. The Smoothing Functions are mapped to the numerals of the standard QWERTY keyboard in "phone pad" manner, but for those using the extended keyboards, the numeral pad section is WYSIWYG to the image with 7-8-9 and 1-2-3 reversed... therefore the numbers 1, 2, 3, 7, 8, and 9 have different meanings depending on which numberals you are using. This is so that people with just standard keypads and laptops can use a mental image of a touch-tone phone pad, and extended keyboard users can use the layout of the keyboard keys.
Jan 10, 2006: Version IIIa1 made a simple display change to allow simpler lookup of stroke order using other electronic methods.
Dec 18, 2005: Version IIIa begins the process of moving SODER from an under-development tool, to a more mature application. The prototyping library has been replaced with the sub-routines explicitly called by soder.plx. The single frame image is now served by 1,483 byte script instead of the entire application. This should greatly reduce image failure and use of the "unJam" button by reducing demands on the server. The top image will be served separately when SODER has fully matured and has grown capable of handling 30 stroke characters. It currently can handle up to 20 stroke kanji.

2:00 AM Dec 16, 2005: Version III is born. No more selection box for tool and color picking. Everything is now icon driven. Retro-graphing is now clearly on or off depending on the color and tool combination (no more restore after white retro-graphs, but restore after black does not). Smoothing is no longer blocked if you happen to have the color set the same pixel being pushed. The Mirror variable no longer passed, and the Fill routine has been more reasonably governed and should crash the application less often.

Keyboard Command and Icon Image Tool Mappings

Key: P Row 1 Column 1: The Pixel Point Tool
Key: H Row 1 Column 2: The Horizontal Line Tool
Key: V Row 1 Column 3: The Vertical Line Tool
Key: F Row 2 Column 1: The Fill Routine
Key: \ Row 2 Column 2: The Top Left to Bottom Right Line Tool
Key: / Row 2 Column 3: The Bottom Left to Top Right Line Tool
Key: 1 Row 3 Column 1: The Smooth North-West Tool
Key: 2 Row 3 Column 2: The Smooth Up Tool
Key: 3 Row 3 Column 3: The Smooth North-East Tool
Key: 4 Row 4 Column 1: The Smooth Left Tool
Key: 5 Row 4 Column 2: The Grab Color Tool
Key: 6 Row 4 Column 3: The Smooth Right Tool
Key: 7 Row 5 Column 1: The Smooth South-West Tool
Key: 8 Row 5 Column 2: The Smooth Down Tool
Key: 9 Row 5 Column 3: The Smooth South-East Tool
Key: W Row 6-7 Column 1: The Color White
Key: S Row 6 Column 2: The Big Dot Tool
Key: D Row 6 Column 3: The Bigger Dot Tool
Key: O Row 7 Column 2: The Restore Color Tool (current frame only)
Key: M Row 7 Column 3: The Restore Color Tool (retro-graphed)
Key: R Row 8 Column 1: The Color Red
Key: B Row 8 Column 2: The Color Black
Key: G Row 8 Column 3: The Color Grey
Key: U The Undo Command
Key: J The unJam Command
Key: < Moves to the previous frame
Key: > Moves to the next frame

Dec 8, 2005: SODER v.IIc3 now has a "Copy Back" feature. Say for example you finish the SOD only to realize that you have the stroke order reversed between strokes 4 and 5. Pressing "Copy Back" will copy frame 5 over frame 4, allowing you to correct the mistake in both frames without having to rebuild a stroke pixel by pixel (the old way was combining smooth with restore ad nauseum).
Dec 8, 2005: A "U5" button will appear once you've taken about 5 or so editing actions on a new SOD. This gives you the option to "Undo" your last 5 changes instead of having to Undo them one at a time. Its also a lot less draconian than the "Erase All" option if you've made a larger mistake.
Nov 26, 2005: SODER v.IIc2 now displays The Kodansha Kanji Learner's Dictionary Indices as an additional source and stroke order authority.
Nov 6, 2005: Ice Mocha can now display SODs of up to 20 strokes. SODER Version IIc1 given green light to move past 10 stroke kanji.
Sep 17, 2005: Version IIc gives all SODER users the same Restore feature as the Editor. Restores pixels to initial grey color.
Sep 12, 2005: Version IIb1 addresses the need for a special kind of Undo when the app croaks from lack of RAM.
Aug 26, 2005: Version IIb released , requires an HTML4 complaint browser. No longer requires server contact for tool or color change. Tool and Color changes now performed offline.
Aug 26, 2005: You may now remain idle up to 3.5 days without loosing your kanji (up from 24 hours).
Aug 2, 2005: With the addition of the Grab Color tool we now have Version IIa and the ability to do much finer edge restoration.
Aug 1, 2005: SODER version II - Enlarges (8 X) and displays one single stroke at a time!
The first version of the tool allowed multiple users the ability to create Stroke Order Diagrams (SODs). Ice Mocha will display SODs of up to 10 strokes. All strokes are enlarged in SODER's display.

Scope of the Project

Produce a tri-color, multi-shaded SOD for each of the 6,353 kanji in JIS X 0208-1990.
Use each finished SOD as a template for the automated production of GIF89a format SOD animations (SODAs).
The Volunteer submits drawings for inclusion into the set of finished SODs.
The Editor reviews, corrects, and makes any changes to the drawing.
If the Editor approves of the SOD, it is immediately available to Ice Mocha users.
If the Editor rejects your submission, that kanji becomes immediately available to any volunteer to work on.
Upon completion of each set of 500 kanji, archives of the SODs and derivative SODAs will be released to the public.
- View the NEW License Agreement which covers the 1,513 file version of the archive.
- Download the first 1,513 publicly released SODs (PNG format images with EUC-JP encoded file names in tar.gz format).
- Download the first 1,513 publicly released SODs (PNG format images with Unicode encoded file names in tar.gz format).
- Download the first 1,513 publicly released SODs (PNG format images with EUC-JP hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODs (PNG format images with Unicode hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODs (PNG format images with JIS hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODs (PNG format images with Shift JIS hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODAs (GIF89a format animations with EUC-JP encoded file names in tar.gz format).
- Download the first 1,513 publicly released SODAs (GIF89a format animations with Unicode encoded file names in tar.gz format).
- Download the first 1,513 publicly released SODAs (GIF89a format animations with EUC-JP hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODAs (GIF89a format animations with Unicode hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODAs (GIF89a format animations with JIS hex code file names in tar.gz format).
- Download the first 1,513 publicly released SODAs (GIF89a format animations with Shift JIS hex code file names in tar.gz format).
EUC-JP is a multi-byte character encoding method popular on Linux, FreeBSD, and other Unix operating systems. Unicode (UTF8) is currently the only multi-byte encoding which the Macintosh OS X file system can work with as far as file names are concerned. Hex coded equivalents for any encoding are designed to work smoothly on any ASCII file handling system. JIS is the "Japan Information Standard", mostly seen in Japan. Shift-JIS is the encoding of Windows, and older Macintosh operating systems.
Each of these archives contains a License agreement called 'README-License', a Manifest of the kanji depicted by the images or animations, and 1,513 animation or image files. This is an enormous number of files for a Graphical User Interface, and it is suggested that you avoid looking at the contents with a GUI file system. Command line terminals have no problem with directories of this size.
The Perl Encode module was used to create a Unicode named version of the files, and testing on Macintosh indicates the conversion was a success. One caveat though for Mac users is that the decryption works perfectly from the command line using "gunzip -d file.tar.gz" and then "tar -xf file.tar", or alternatively both at once with the command "tar -zxfv file.tar.gz", (where file is sod-euc, sod-utf8, soda-euc, or soda-utf8), but the unicode file names are inexplicably mangled by Mac's GUI controlled "Stuffit Expander".
The License has changed! The main requirements of the License are to not conceal or remove the attribution from the diagrams and animations, and to put a link back to the License above.

SOD Style Guidelines

Diagrams will use a brush stroke font suitable for emulation with a brush pen.
Each stroke will be shown on the diagram in its own cell.
The current stroke in each cell will be black.
Previously drawn strokes are grey.
The start of the brush pen motion on each stroke is indicated by a small red or orange set of pixels.
The pixels of the SOD retain the pixel shading variation and complexity of the original font.
Each highlighted stroke shows no evidence of strokes which come later.

Technical

More advanced versions of SODER are being developed.
SODER v.IIc currently can handle SODs of up to 20 strokes. It must handle up to 30 strokes to complete the project.
SODER assigns the volunteer a kanji from a master list of priority characters that must be completed first.
The first 500+ diagrams are all referenced in A Guide to Reading & Writing Japanese 1st, 2nd, and 3rd editions, O'Neil's Essential Kanji, or in Kanji & Kana.
The application will copy the image into dashed lined boxes, as many times as there are strokes.
The original black shades are turned to grey shades.
Work begins by removing the last stroke from the next to last image of the kanji using the color white.
As you remove parts of the kanji one stroke at a time, a retro-graphing program deletes the same pixels from each copy of the image before it.
The "Grab Color" tool allows you to pick random colors to repair the edges of strokes after cutting away these pixels to show what the kanji looked like "before" that stroke.
A set of smoothing tools will help you push one pixel's color into the adjacent pixel.
At the end of this "chiseling" you will have a complete stroke order diagram in complex grey colors.
Switching to black, use the tools to isolate individual stokes and highlight the current one in the appropriate box.
The final steps will be to add a red tip to indicate the starting point of the stroke.
For a quick refresher on the stroke order rules, see Kanji Calligraphy Stroke Order Rules (Joyo96.org)
- Publish - If you have finished the drawing, you cannot receive a new kanji to work on until you have published the finished one. This will submit the drawing for further review, and if it meets the style guidelines, and is a correct rendering of the SOD, it will be available to anyone using Ice Mocha. If you notice a mistake after you Publish a kanji SOD, as long as you have not yet requested a new kanji you can still edit the image and publish it again. You last submission will overwrite any previous one.
- New Kanji - Only appears once you have Published a kanji. After you have published a SOD, please request a new kanji to work on. When you press this button, you will be told at the bottom of the page how many diagrams you have submitted for review. Once this button is pressed, you will not be able to publish any other editorial changes to the previous SOD.
- Retrographer - This is how SODER "mirrors" editing from later strokes to earlier ones. This feature is automatically turned on when you are using white or if you are using the "Grab Color" feature. White is the first color we work with to chisel away at and remove strokes from the diagrams. We start by removing the last stroke from the next-to-last image, and work backwards until only the first stroke remains in the first image.
- unJam - Sometimes the image is "broken" on its way from our server. unJam will just request the image again.
- The Magnified Image - We select a tool, and a color, click on the exact pixel of the magnified image that we wish to use the tool on.
- Erase All - This resets the image to the starting point... a series of all-grey images of the kanji. A "Redo All" button will appear if you use Erase All in case you have made a mistake.
- Undo - Will undo one previous operation executed on the diagram. There is a redo option that appears after using Undo in case you made a mistake.
- Tools
  - Pixel Point - Will change one pixel from its current color to the selected color. Will not work on white space in order to protect the pixel level integrity of the kanji being rendered.
  - Horizontal Line - This tool starts at the clicked on pixel and proceeds both left an right turning the pixels to the selected color. Will stop when the end of the original color is reached. Will not damage white space.
  - Vertical Line - Same as the above but works in the up and down directions.
  - NW to SE Line - Cuts a line toward both the upper left and the lower right.
  - SW to NE Line - Cuts a line toward both the lower left and the upper right.
  - Smooth Right - Will turn the pixel to the right of the one you click on the same color. Smooth is used to remove the darker shade in the grey area from where a removed stroke passed. Smoothing operations ignore the selected color.
  - Smooth Left - Will turn the pixel to the left of the one you click on the same color.
  - Smooth Up - Will turn the pixel above of the one you click on the same color.
  - Smooth Down - Will turn the pixel below the one you click on the same color.
  - Smooth NW - Will turn the pixel to the North West of the one you click on the same color.
  - Smooth NE - Will turn the pixel to the North East of the one you click on the same color.
  - Smooth SE - Will turn the pixel to the South East of the one you click on the same color.
  - Smooth SW - Will turn the pixel to the South West of the one you click on the same color.
  - Grab Color - Click on any pixel, and the color selector will load the ID of the color into the color selector. Please note that this color can only be used by the Pixel Point tool. This tool is essential for good edge rebuilding.
  - Big Dot - Will turn the pixel you click on to the selected color, as well as any of the 8 adjoining pixels if they are also the same initial color.
  - Bigger Dot - Will turn the pixel you click on to the selected color, as well as any of the 8 adjoining pixels, and any pixel adjoining those 8 if they are also the same initial color. This is the best tool to make the red mark at the start of each stroke.
  - Fill - This is an agressive fill routine that will turn the target color into the selected color and keep doing so as long as a pixel of the target color is adjacent.
- Color Selection - White for removing strokes from the diagram (automatic retrographing will turn on), black for strokes, red for highlighting the start of the stroke, and grey for repairing any overly-aggressive pixel painting. Color retrieved by the Grab Color tool will be listed by their ID number.
- Reference Indices in several textbooks if you are unsure of the proper stroke order.
Realtime Feedback on Your SOD Submission
SODER comes complete with online feedback. As you are working on the project, past submissions will be evaluated for errors, and you will be given images and text instructions for making better diagrams.

Realtime Feedback on Your SOD Submission