flog

I seem to have a problem, shiny things are very VERY distracti.. *Oh! Squirrel* ..ng. Take, for instance the eyeball stuff, that's good stuff that I *DO* want to finish. But instead I got distracted by 2048.

Its a simple but strangely addictive game. Use the arrow keys WASD or swipe to take a turn, either moving everything Up, Down, Left or Right. All the tiles on the board try and shift in that direction, if two tiles have the same value then they combine. So if a line of tiles was2,2,8,8 and you shifted left the line would result in 4,8,0,0. There are 16 tiles in a four by four grid. Each turn results in the creation of a random tile, nine out of ten times this will be a "2" but every now and then you get a "4". The object of the game is to continue playing until a "2048" tile has been created. This would have required



   2 +    2 =    4

   4 +    4 =    8

   8 +    8 =   16

  16 +   16 =   32

  32 +   32 =   64

  64 +   64 =  128

 128 +  128 =  256

 256 +  256 =  512

 512 +  512 = 1024

1024 + 1024 = 2048

and that is at the very least. Any coders will have noticed this is 2 to the power of n, like binary.

After a couple of goes I got bored and the following day during lunch I hatched a simple plan to recreate the game in JavaScript during my lunch hour. There would be no user interaction the game would play itself, I wanted to see how easy it was to get to the legendary "2048" tile. The key thing here was it was just a quick lunch time project, after eating time that would be about 40mins. I soon realised that 40mins was not going to be enough time and I reckon that version one took about 3hrs over 5 sessions and two days.

Once again jsfiddle allowed me to work at home and during lunch without having to set anything up or arrange backups and transfers. Once this has post has been published I expect to add it to github.

So what are you seeing below?
There are seven games each using a different strategy to play. Clicking a "run" button will execute that strategy 5 times, keeping a note of the highest title reached and the longest number of turns.

"Score: Cumulative": Tries each direction Up, Down, Left, Right and adds the values of each tile together with the number of moves and then times that with the number combinations that were made. This is the *best* strategy and will often result in a "512" tile.

"Score: Moves": Same as "Score: Cumulative" but has no weighting on the number of combinations, instead number of moves is what is rewarded. I had this strategy in version one for most of the time, until I realised that combinations should be rewarded higher than number of moves.

"Score: Combinations": Similar to the "Score: Moves" except it ignores number of moves completely and rewards number of combinations.

"Score: Tile Total": Ignores all the weighting of combinations and moves and just counts the resulting total of all the tile values added together.

"Random": Simply plays a random direction each turn and does surprisingly badly. Nearly always getting "64".

"Sequence: Clockwise": Ignores any scores or weighting, just uses "Up", followed by "Right", "Down", "Left" repeatedly. Plays "dumb", usually gets much higher that "Random".

"Sequence: Counter-clockwise": As with "Sequence: Clockwise" but uses the sequence "Up", "Left", "Down", "Right". Again, does better than "Random".

You can use the "Pause" button to halt an automated run and the either continue it with "run" or use "next" to step through. "slow" and "fast" change the delay between each automated turn. At the end of a game there is a three second pause before the new one starts.

So it was tempting to add user interaction to allow you to play the game but I recommend you play "2024" from http://gabrielecirulli.github.io/2048/ and I will get on with my eyeballs.

Finished reading Pirate Cinema from Cory Doctorow which I picked up in a Humble Bundle a while ago. I read it as an ebook on my Moto G phone.

Just like his other works I really enjoyed this one! It is almost a fictional representation of the Content book that details the miss-use copyright and DRM.
The story is set in England and mostly London, with plenty of landmarks that could easily be recognised and were used to great affect. Without it just being a name dropping exercise. Based in the not distance future, they talk about slow computers that are faster than today's and laser hats that zap mosquitoes. The focus is on the punishment of internet blocking for minor content related crimes and how it affects not only the perpetrator but everyone in the family.

I strongly recommend them both.

So I tracked down what was up with the Umbraco installation after I reinstalled the application to the root of the web site.

The Umbraco database has stored the old physical path against the media items. So, visit site/media/100/image.jpg and the database look up returns oldinstall/media/100/image.jpg even though /media/100/image.jpg exists.

This is actually quite annoying. I have to either keep the old media folder around, update the database or re-upload all the media items, in the process getting new ids and having to reassign all the media references.

I would like to take the "Update Database" option but, 1and1 do not have a online SQL execution tool. Nor can you connect with SQL Management studio (security) and I have heard that you cannot import from a database that has been edited outside their platform. So the only option is to write a custom ASP.NET page that runs the required SQL.

Tempting but, I may just let this lay and ignore it.

Here are my jsFiddles as of 2014/04/21 as promised.

lightning v1
jsfiddle output

canvas test, no translate or rotation
http://jsfiddle.net/rob_on_earth/fYJvT/
Investigating the basic recursive nature of graphical branching

rotation test
jsfiddle output

