Marching Squares Javascript / Canvas implementation

March 31st, 2014

Screen captures of the Marching Squares Algorithm in action

A friendly guy called “Josh Grams” recently commented on my old Flash implementation of Marching Squares blog post , where he pointed out this excellent implementation of the Marching Squares Algorithm by Phill Spiess.

I promptly ported it to Javascript for use with Html5 Canvas and put it up on Github https://github.com/sakri/MarchingSquaresJS

Here’s a few of my codepen Canvas demos using Marching Squares:

A visualization of the algo as it executes

Text Edge Flare

Ghost text

He-Man text effect ;)

Enjoy!

Talking Text Effects with Canvas at FITC Amsterdam 2014

January 22nd, 2014


Click image for a much cooler full size version.

After a 5 year break from speaking at conferences, I’ll be making my comeback at FITC Amsterdam on the 25th of February : http://fitc.ca/presentation/all-text-tricks-in-the-book-with-javascript-and-canvas/.

In the 2000′s I did several talks about text and text effects with Flash and AS3. Following the seeming demise of flash, I’ve taken many of the concepts, pushed them forward and translated them into Javascript/Canvas. During the 45 minute presentation, I’ll try to squeeze in plenty of ideas, techniques, approaches and topics for further inspiration/research.

Having spent the last years working on large applications, it’s been a real pleasure to write creative code again. With this talk I’ll get technical, but more importantly try to share the fun and inspiration.

You can run the canvas experiment (from the image above) here (for PC’s, the canvas may be too big for devices). (EDIT : It actually looks pretty cool on my Galaxy)

Also check out the photo set of my progress as I was working on it : http://imgur.com/a/O2PhG

See you there!

Spark Multiselect DropDownList

October 20th, 2011

I needed a DropDownList with multiselect capability and wasn't entirely impressed with Googles offerings. Wondering why the DropDownList doesn't support this in the first place (after all, DropDownListBase does extend List which has this feature), I discovered this intriguing comment in the source code:

Actionscript:
  1. override public function set allowMultipleSelection(value:Boolean):void
  2. {
  3. // Don't allow this value to be set. If the multiple
  4. // selection related properties are set and
  5. // allowMultipleSelection is false, List will
  6. // select the first item passed in.
  7. return;
  8. }

After a brief attempt at manipulating the original component, I got annoyed and wrote a simple one which full fills my needs.  I know, "No blog post for years and all we get is a lousy flex component?". Such is life. I'm sure the same code has been written a 100 times by others, but I thought I'd share it anyway.

Click for a demo

Right click the demo to view source.

Download MultiSelectDropDownList.mxml

In Your Own Words

February 13th, 2010

All along I was planning to do something with the circular wander that involved, surprise surprise, text. After seeing Neuroproductions beautiful Alice in Wonderland I snapped into action.

So, click the image below... You can punch in your (or another) Twitter handle, specify the number of "wanders", click GO and watch the twitter profile pic being drawn by the tweets of the profile pics proud owner. The default is 10 wanders, but 40 or 50 run smooth if you're impatient :D



So how did I get there? Like this. The following images are a random selection of people I follow on Twitter, rendered as I was progressing with the code.

I started off with just squares, which looked kind of nifty:


Here is @inspirit


@makc3d


My homie @theflashbum

I then moved on to text. I started off using regular TextField :

The mighty @wefail

While fun to watch, the text was practically unreadable, so I increased the font size and added a GlowFilter to create a fake stroke:

Here's a full size detail, the text was too big (tough to recognize the image), but damn, the black text with white stroke all piled up like that looks hott!

I had some difficulty with the spacing of the text, so I moved on to the TextEngine instead of TextFields... immediately I ran into some bugs...


My old friend @sjespers

Totally unreadable, but kewl :D

I then got the text engine code working:


The ever inspiring @quasimondo

The problem with having a white or black stroke, is that in dark (or light) areas, the text is once again totally unreadable.

So I figured I would alternate the stroke color. If red<128 && green<128 && blue<128, I set the stroke to white, otherwise it's black:


Rock on @derschmale

The last adjustment was to set the alpha of the glowfilter to .3 . I was happy enough with that result to call it a day and blog :)


The guy I keep somehow not catching at conferences @flashaddict

Update:

I added a "save image" feature to the demo. I used the inbuilt JPGEncoder, so it's slow, I know there are faster alternatives, but no time ;)


Click here for the demo:

Update2:

I thought it would be fun to have a gradient in the characters instead of a solid color. Instead of grabbing the pixel which corresponds to the center of the new character, I grab one from the "top center" and "bottom center" of the new character. The result isn't necessarily more "recognizeable", but looks nice. I also added a couple more controls : font size, background color and font. That's right, you can now render your image with Comic Sans! Rejoice!


A designer from work with a colorful profile pic @farfields

Some Stats About the Irritating Puzzle

January 19th, 2010

I submitted my Irritating Puzzle blog post on reddit yesterday. (link to comments)

Quite confident the submission would just sink into oblivion as usual, I went over to our neighbors for some dinner.

A few hours, and to my surprise 9121 visits later, my blog was replaced with an austere, and rather embarassing 403 forbidden message.

WordPress is quite the resource hog... I'm attempting to install WP Super Cache for the unlikely recurrence. Anyway, the stats I did get during those glorious hours were interesting/funny.

At the time of writing, the submission has 103 up votes 55 down votes. I would have assumed that would add up to maybe, oh, 300 clicks. Infact, every Reddit vote represents nearly 100 clicks.

I record events using the AS3 Google Analytics API, 41,314 of them to be exact.

  • The reset button was smacked 30,973 times
  • The show solution buttons were clicked 9,211 times
  • The average user hung around for 05:06 minutes
  • The puzzle was solved 103 times

How about those enticing Google ads to the right? Grab a hold of your chair.... 1 click! I'm RICH!!!!

I included an event which fires on every "move" which is a multiple of 100.

I felt pretty crap about my 700+ solution, but it's good to know I'm not alone. Infact:

  • 141 people attempted solutions with more than 800 moves...
  • 27 did more than 1500...
  • 15 over 2000
  • 2 people moved those pieces over 4200 times

And the Grand master of patience / self irritation / epic suffering, moved the pieces over 5500 times!!! . Dang!

The solutions to this game are available with the manual that comes with the game, so it's well possible that some people just followed that. Nevertheless,

  • The best solution was 48 moves, second 54 then 114. The first two didn't submit their solutions, so might be coming from one of those guys that scour the web for flash games on which they can use their 1337 Charles skills on.
  • 22 people solved it with less than 200
  • 5 with between 1000 and 2000

and finally.... that poor son of a bitch who moved pieces over 5000 in one go?

HE SOLVED IT!!!

WITH 5516 MOVES!

Hat's off to you ;)