I tried various formulas and chose one.
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.
#desmoshttps://t.co/ZCcOCyOWxl
— ntsutae (@ntsutae) January 12, 2021
f(x,y)=sin(x^2-y^2) {-4<x<4}{-4<y<4}
g(x,y)=cos(2xy)
x0=f(x,y)
y0=g(x,y)
x1=f(x0,y0)
y1=g(x0,y0)
x2=f(x1,y1)
y2=g(x1,y1)
x2*y2>=0 pic.twitter.com/MB2zpwVYgY
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.
Very interesting stuff! Thanks! I am very glad to have found your blog.
I'm so glad to hear that! Thank you! 🙂
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! :)
My email is pimpslice94@protonmail.com if that makes it easier for us to communicate, cheers!
Hi! Thank you for your interest. My code is open source and free to use under GPL3. Please feel free to use it. 🙂