In answer to an email I received, yes I do write all of the blog entries, tutorials and curate the collections on here. This will be blog #365 published since Feb 29th 2020.  You can see links to all posts by moving your mouse over the About Me in the top menu.

The odd looking graphic is a thing that is running on GitHub called Skyline. It shows a 3D city like model generated from your GitHub commits.  Mine for 2020 is this which you can zoom in and rotate, all with your mouse.  Just change the link to point to your account home page on GitHub. I think it’s quite neat and perfect timing for my first anniversary.

The slab I guess is a timeline from left to right and shows a visualisation of your commits by time period to different repositories. I have no doubts there are far more cluttered and complex skylines than mine!

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,