canvas test
create pale grid
rotate and recreate grid from centre
http://jsfiddle.net/rob_on_earth/GRQkm/
Creates two grids, grey with no rotation and red at 15 degrees

rotation iteration test (spikey wheel)

canvas repeat rotation
http://jsfiddle.net/rob_on_earth/6nAHT/
Draw a number of spikes at different angles, non-interactive

js with the spikey wheel
jsfiddle output

canvas rotation test integrating JS
http://jsfiddle.net/rob_on_earth/gGZMA/
Draws the number of spikes and the rotation based on mouse movement, reports various data points.

Point projection
jsfiddle output

canvas test, single point to a line with only an angle and a length
http://jsfiddle.net/rob_on_earth/8hQcE/
Where should a point be plotted if you have only the angle and the distance.

Lightning v2(veins)
jsfiddle output

canvas vein generation
http://jsfiddle.net/kyEuX/
A more complex look at the recursive nature of graphical branching, lots logged to the console, allowing all sorts of algorithm tweaking.

Radial fade
jsfiddle output

radial gradient creates the illusion of alpha mask
http://jsfiddle.net/rob_on_earth/uezZ2/
Playing with gradients continuing alpha channels.

Radial gradient experiments
jsfiddle output

http://jsfiddle.net/rob_on_earth/5pwrD/
Very basic

Compositing
jsfiddle output

alpha-ing out a section based on a lightness
http://jsfiddle.net/rob_on_earth/6GhnY/
Different compositing modes.

another composite
jsfiddle output

erasing with canvas, add a background
http://jsfiddle.net/rob_on_earth/JBCCP/
Trying to create a mask with compositing modes

Lightning v3 rotaions
jsfiddle output

canvas vein generation with rotation
http://jsfiddle.net/rob_on_earth/H8b2Y/
Drawing branches in a more eyeball vein way.

Dual gradients
jsfiddle output

rotated dual gradients
http://jsfiddle.net/rob_on_earth/F63UY/
A backup of old work done with thick lines with gradients and rotation.

Pretty circle animation
jsfiddle output

Rotating gradient lines
http://jsfiddle.net/rob_on_earth/LutFf/
A backup of old work, draws the entire circle slowly with moire pattern.

Spikey Iris RED
jsfiddle output

early experiements
http://jsfiddle.net/rob_on_earth/sJt58/
Using randomness and gradients to create an "iris" pattern

Morrie anim
jsfiddle output

lines build up (slowly)
http://jsfiddle.net/rob_on_earth/W6X6P/
Very slow, builds up on each rotation new moire patterns.

html5canvaseyeball
jsfiddle output

main branch
http://jsfiddle.net/rob_on_earth/7rQyy/
All working branches end up here.
The eye at the top is the offscreen buffer(on screen) and the other two eyes follow the mouse, one has markers rendered.

html5canvasiris early
jsfiddle output

basic no highlights, as backup
http://jsfiddle.net/rob_on_earth/9rk5m/

html5canvasiris early2
jsfiddle output

non eliptical highlights, as backup
http://jsfiddle.net/rob_on_earth/DDaBt/

html5canvasiris early3
jsfiddle output

refactoring, as backup
http://jsfiddle.net/rob_on_earth/gvycX/
Showing scaling works with elliptical highlights

Mouse follow experiment
jsfiddle output

follow the mouse
http://jsfiddle.net/rob_on_earth/qS5rk/
Spike is never redrawn, just all the data is output.

Mouse follow experiment fullscreen
jsfiddle output

follow the mouse fullscreen, because of jsfiddle frames this is not very obvious, but does work
http://jsfiddle.net/rob_on_earth/w628u/
Spike is redrawn and points to the mouse cursor.

Mouse follow move
jsfiddle output

move with restrictions follow the mouse fullscreen, because of jsfiddle frames this is not very obvious, but does work
http://jsfiddle.net/rob_on_earth/2gP56/
The red spike rotates around the centre, while the green one can move from the centre to 50% of the diameter of the area, while also pointing to the mouse.

scaling based on distance from centre
jsfiddle output

limit scaling based on distance from center
http://jsfiddle.net/rob_on_earth/47PrR/
When the distance restricted green spike moves away from the centre it is scaled.

html5canvaseyeball backup
jsfiddle output

backup of non animated eye
http://jsfiddle.net/rob_on_earth/4gEnn/

canvas copy pixels
jsfiddle output

copied from the eyeball main branch. Attempts to draw the iris onto a separate canvas and then copy that data back with new rotation and scale
http://jsfiddle.net/rob_on_earth/w4FW3/
First experiments with canvas layering.

draw iris with rotation scale
jsfiddle output

redraw the iris as mouse is moved
http://jsfiddle.net/rob_on_earth/84b6N/
Iris is scaled and moved to follow the mouse. Linear/flat scaling is used.

vein masking

draw longer veins that are masked and moved with the iris
http://jsfiddle.net/rob_on_earth/5F9jk/
Masking is obtained via the 'destination-in' compositing mode

Plotting a semi circle
jsfiddle output

