portfolio

Hitomezashi Stitch Patterns in HTML Canvas

2022-01-26T00:00:00+00:00

The other day I came across the concept of Hitomezashi stitch patterns from a Numberphile video on the subject. Before the video was over, I realized I had to code that up and see for myself how the probability for a point starting on/off would influence the pattern.

The implementation below has a fixed probability of 0.5 for column starting on, and 0.75 for a row starting on.

(click on the pattern above - after the flood fill completes)

Note: flood fill has been artificially slowed down for dramatic effect.

Seems that the more that the probability diverges from 0.5, the more individual squares emerge.

Next steps for things to experiment with:

✅ Add flodding and attempt to imperically convince myself that the assumption stated in the video is correct - namely, that it will always take two colors to fill the board.
What are all of the individual patterns that can be made?
How does symmetry about both axes influence the pattern?
What patterns emerge when every point starts off, and only every n point starts on (for different values of n).
Finally, for the ultimate time sink: initialize Conway’s Game of Life boards with Hitomezashi pattern.

Flooding algorithm

Since I have not yet done any research on efficient flooding algorithms (I’m not exaclty sure if this is the correct term), I’m posting my research here to simplify the upcoming writeup on how it works.

The initial objective is simple: given the above grid (or a subsection of it, as shown below), color an entire white section until it hits a wall.

After being able to flood a single section, the goal is to fill every other section (no two adjacent section must have the same color).

The pixel data for the patch above can be found here. That file is formatted like the JavaScript ImageData. That is, within the payload, the attribute $.data represents

…a one-dimensional array containing the data in the RGBA order, with integer values between 0 and 255 (inclusive).

Update

Turns out a flood fill algorithm is pretty simple. My current implementation is pretty naive: it uses a recursion (with memoization to avoid processing the same pixel multiple times). The issue is that each iteration calls up to four other recursions, so if the path to be filled is big, it’ll throw a Maximum Call Stack Size Exceeded exception. The way I’m getting around that for now is by using setTimeout(recursion, 0). This gets me through the night, but clearly not ideal.

Next iteration: use the backtracking algorithm so there won’t be any recursion involved.

Genetic Algorithm Example

2020-01-03T00:00:00+00:00

In this toy demonstration of genetic algorithms, the algorithm learns some arbitrary 2D function. The “chromosome” is represented by a sequence of pairs. By rendering the first point at some location, we can render the next point in the sequence by computing the coordinates relative to that first point by using the distance and angle for the current gene.

My motivation for this demo was to apply what I’ve been learning about genetic algorithms (in the context of reinforcement learning and optimizing/training deep learning models), but in a slightly less contrived application as most demos I’m seeing online. Typically, folks will demonstrate how to learn a single value (such as the pixels that compose an image or a cardinal direction to navigate a maze). The following example has two variables (angle and distance) and a minor ordering dependency. That is, if the first gene is bad, the second (and all subsequent ones) will likely not perform well.

Fitness Function

The fitness function for the entire instance is the sum of the Euclidean distance of each corresponding point to the base function.

How it works

To render a 2D function in the canvas below and start the simulation, click the Start button below to use the default sine wave or draw a pattern using your mouse/finger/stylus directly on the canvas.

In the rendering below, you’ll see the base function in green, and dark red lines representing some of the instances of the population. The fainter/thicker the line, the worse is its fitness. The thinnest, darkest line represents the best instance.

R&D Backlog

2019-12-30T00:00:00+00:00

The purpose of my blog is to post unpolished, throwaway, R&D type stuff. The more in-depth discussions will generally be posted on Medium.com and the posts here will contain more interactive demos. Below is a growing list of things I’m curious to try out and research more, as well as new ideas I come across.

To do

Arxiv.org scraper
- Following Jeff Dean’s advice to read lots of paper abstract, I wrote a trivial API that queries arxiv.org and returns a list of abstracts for quick scanning. Now I need to post that code.
Genetic algorithms (done)
- I’m currently mostly curious about neuroevolution in general.

Machine Learning - Linear Classifier

2017-07-18T00:00:00+00:00

An interactive demo showing linear regression fitting a very separable dataset. This work was very early practice as I was learning the foundations of supervised learning.

About this post

As mentioned in other posts… last night (November 4, 2020) I was showing my 7 year old daughter what Twitter is. I decided to show her some of the weird stuff I’d posted over the years. One of the posts was a link to an old demo I had posted on an old version of this blog. I clicked on the link, only to realize I’d removed all my old blog posts not related to my current pursuit of AI and Machine Learning. My daughter told me that I “should never delete stuff, because then people would never know what I had to say or show them.”

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The original content

