### Interesting Visualisation – like tixy.land

If you remember tixy.land that I mentioned back in November last year, here is another website that lets you control a visualisation. In this case, tileflip.xyz lets you create a single function and applies it to every square on a board. You can control how many squares the board has and how often they are updated through a pair of sliders. You can pause the animation and toggle squares by clicking on them in the mouse. One of the early examples runs Conway’s Life and has a really short function.

The functions can be quite complicated (it’s JavaScript) as this example shows which moves a ball around the screen while changing colours.

The ctx (short for context) object has various properties and functions that you can call on it. For example ctx.resolution is how many squares there are on the board and this page lists all the properties and functions.

``````function rule(ctx){

ctx.color = ctx.floatToColor(10/ctx.t)

let r = Math.min(ctx.t**2/10, ctx.resolution/4);
let cx = ctx.t*2%(2*ctx.resolution+1);
let cy = ctx.t*3%(2*ctx.resolution+1);

if(cx >= ctx.resolution+1){
cx = 2*ctx.resolution - cx;
}

if(cy >= ctx.resolution){
cy = 2*ctx.resolution - cy;
}

cx = cx/(ctx.resolution)*(ctx.resolution-2*r+1)
cx += r - 1;

cy = cy/(ctx.resolution)*(ctx.resolution-2*r+1)
cy += r - 1;

let toReturn = inCircle(cx, cy, ctx.x, ctx.y, r);

if(!toReturn){
ctx.color = 'black'
ctx.invert = true;
}