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?

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