After building a linear regression model/trainer, the next natural step was to extend the JavaScript library to perform linear classification. Although making the library perform multi-class classification, this particular implementation only classifies between two classes.

Demo: Learning to classify two classes

This toy application is given random points throughout a two dimensional grid. A random line is selected to separate the points. Any points above the line are assigned a color, and points below the line are assigned a different color. The purpose of the algorithm is to learn which points belong to each class. After each learning iteration, the app classifies every point in the grid. The background color is pointed based on the class the algorithm classifies.

Implementation details

With this being my first attempt to implement a logistic regression model in JavaScript, I was surprised at how simple it really was to do. The training code consists of a few lines of code:

SigmoidClassifier.prototype.train = function (samples, labels, config = { learningRate: 0.05, epochs: 10 }) {
  const learningRate = config.learningRate;
  const maxEpochs = config.epochs;
  const M = samples.length;
  let epoch = 0;

  const lr = learningRate / M;
  const costFrac = -1 / M;

  while (epoch++ < maxEpochs) {
    const scores = samples.map(sample => this.score(sample));
    const errors = scores.map((score, i) => score - labels[i][0]);
    this.params = this.params.map((param, col) => {
      return param - lr * errors.reduce((acc, error, row) => (acc + error * samples[row][col]), 0);
    });
  }
};

In summary, the update for each weight is performed by simultaneously updating all weights as follows:

\[\theta_{j} := \theta_{j} - \alpha \sum^m_{i=1}(h_\theta(x^{(i)}) - y^{(i)})x^{(i)}_j\]

That is:

$\alpha$ is the learning rate
$h_\theta(x^{(i)})$ is the prediction for the ith sample
$y^{(i)}$ is the actual label for the ith sample
$\theta_{j}$ is the jth weight in the model

For completion, the score function is a simple sigmoid activator implemented as

SigmoidClassifier.prototype.score = function (inputs) {
  const sum = inputs.reduce((acc, input, i) => {
    return acc + input * this.params[i];
  }, 0);

  return 1 / (1 + Math.exp(-sum));
};

My next goal is now to write a simple neural network so I can perform the same classification concept, but with a non-linear data set.

Lessons learned

The main takeaway I got from this exercise was that the size of the input data is key. Concretely, I had features that ranged between 0-600 (the width in pixels of my grid). The problem this caused is that I’d get Infinity when computing the score of a few points at the upper end of that range. A simple solution is to simply scale those values down with something as simple as

\[x = x / M\]

Where $M$ is the highest (max) value of a given feature across the training set.

Machine Learning Painting with Linear Regression

2017-07-11T00:00:00+00:00

An interactive demo of using linear regression to minimize a function that “learns” what the values of a matrix of pixels should be so that it forms a photograph. This work was very early practice as I was learning the foundations of supervised learning.

About this post

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The original content

This is my first implementation of a machine learning algorithm in JavaScript. I think linear regression is an appropriate place to start, as the only thing required to get something going is to implement gradient descent. Although the code is not optimized for performance, it demonstrates the underlying concepts of minimizing a cost function in order to learn the parameters that best fit the training data.

Demo: Learning an input image

This toy application feeds the pixel data for some input image to a linear regression model, which eventually learns what RGB value corresponds with each pixel coordinate. A more technical explanation follows.

How linear regression “learns”

The first image in the demo above is used as the target that the algorithm is to learn. Since the goal is for the algorithm to learn every pixel in the image, I create a model with n + 1 weights, where n = width * height pixels in the input image, and the additional value acts as a bias value.

The training data consists the coordinate of each pixel, with the expected output as the hex value of the corresponding pixel. Since this is a linear model (as opposed to a neural network), I’m not sure how I can use two features (such as [x, y] values) and affect as many weights as I’d like. Thus, each training sample is a vector of length n with all zeros, and a one representing the pixel location in question.

// Suppose the target image is a 2x2 image
const trainingX = [
   [1, 0, 0, 0],
   [0, 1, 0, 0],
   [0, 0, 1, 0],
   [0, 0, 0, 1],
];

const trainingY = [
   [0xfff],
   [0xf00],
   [0x0f0],
   [0x00f],
];

In the example above, trainingX[0] refers to pixel [0, 0], which maps to the expected value trainingY[0], which happens to be a white color.

To keep things simple, I run gradient descent for a small amount of epochs, then use the model to redraw the image pixel by pixel. The process repeats until the cost function returns below some arbitrary threshold.

