# Code source of famous David Szakaly art works?

**URL:** <https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097>\
**Category:** Project Guidance\
**Created:** [March 14, 2024, 11:12pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097 "2024-03-14T23:12:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![KDorohov](https://avatars.discourse-cdn.com/v4/letter/k/8dc957/32.png) [@KDorohov](https://discourse.processing.org/u/KDorohov)\
**Post date:** [March 14, 2024, 11:12pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/1 "2024-03-14T23:12:48Z")

</div>

I am fascinated by these outstanding animations by Hungarian artist:

> **[davidope | i want you magazine](http://www.iwantyoumagazine.com/davidope/)**
>
> davidope (David Szakaly) is a Hungarian/German graphic designer, living with his dachshund in a suburb of Budapest. http://www.davidope.com/ This series is

![thumbs_100612](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/1/0100c979f941688b9fb95b03c000faad70e2055a.gif)

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?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [March 15, 2024, 12:51am UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/2 "2024-03-15T00:51:14Z")

</div>

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](https://forum.processing.org/one/topic/move-elements-along-the-ellipse-path.html)

---

<div class="post-metadata">

**Author:** ![KDorohov](https://avatars.discourse-cdn.com/v4/letter/k/8dc957/32.png) [@KDorohov](https://discourse.processing.org/u/KDorohov)\
**Post date:** [March 15, 2024, 4:16am UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/3 "2024-03-15T04:16:09Z")

</div>

This is only one of his works;  
see plenty of his wonderful loops here:

> **[davidope (@dvdp) • Instagram photos and videos](https://www.instagram.com/dvdp/?img_index=1)**
>
> 72K Followers, 2,801 Following, 1,034 Posts - See Instagram photos and videos from davidope (@dvdp)

and here:

> **[Mind-boggling Animated Gifs from David Szakaly](https://www.webfx.com/blog/web-design/mind-boggling-animated-gifs-david-szakaly/)**
>
> Animated Gifs are a growing trend, and they are here to stay. Check here David Szakaly’s mind-boggling animated Gifs.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [March 15, 2024, 5:50am UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/4 "2024-03-15T05:50:23Z")

</div>

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):

```auto
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.

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [March 15, 2024, 2:15pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/5 "2024-03-15T14:15:49Z")

</div>

This particular one is most likely a shader. Here’s a random example from shadertoy doing something similar: [https://www.shadertoy.com/view/MsX3Wj](https://www.shadertoy.com/view/MsX3Wj)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [March 15, 2024, 3:15pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/6 "2024-03-15T15:15:36Z")

</div>

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._;\*

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [March 15, 2024, 4:35pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/7 "2024-03-15T16:35:44Z")

</div>

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).

```auto
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.);
}
"""};

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [March 15, 2024, 4:57pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/8 "2024-03-15T16:57:10Z")

</div>

Thanks for the conversion and explanation.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 15, 2024, 5:09pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/9 "2024-03-15T17:09:10Z")

</div>

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

```auto

// 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)

 ![c1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/6/e6134cec3466d036e559d4a263671f2aa16faf5c.jpeg)

* * *

 ![Clipboard02aa](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/a/8a8b68a07b43f5afd7e91ff842b87c8ca245ff80.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 15, 2024, 5:15pm UTC](https://discourse.processing.org/t/code-source-of-famous-david-szakaly-art-works/44097/10 "2024-03-15T17:15:15Z")

</div>

you can change the properties with the mouse

 ![Clipboard02rfger](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/9/39c56b0f6a8b7ab05ba1feec724a1026f91ece16.jpeg)