My Sketch

/*

​

Inspired by the Tixy land: https://tixy.land/

​

by Juan Carlos Ponce Campuzano

Date: 17/Jan/2024

​

Another version made with GeoGebra is available here:

​

https://www.geogebra.org/m/akcsa4cd

​

Stuff to do:

​

 - Refactor it! :)

 - Add index for each circle.

 - Change functions to see other patterns.

​

*/

​

let rows = 16;

let cols = 16;

let diameter = 30;

let t = 0;

​

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

  background(0); // Set background color to white

​

  for (let i = 0; i < rows; i++) {

    for (let j = 0; j < cols; j++) {

      let x = j * (width / cols) + diameter / 2;

      let y = i * (height / rows) + diameter / 2;

      let r = funRadius(funPattern(j, i, t));

      if (funPattern(j, i, t) < 0) fill('#3939ac');

      else fill('#fff');

      ellipse(x, y, r);

    }

  }

​

  t += 0.03;

  //console.log(t);

}

​

let funPattern = (x, y, t) => {

  x = x - 7.5;

  y = y - 7.5;

  return  0.2 * (sin((x+t)/2)/(1/2*sin(y))- pow(2, sin((x+t)/2)) - y);

}

​

let funRadius = (x) => (diameter * abs(2 / (1 + exp(-5 * x)) - 1));

​

let hypot = (x, y) => sqrt(x * x + y * y);

​

​

/*

​

let twoDArray = []; // To add later

let index = []; // To add later

let indexValue = 0; // To add later

​

function make2Darray(cols, rows) {

  var arr = new Array(cols);

  for (var i = 0; i < arr.length; i++) {

    arr[i] = new Array(rows);

  }

  return arr;

}

​

This is for later :P

function setup() {

  createCanvas(500, 500);

  background(0);

  ellipseMode(CENTER);

  stroke(1);

​

for (let i = 0; i < r; i++) {

    let Row = [];

    for (let j = 0; j < c; j++) {

        let val = i * c + j;

        Row.push(val < maxVal ? val : maxVal - 1); // Ensure values do not exceed 255

    }

    twoDArray.push(Row);

}

console.log(twoDArray);

}*/