JavaScript implementation of linear regression

Checkout the entire source for this at https://github.com/formigone/machine-learning/blob/master/lin-reg/LinearRegressionModel.js. My purpose with that repository is to learn and experiment, and not to produce a high performance machine learning library.

The main class is LinearRegressionModel, which has a simple interface:

/**
 *
 * @param {Array>} samples List of samples
 * @param {Array>} labels List of vectors
 */
 LinearRegressionModel.prototype.train = function(samples, labels){};
 
 /**
  *
  * @param {Array} inputs
  */
 LinearRegressionModel.prototype.score = function(inputs){};

/**
 *
 * @returm {Array}
 */
LinearRegressionModel.prototype.getParams = function(){};

/**
 *
 * @param {Array} params
 */
LinearRegressionModel.prototype.setParams = function(params){};

To me the most exciting part about it is the implementation of the training algorithm, which I was pleasantly surprised with how simple it was to get right within 15 minutes. Ignoring some of the logging stuff in that method, the steps are:

Add a constant input value of 1 to each sample (to reconcile the bias weight).
Score each sample using the current weights in the model.
Calculate the error for each sample (score - expected).
Create a new weights vector by updating each weight with weight[y] - learningRate * sum(errors[i], samples[i])

/**
 *
 * @param {Array>} samples List of samples
 * @param {Array>} labels List of vectors
 * @param {Object=} config - { learningRate, maxCost, epochs, logCost, logCallback }
 */
LinearRegressionModel.prototype.train = function (samples, labels, config) {
  var maxEpochs = config.epochs || 10;
  var epoch = 0;
  var maxCost = config.maxCost || 0.05;
  var learningRate = config.learningRate || 0.05;
  var logCost = config.logCost || 100;
  var logCallback = config.logCallback || function () {};
  var M = samples.length;

  var lr = learningRate / M;
  var costFrac = 1 / (2 * M);

  // Add zeroth bias input
  samples = samples.map(sample => [1].concat(sample));

  while (epoch++ < maxEpochs) {
    var scores = samples.map(sample => this.score(sample, true));

    if (logCost > 0 && epoch % logCost === 1) {
      var errorSquared = scores.reduce(function (acc, score, i) {
        var diff = score - labels[i][0];
        return acc + diff * diff;
      }, 0);
      var cost = costFrac * errorSquared;
      if (Number.isNaN(cost)) {
        throw new Error('Cost exploded');
      }

      if (cost < maxCost) {
        break;
      }

      logCallback({ model: this, cost, epoch });
    }

    var errors = scores.map((score, i) => score - labels[i][0]);
    this.params = this.params.map(function (param, col) {
      return param - lr * errors.reduce((acc, error, row) => {
          return acc + error * samples[row][col];
        }, 0);
    });
  }
};

My next goal is to implement stochastic gradient descent and see for myself what the trade-offs are. Next I plan on writing a simple neural network and try the same exercise. Finally, I will implement the same concept using TensorFlow and get more involved with it.

One question I’m trying to find a definitive answer to is: using linear regression, is it possible to input only two values (namely, [x, y]) and train the model to correctly output the value for all pixels colors of the image represented by the training data?

Maze Traversal with Breadth-first Search & Depth-first Search - Old Demo

2015-11-06T00:00:00+00:00

An interactive demo of using BFS and DFS to traverse a maze.

About this post

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The Demo

If I remember correctly, this demo came about during my YouTube tutorial making days. Something made me want to make a video tutorial explaining ways to traverse a map, so I wrote this demo as an illustration. I’ll forego the explanation of breadth-first search and depth-first search in this post. I will also not take the time to explain my code.

Code Formatter & Syntax Highlighter jQuery Plugin

2014-02-03T00:00:00+00:00

This is proof that I was one of the cool developers who not only used jQuery, but I was [on my way to becoming] a jQuery master.

About this post

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The original content

Today I decided to write a simple plugin to extend the functionality of everybody’s favorite Javascript library: jQuery. The entire process only took around 20 minutes, so I won’t be surprised if to find major bugs in it in the next few days. I did test the plug in a little bit, but I can’t promise buglessness in this version.

Code Formatter & Syntax Highlighter jQuery Plugin

All the plugin does is take source code that you write inside your HTML file, and format it with line numbers, and syntax highlighting. The highlighting part is styled through an external CSS file, which you can theme to your liking. Since I’m writing this in mid-December, I decided to style to resemble the Christmas season.

How it works

Using the plugin is pretty simple: Import jQuery, my plugin (which I decided to call Rokko Code, after the great Brazilian coder), and the accompanying style sheet (or a custom style sheet if you prefer).

