I tried various formulas and chose one.

An example image from this animation.


Playing with the formulas.

It's a creative coding animation with simple logic.

I admired ntsutae (@ntsutae) san's work on 'desmos'. The formulas are very simple and the result is so beautiful! And I forked it to p5.js.

I tried various formulas and made an animation with the one. It was so fun to play around with it.







The 'Processing' code example.

This code does not display any images on the screen but generates image files in frames directory. Please feel free to use this example code under the terms of the GPL. To see other works based on my code is my pleasure. And my honor.


/**
 * Shine a Little Love.
 * Tried various formulas and chose one.
 * ref. https://twitter.com/ntsutae/status/1348865018452791296
 *
 * @author @deconbatch
 * @version 0.1
 * @license GPL Version 3 http://www.gnu.org/licenses/
 * Processing 3.5.3
 * 2021.01.13
 */

void setup() {
  size(720, 720);
  colorMode(HSB, 360.0, 100.0, 100.0, 100.0);
  rectMode(CENTER);
  smooth();
  noLoop();
}

void draw() {
  int   frmRate  = 24;
  int   frmCycle = frmRate * 3;       // morphing duration frames
  int   cycles   = 5;                 // animation cycle no
  int   frmMax   = frmCycle * cycles; // whole frames
  int   hW       = floor(width * 0.5);
  int   hH       = floor(height * 0.5);
  float hueBase  = random(360.0);

  translate(hW, hH);
  for(int cycle = 0; cycle < cycles; cycle++) {
    int div = floor(random(5, 10)) * 2;
    // ommit unsymmetrical 14
    if (div == 14) {
      div = 16;
    }
    float xRatio = random(0.02, 0.1);
    float yRatio = xRatio;
    hueBase += 360.0 / cycles;

    for(int frmCnt = 0; frmCnt < frmCycle; frmCnt++) {
      float frmRatio = map(frmCnt, 0, frmCycle, 0.0, 1.0);
      float easing = easeInOutCubic(frmRatio);

      // animate parameters
      float animX = 1.0 + frmRatio * 0.05 * div / 20.0;
      float animY = 0.01 + easing * 0.01 * div / 20.0;
    
      background(0.0, 0.0, 90.0, 100.0);
      stroke(0.0, 0.0, 90.0, 100.0);
      strokeWeight(1.0);
      for (int x = -hW; x < hW; x += div) {
        for (int y = -hH; y < hH; y += div) {
          float x0 = funcX(x * xRatio, y * yRatio, animX);
          float y0 = funcY(x * xRatio, y * yRatio, animY);
          float x1 = funcX(x0, y0, animX);
          float y1 = funcY(x0, y0, animY);
          float x2 = funcX(x1, y1, animX);
          float y2 = funcY(x1, y1, animY);

          float rHue = abs(hueBase + 360.0 + (x1 + y1) * 120.0) % 360.0;
          if (x2 * y2 >= 0) {
            fill(rHue, 60.0, 70.0, 100.0);
            rect(x, y, div, div);
          }
        }
      }  
      casing();
      saveFrame("frames/" + String.format("%04d", cycle) + ".01." + String.format("%04d", frmCnt) + ".png");
    }
    // for stop motion frames
    for (int i = 0; i < frmRate; i++) {
      saveFrame("frames/" + String.format("%04d", cycle) + ".02." + String.format("%04d", i) + ".png");
    }
  }
  exit();
}

/**
 * funcX : shape calculate function.
 */
private float funcX(float _a, float _b, float _c) {
  return sin(_a * _a - _b * _b) * cos(_a * _b * 2.0 * _c);
}

/**
 * funcY : shape calculate function.
 */
private float funcY(float _a, float _b, float _c) {
  return log(width + _a + pow(sin(_b), 2)) * _c;
}

/**
 * easeInOutCubic : easing function.
 */
private float easeInOutCubic(float _t) {
  _t *= 2.0;
  if (_t < 1.0) {
    return pow(_t, 3) / 2.0;
  }
  _t -= 2.0;
  return (pow(_t, 3) + 2.0) / 2.0;
}

/**
 * casing : draw fancy casing
 */
private void casing() {
  fill(0.0, 0.0, 0.0, 0.0);
  strokeWeight(54.0);
  stroke(0.0, 0.0, 50.0, 100.0);
  rect(0.0, 0.0, width, height);
  strokeWeight(50.0);
  stroke(0.0, 0.0, 100.0, 100.0);
  rect(0.0, 0.0, width, height);
  noStroke();
  noFill();
  noStroke();
}


/*
Copyright (C) 2021- deconbatch

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>
*/

 

 

Yet another example images.

An example image from this animation.

An example image from this animation.

 

 

Next Post Previous Post
5 Comments
  • Toby
    Toby Thursday, January 21, 2021

    Very interesting stuff! Thanks! I am very glad to have found your blog.

    • deconbatch
      deconbatch Saturday, February 06, 2021

      I'm so glad to hear that! Thank you! 🙂

  • armpit
    armpit Sunday, January 24, 2021

    Hey deconbatch, over at bioartbot.org we want to integrate this tile generating code into our grid so that we can generate designs that then get printed.

    This is our current setup: https://github.com/cclrobotics/ARTBot/blob/master/web/static/js/model.js

    Any ideas on how to integrate this in?

    Thanks! :)

    • armpit
      armpit Sunday, January 24, 2021

      My email is pimpslice94@protonmail.com if that makes it easier for us to communicate, cheers!

    • deconbatch
      deconbatch Saturday, February 06, 2021

      Hi! Thank you for your interest. My code is open source and free to use under GPL3. Please feel free to use it. 🙂

Add Comment
comment url