I am fascinated by these outstanding animations by Hungarian artist:
I so much want to developed something in this style - does anybody know what would be a possible approach for creating that sort of images?
1 Like
Impressive art; thanks for posting. I can’t supply source code, but that looks like an animated toroid to me.
Reference to conceptually get you started:https://forum.processing.org/one/topic/move-elements-along-the-ellipse-path.html
This is only one of his works;
see plenty of his wonderful loops here:
and here:
It’s fascinating work. If you want to do something similar you need to write some code and start experimenting. Processing is pretty good at something like this. A torus is basically a circle drawn in an elliptical path as shown in the following rudimentary example (meant only to get you started):
int x;
final int ellipseW = 200;
final int ellipseH = 100;
void setup() {
size(600, 600, P3D);
lights();
}
void draw() {
translate(width/2, height/2); // move origin to center
circle(sin(radians(x))*ellipseW, cos(radians(x))*ellipseH, 150);
x++;
}
Might have to use a toroid object with texture and an app like Blender for animation.
This particular one is most likely a shader. Here’s a random example from shadertoy doing something similar: https://www.shadertoy.com/view/MsX3Wj
1 Like
Looks promising. Do you know how to port to Processing? I get this error:
Cannot find a class or type named “vec2”
I tried import com.jogamp.opengl.;*
Shaders are glsl code, not Processing/Java code. You have to load them into a PShader and render them as or onto geometry. Everything on shadertoy uses a fragment shader and so is rendered onto a full-screen quad (or using filter() which renders a full-screen quad).
PShader torusShader;
void setup() {
size( 720, 720, P2D );
torusShader = new PShader( this, vertSrc, fragSrc );
}
void draw() {
torusShader.set( "iTime", 1.0*frameCount/60 );
noStroke();
shader( torusShader );
rect( 0, 0, width, height );
resetShader();
}
String[] vertSrc = { """
#version 330
uniform mat4 transformMatrix;
in vec4 position;
void main() {
gl_Position = transformMatrix * position;
}
""" };
String[] fragSrc = { """
#version 330
precision highp float;
precision highp int;
uniform vec2 resolution;
uniform float iTime;
out vec4 fragColor;
//Thank you iquilez for some of the primitive distance functions!
const float PI = 3.14159265358979323846264;
const int MAX_PRIMARY_RAY_STEPS = 64; //decrease this number if it runs slow on your computer
vec2 rotate2d(vec2 v, float a) {
return vec2(v.x * cos(a) - v.y * sin(a), v.y * cos(a) + v.x * sin(a));
}
float sdTorus( vec3 p, vec2 t ) {
vec2 q = vec2(length(p.xz)-t.x,p.y);
return length(q)-t.y;
}
float distanceField(vec3 p) {
return -sdTorus(p, vec2(4.0, 3.0));
}
vec3 castRay(vec3 pos, vec3 dir, float treshold) {
for (int i = 0; i < MAX_PRIMARY_RAY_STEPS; i++) {
float dist = distanceField(pos);
pos += dist * dir;
}
return pos;
}
void main()
{
vec2 screenPos = (gl_FragCoord.xy / resolution.xy) * 2.0 - 1.0;
vec3 cameraPos = vec3(0.0, 0.0, -3.8);
vec3 cameraDir = vec3(0.0, 0.0, 0.5);
vec3 planeU = vec3(1.0, 0.0, 0.0) * 0.8;
vec3 planeV = vec3(0.0, resolution.y / resolution.x * 1.0, 0.0);
vec3 rayDir = normalize(cameraDir + screenPos.x * planeU + screenPos.y * planeV);
vec3 rayPos = castRay(cameraPos, rayDir, 0.01);
float majorAngle = atan(rayPos.z, rayPos.x);
float minorAngle = atan(rayPos.y, length(rayPos.xz) - 4.0);
float edge = mod(8.0 * (minorAngle + majorAngle + iTime) / PI, 1.0);
float color = edge < 0.7 ? smoothstep(edge, edge+0.03, 0.5) : 1.0-smoothstep(edge, edge+0.03, 0.96);
fragColor = vec4(vec3(color),1.);
}
"""};
1 Like
Thanks for the conversion and explanation.
I made a small version of a Torus that you can deform.
It’s P3D
It’s essentially a 2D grid of the quads that make the
torus.
You can change thickness of the torus for a specific angle.
For this thickness of the torus I use a cos() function that shrinks and expands its thickness .
Sketch comes with lights(), peasyCam and avoids clipping.
here is the main tab - not runable of course
// shows a 3D Torus
// imports
import peasy.*;
// --------------------------------------------------------------------
// objects and vars
// cam
PeasyCam camera;
// Tool class for PVectors
ToolsPVector toolsPVector = new ToolsPVector();
// Main data Structure is a 2D Grid that holds Vertex of the Torus (inside the class).
ToolsGrid3D toolsGrid3D = new ToolsGrid3D();
// angle
float angleForRotationInDraw=0;
// declare listPVwithAngle which holds all pvs and angles of the main circle of the torus
ArrayList<PVwithAngle> listPVwithAngle = new ArrayList();
// --------------------------------------------------------------------
void setup() {
size(1300, 990, P3D);
// avoid Clipping of image at camera
avoidClipping();
// make listPVwithAngle
initList(listPVwithAngle);
} // func setup()
void draw() {
background(111); // gray
lights();
// use listPVwithAngle
toolsGrid3D.makeTorus(listPVwithAngle); // THE CORE
// draw floor
CheckeredFloor();
// rotate torus and display torus
rotateX(angleForRotationInDraw += 0.012);
toolsGrid3D.display(); // THE CORE
} // func draw()
//
Here are 2 examples (essentially same code)
1 Like