The next step is to identify where in your HTML you want the plugin to be applied. In this example, I’ll write all my code inside a DIV tag with a class of “src_code”.

function Person(pName)
{
     this.name = pName;
     this.greet = function()
     {
          return 'Hello. My name is ' + this.name + '.';
     };
}

Right now, if you look at your file, you should see something like this:

function Person(pName){
    this.name = pName;
    this.greet = function(){
        return 'Hello. My name is ' + this.name + '.'
    ;}
;}

Pretty boring, since you haven’t called upon RokkoCode. So now the next step is to call the Rokko Code plugin on that DIV. If you have multiple elements that are matched in the jQuery expression, they will all be formatted.

And the final result after the call to $().rokkoCode() is this:

function Person(pName)
{
     this.name = pName;
     this.greet = function()
     {
          return 'Hello. My name is ' + this.name + '.';
     };
}

var me = new Person('Rodrigo');
alert( me.greet() );

Live Demo

~~View a demo of my RokkoCode jQuery Plugin.~~

Sadly, I was not able to find the HTML file I had with that plugin in action. Since the code for the plugin is still in my GitHub account, I will one day take the time to make an interactive demo page for it.

Source Code

Checkout my RokkoCode plugin and start formatting and highlighting any C, C++, C#, Java, Javascript, and PHP code in your HTML files today.

RokkoCode jQuery Plugin

Composite Design Pattern in PHP

2014-02-03T00:00:00+00:00

Yet another explanation of some design pattern. I’m posting this almost 7 years after I first wrote this. Hopefully it helps you on your homework or on that job interview you’re preparing for :)

About this post

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The original content

I just wanted to post a quick example of the composite design pattern, implemented in PHP. I don’t want to go into great depth about how the pattern works. In short, this pattern allows you to have a tree structure where each node can be either a leaf or a composite. A composite can itself have children, which can obviously only be either a leaf or other composites. When working with this tree, the client simply calls the operation on the tree, and the tree recursively calls the operation on each node. Here’s an illustration taken from The Code Project of how this pattern is set up:

Composite Design Pattern in PHP

Example in PHP

In this example, I’ll be implementing a simple command line application that takes an arbitrary number of arguments, all of which should be numbers. Then the application uses a composite to add up all the numbers together. Then, to spice things up, I set up a second composite that subtracts the same numbers. Finally, we add the composites together, and negate both operations. The important part being the fact that the client only deals with two structures, which, although they are both complex, they end up being treated as simple structures (numbers). Here is a UML that resembles my implementation, taken from SourceMaking

The Source Code

To run this code, invoke the script from the command line, and pass a few numbers as arguments. If you want to run this test on a browser, you’ll have to tweak the code a bit to grab the parameters from a different source other than from $argv.

composites = array();
  }

  public function add(AritheticComposite $composite) {
    array_push($this->composites, $composite);
  }

  public function doit() {
    $sum = 0;

    foreach ($this->composites as $num)
      $sum += $num->doit();

    return $sum;
  }
}


/*************************************
* What is intended to be an implementation
* of a leaf node. This will only hold a numeric
* value. Calling the DOIT operation will simply
* return the object's value.
*************************************/
class Number extends AritheticComposite {
  private $val;

  public function __construct($num) {
    $this->val = $num;
  }

  public function doit() {
    return $this->val;
  }
}


/*************************************
* Just adding order to the script
*************************************/
function main($args) {

  $plus = new PlusOperator();
  $minus = new PlusOperator();

  //
  // Add the arguments to each of the composites.
  // Since $minus represents substraction, we'll add the
  // negative of each argument to it
  foreach ($args as $key => $arg) {
    if ($key > 0) {
      $plus->add(new Number($arg));
      $minus->add(new Number(-$arg));
    }
  }

  echo "Sum      = ", $plus->doit();
  echo "\n";
  echo "Diff     = ", $minus->doit();
  echo "\n";


  //
  // Now the cool part: add a composite to another one.
  // If this works, the results should be zero.
  //
  $plus->add($minus);
  echo "Negation = ", $plus->doit();
}



//
// Make it so
//
main($argv);

A few sample executions of the above script are represented below:

> php composite_pattern.php 1 2 3 4 5
Sum      = 15
Diff     = -15
Negation = 0

> php composite_pattern.php 1 -1 2 -2 3
Sum      = 3
Diff     = -3
Negation = 0

> php composite_pattern.php 4 8 15 16 23 42
Sum      = 108
Diff     = -108
Negation = 0

