Converting JS (DTwitter) code into Processing

Processing Coding Questions
1

Hi,

is it possible to convert this JS (Dtwitter) code into regular Processing code?

function u(t) {
T([0,0,c.width|=T=(A,i=0,z,p=S(t++)/3+.5)=>i++>12?x.strokeRect(...A):T(A=[...A],i,z=A[2+i%2]*=p,T(A,i),A[i%=2]+=z,A[2+i]=z/p-z),1080])
}

where

  u(t) is called 60 times per second.
  t: elapsed time in seconds.
  c: A 1920x1080 canvas.
  x: A 2D context for that canvas.
  S: Math.sin
  C: Math.cos
  T: Math.tan
  R: Generates rgba-strings, ex.: R(255, 255, 255, 0.5)

this is the original:
https://www.dwitter.net/d/23448

Thanks a lot!!

2

It should be possible. But that’d be a daunting task to pull out on Java/Processing syntax! :scream:

To help you get started I’ve indented & commented the code, so it’s slightly more readable: :eyeglasses:

function u(t) {
    T([
        0, // 1st elem
        0, // 2nd elem
        c.width |= // 3rd elem
            T = (A, i = 0, z, p = S(t++)/3 + .5) => // 4-param lambda
                i++ > 12 ?
                    x.strokeRect(...A) :
                    T(
                        A = [...A], // 1st param
                        i, // 2nd param
                        z = A[2 + i%2] *= p, // 3rd param
                        T(A, i), // 4th param (void)
                        A[i %= 2] += z, // ignored param
                        A[2 + i] = z/p - z // ignored param
                    ),
        1080 // 4th elem
    ])
}
2 Likes
3

You say so because of the lambda and three dots ... operators (rest parameters / spread operators)?

Would it be possible then to have this code running in p5.js somehow?

4

You can use the ... (varargs) in Java (But only in the function definition, not when you call it). Also Processing 4 (Java 17) provides Lambda.

5

So I’ve done this now and it definitely looks like something but not like the original sketch. So I must have made a mistake somewhere. If I can find it, I’ll send a new version.

void setup() {
  size(500, 500);
}

void draw() {
  background(255);
  
  noFill();
  stroke(0);
  strokeWeight(1);
  u(millis() / 1000f);
}

void T(float t, float[] A) {
  T(t, A, 0);
}
void T(float t, float[] A, int i) {
  t += 1;
  T(t, A, i, 0, sin(t)/3 + 0.5);
}
void T(float t, float[] A, int i, float z, float p) {
  i++;
  if(i > 12) {
    rect(A[0], A[1], A[2], A[3]);
  }else{
    float[] param1 = new float[A.length];
    arrayCopy(A, param1);
    
    int param2 = i;
    
    A[2 + i%2] *= p;
    z = A[2 + i%2];
    float param3 = z;
    
    T(t, A, i);
    
    i %= 2;
    A[i] += z;
    
    A[2 + i] = z/p - z;
    
    T(t,
      param1,
      param2,
      param3,
      0
    );
  }
}
void u(float t) {
    T(t, new float[]{
        0, // 1st elem
        0, // 2nd elem
        width, // 3th elem
        height // 4th elem
    });
}
1 Like
6

Thanks a lot!!! Now I can get into it better!

Some people there said it is based on binary trees. By that, can I expect that this recursion is supposed to produce only 0 or 2 child?

7

Finally I’ve hit the correct recipe I guess: :cook:

/**
 * Subdivision Waves [Java Mode] (v1.0.9)
 * mod by GoToLoop (2022/Dec/10)
 *
 * https://Dwitter.net/d/23448
 *
 * https://Discourse.Processing.org/t/
 * converting-js-dtwitter-code-into-processing/40083/7
 */

static final int ITERS = 12;
static final float STEP = .025;

float t;

void setup() {
  size(700, 400);
  background(-1);
}

void draw() {
  t = frameCount * STEP;
  T(0, 0, width, height);
}

void mousePressed() {
  looping ^= true;
}

void keyPressed() {
  mousePressed();
}

@SafeVarargs final void T(final float... A) {
  assert A.length >= 4: "Requires 4 values";
  T(A, 0);
}

void T(float[] A, int i) {
  ++t;

  if (i++ > ITERS) {
    rect(A[0], A[1], A[2], A[3]);
    return;
  }

  A = A.clone();

  final int
    ii = i % 2, 
    idx = ii + 2;

  final float
    p = sin(t)/3 + .5, 
    z = A[idx] *= p;

  T(A, i);

  A[ii] += z;
  A[idx] = z/p - z;

  T(A, i);
}
4 Likes
8

Converted it to Python Mode: :snake:

2 Likes
9

Thanks a lot, this is great!!!

1 Like