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;
  }
  
  return toReturn;
}

function inCircle(cx, cy, x, y, r){
  return (cx-x)**2 + (cy-y)**2 < r**2 ? 1 : 0
}

JavaScript is like C in many ways and while not the main purpose of LearnCGames.com, websites like this are an inspiration to games creators. My other interest is C# and I’m currently learning about Blazor a technology that lets you create webpages in C# using WebAssembly so it’s quite possible that things like this could be done in Blazor.

But it’s fun to look at the different example functions and you can also download the images as gifs via a link at the bottom of the page,