HTML5 2D Game Programming Tutorial with GWT

2014-02-03T00:00:00+00:00

This is proof that I was one of the cool developers who grew up, graduated from jQuery, and stepped up their game using Google Web Toolkit (back when it was a Google project and the world was still purple and gray).

About this post

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The original content

Lately I’ve been playing around with GWT (Google Web Toolkit) and HTML5 game development. My first goal at this point is to get a 2D tile-based game working, and my first sub-goal for that is to be able to load a map on a 2D canvas context. So far, this is what I have:

HTML5 2D Game Programming Tutorial with GWT

The setup behind this is pretty simple: I first define a Tile object that keeps track of its own with, height, as well as its x and y coordinates within the world (or within the map). Each tile also has a background image. In order to avoid having a million different images laying around, I put all of the skins to be used for each tile in a single sprite sheet.

I found this sprite sheet by doing a Google image search for “nes super mario brothers sprite sheet”.

Then, once I had my Tile class set up, the next step was to make a map to represent the world. In other words, I declared an array of arrays (a 2d array), where each element in the array represents an element of the grid within which my world is displayed.

Notice how the two tiles highlighted above can be described by their x and y offset from the beginning of the map, plus their width. For example, the first tile is located at position (0, 0). Suppose the tile’s width and height are 16 pixels. That means that the next tile to the right is located at (16, 0), or (x + width, y + height). By this definition, setting up a map blue print is pretty easy. For example,

var mapBluePrint = [
    [0, 0, 0, 0, 0, 0],
    [0, 8, 8, 8, 8, 0],
    [0, 0, 0, 0, 0, 0],
];

Represents a small 3x6 world. The way I’m setting up my map using the 2D array is as follows: Each row uses two elements to describe what tile they represent from the sprite sheet. For example, if I have a sprite sheet that holds 9 tiles (a 3x3 grid), and I want a particular tile (instance of Tile) to draw the 2 block across, and first block down on my sprite sheet (block at position (1, 0) within the sprite sheet), then the map will have an entry […, 1, 0, …] wherever I want that block rendered.

Once that map is in place, transferring it over to a 2d array of Tile objects is pretty trivial. Each visit to an element in my map results in the creation of a Tile object, with the appropriate parameter passed in straight from my parsing loop and the map blue print.

Once that is in place, rendering the world is just a matter of visiting each Tile and drawing it to the canvas context. Below is some throw-away prototype code I wrote in vanilla Javascript just to get a taste of how to implement the ideas mentioned above. Next step is to model my tile objects with a bit more thinking, then take it over to Java and let GWT do its thing.

Other things I’ll need to do before my game receives the breath of life include the following:

Build a map maker utility to simplify things with creating maps
Load maps from the server as needed (asynchronously)
Write I/O engine (handle user input)
Write a simple animation engine for character animation and scene animation
Write collision detection and physics engine
Add sound effects and music to the game

The Code

Live Demo

PS: The following tiles are rendered inside an HTML5 canvas 2D.

HTML5 Canvas 2D Custom Shader

2013-11-05T00:00:00+00:00

An interactive demo showing what the Canvas 2D API could be like if WebGL specific features could be exposed to the user (so the user could use WebGL without Canvas 3D). Yes, I once thought this would be a good idea :)

About this post

That 7 year old wisdom was enough motivation for me to dig through my Github account and find the code for that and other demos, which is what you’ll find below.

The original content

Once upon a time, I was misguided enough that I wanted to write a game in JavaScript from scratch. Why bother learning a full-featured, stable game engine/framework, if I could just build everything myself?! As part of this journey (which “only” lasted about 6 months), I thought it’d be nice the HTML5 Canvas 2D API exposed a way to allow a client to control the rendering of the canvas via the very specific implementation of WebGL Shaders. This was all because I didn’t want to use WebGL because Canvas 2D was so much simpler.

In order to submit an official request to the Google Chrome developers to add this feature in Chrome, I created the following demo. The engineer from the Chrome team that looked at my request was super kind. He gave me his feedback on what I was trying to achieve. He presented some ideas that made my proposal more viable, and even showed me how to file that request with the committee that actually handles official HTML5 APIs.

Long story short, I moved on from my game development hobby, and all that there is left of that adventure is this demo.

The Demo

To be honest, I don’t remember all of the details about what I was actually proposing to the Google Chrome devs. Something about making it easier to do very low level custom rendering using the very general purpose Canvas 2D API. All I remember is that I was very excited about the visual effect of what I achieved by simulating what an extension to the Canvas API could look like.