just another web log

27 Apr 2014:
2048 investigations is now my first gihub project
Created my first Github project
Surprisingly easy thanks to my previous notes.
It is the same as the post below but with the code split into separate files for the different objects, there is even a handy examples.html file tying them all together.
27 Apr 2014:
flog failure post creation
I really should invest in making the f-log system allow page updates without needing to create a new post to push the changes.
27 Apr 2014:
jquery cdn to the rescue
Oops, put all my 2048 code on the last blog and then forgot to include the jQuery CDN.
http://jquery.com is the magic library that makes it easy to do browser based JavaScript.
27 Apr 2014:
2048 investigations seven ways to skin a tile

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.
26 Apr 2014:
Pirate Cinema gets a big thumbs up
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.
22 Apr 2014:
Umbraco database holds old media prisoner
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.
21 Apr 2014:
A list of jsfiddles 201404 with screen shots
Here are my jsFiddles as of 2014/04/21 as promised.

lightning v1
jsfiddle output
canvas test, no translate or rotation
Investigating the basic recursive nature of graphical branching

rotation test
jsfiddle output
canvas test
create pale grid
rotate and recreate grid from centre
Creates two grids, grey with no rotation and red at 15 degrees

rotation iteration test (spikey wheel)

canvas repeat rotation
Draw a number of spikes at different angles, non-interactive

js with the spikey wheel
jsfiddle output
canvas rotation test integrating JS
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
Where should a point be plotted if you have only the angle and the distance.

Lightning v2(veins)
jsfiddle output
canvas vein generation
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
Playing with gradients continuing alpha channels.

Radial gradient experiments
jsfiddle output
Very basic

jsfiddle output
alpha-ing out a section based on a lightness
Different compositing modes.

another composite
jsfiddle output
erasing with canvas, add a background
Trying to create a mask with compositing modes

Lightning v3 rotaions
jsfiddle output
canvas vein generation with rotation
Drawing branches in a more eyeball vein way.

Dual gradients
jsfiddle output
rotated dual gradients
A backup of old work done with thick lines with gradients and rotation.

Pretty circle animation
jsfiddle output
Rotating gradient lines
A backup of old work, draws the entire circle slowly with moire pattern.

Spikey Iris RED
jsfiddle output
early experiements
Using randomness and gradients to create an "iris" pattern

Morrie anim
jsfiddle output
lines build up (slowly)
Very slow, builds up on each rotation new moire patterns.

jsfiddle output
main branch
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

html5canvasiris early2
jsfiddle output
non eliptical highlights, as backup

html5canvasiris early3
jsfiddle output
refactoring, as backup
Showing scaling works with elliptical highlights

Mouse follow experiment
jsfiddle output
follow the mouse
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
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
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
When the distance restricted green spike moves away from the centre it is scaled.

html5canvaseyeball backup
jsfiddle output
backup of non animated eye

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
First experiments with canvas layering.

draw iris with rotation scale
jsfiddle output
redraw the iris as mouse is moved
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
Masking is obtained via the 'destination-in' compositing mode

Plotting a semi circle
jsfiddle output
create a plot describing a semi-circle.
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.
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.
Refactored to allow multiple eyeball creation.

eyeball colour change
jsfiddle output
on request/poke change iris colour and animate pupil dilation
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.
Lightening only on the highlights means they do not produce a 'dirty' smudge on the white eyeball when the iris is elsewhere.
20 Apr 2014:
jsfiddle is the answer to everything
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.
# jsfiddlebk.sh 20131101 Rob
# backup all the jsfiddles for a username.
# e.g. jsfiddle rob_on_earth
if [ -z $USERNAME ]; then
echo ":[USERNAME] not supplied, exiting"
exit 1
echo Backing up fiddles for $USERNAME
    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"

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.
20 Apr 2014:
Moving Umbraco at 1and1 for a better root experience
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.
loading results, please wait loading animateloading animateloading animate
[More tags]
rss feed



flog archives

This page is by me for me, if you are not me then please be aware of the following
I am not responsible for anything that works or does not work including files and pages made available at www.jumpstation.co.uk I am also not responsible for any information(or what you or others do with it) available at www.jumpstation.co.uk
In fact I'm not responsible for anything ever, so there!

[Pay4Foss banner long]