create a plot describing a semi-circle.
http://jsfiddle.net/rob_on_earth/BLASN/
Understanding how to use math to plot a semi circle, rather than just draw one.

semi circle plot 1.0 address space
jsfiddle output

create a plot describing a semi-circle.
http://jsfiddle.net/rob_on_earth/7b2bx/
Instead of using pixel values, plot using a simple 0.0 - 1.0 address space.

eye packaging
jsfiddle output

all about creating self contained package.
http://jsfiddle.net/rob_on_earth/UEH48/
Refactored to allow multiple eyeball creation.

eyeball colour change
jsfiddle output

on request/poke change iris colour and animate pupil dilation
http://jsfiddle.net/rob_on_earth/j62YN/
Because the pupil is drawn dynamically it no longer appears in the offscreen layer at the top. Scaling still works, lots of customisable options added.

eyeball highlight lighten only
jsfiddle output

experiment with highlights and the lighten composite mode.
http://jsfiddle.net/rob_on_earth/AhXUC/
Lightening only on the highlights means they do not produce a 'dirty' smudge on the white eyeball when the iris is elsewhere.

jsFiddle.net is not a new site, it was launched in 2009. But I had only seen it used on Stackoverflow.com to illustrate simple JavaScript concepts.

I never thought I would end up using it. I have a specific aversion to cloud services, "what if they are not there tomorrow?", "what if I cannot connect to the internet?". To back this up, the Google Drive service went down after I started to use it in earnest on my new phone and the document I was working on could not be saved.

But I had a problem and jsFiddle.net did fit the bill. I am (usually) very time poor and the process of locating a JavaScript project setting up an environment, backing it up and actually working on it is so heavy that many projects fall by the wayside. By using jsFiddle.net I would simply open a web browser and start work! It is even version controlled. Only problem the backup ...

Bash and curl to the rescue.
This short script will download all the fiddles of the requested user name. Does not include all versions just the latest one.

#!/bin/bash

# jsfiddlebk.sh 20131101 Rob

# backup all the jsfiddles for a username.

# e.g. jsfiddle rob_on_earth

USERNAME=$1

if [ -z $USERNAME ]; then

  echo ":[USERNAME] not supplied, exiting"

  exit 1

fi

echo Backing up fiddles for $USERNAME

COUNT=0

HAVEFIDDLE=true

until ! $HAVEFIDDLE 

do

    FIDDLEINFO=`curl "http://jsfiddle.net/api/user/$USERNAME/demo/list.json?limit=1&start=$COUNT"`

    if echo $FIDDLEINFO | grep /$USERNAME/ ; then

    FIDDLE=`echo $FIDDLEINFO | sed -e "s/.*$USERNAME\/\([^\/]*\).*/\1/"`

        TITLE=`echo $FIDDLEINFO | sed -e "s/.*\"title\":\s\"\([^\"]*\).*/\1/"`

        BKDATE=$(date  +"%Y%m%d")

        curl "http://fiddle.jshell.net/$USERNAME/$FIDDLE/show/" -o "$(echo $FIDDLE)_$(echo $TITLE)_$(echo $BKDATE).html"

        echo $FIDDLEINFO>>"$(echo $FIDDLE)_$(echo $TITLE)_$(echo $BKDATE).html"

        echo Backed up by jsfiddlebk $BKDATE>>"$(echo $FIDDLE)_$(echo $TITLE)_$(echo $BKDATE).html"

        HAVEFIDDLE=true

    else

        HAVEFIDDLE=false

    fi 

    COUNT=$((COUNT+1))

done

Now I have adopted jsFiddle.net for all my web based JavaScript work especially canvas works.

In the next post I will list my fiddles to date and detail the project that most of it has been in aid of.

Continuing my fun with Umbraco on 1and1 I completed the base version of the website and we went live...

But immediately hit a problem, well a snag. Using the links in Umbraco showed the pages fine but visiting the root of the website still showed the 1and1 holding page.

All the links were inside the folder I had installed Umbraco into "umbraco6.1.6", makes sense really. Rang 1and1 only to find that this level of hosting does not allow you to change the website root :(

Fearing the worst I created a cheap full page frame set that loaded the new Umbraco homepage, looks fine to the naked eye, but Google would not be happy.

I used 1and1 to export the Umbraco database and set about backing up all my custom templates and images.

Then it was just a matter of using the 1and1 Webfiles app to unzip the Umbraco6.1.6.zip file again, but this time into the root.
Review my previous steps for setting up the web.config and re-entering all the database information.

Umbraco DOES NOT delete anything out of the database when you do a reinstall, so at the end all the hard work was un-touched, just needed to re-upload the media folder and the separate images and templates and everything was back where it would be.

Final set was to republish the site, perfect!

Uh, not quite, non of the uploaded images were working and if I tried to visit the file directly I got a web.config error that pointed to the old install location.
Which I had backed up so I just put it back up there.

I intend to investigate further why the old files/folders are needed but, for now all is well.

f-log

just another web log