The marvellous Bubble Universe graphical animation

I pleaded with Paul Dunn to find the original, and he obliged. The source of the algorithm is this: https://twitter.com/yuruyurau/status/1226846058728177665
Someone might want to approach the author and ask how it came about.

3 Likes

It looks like you’ve replaced it with 2π, while Gordon replaced it with the golden ratio, which could explain Ed’s observation that the activity is noticeably different. Gordon’s version is fiercely quick by any measure. :saluting_face:

1 Like

Ah. I’m not sure why I picked that - I suspect I just searched for a page of numbers and copy/pasted the wrong one. Putting

tau = 6.2831853072

in does make a more “denser” pattern but it’s essentially the same.

The maths in these demos is somewhat abstract- and I wonder how many iterations the original author went through before they stumbled on a nice pattern…

I wrote RTB to be fast - my aim was faster than PHP which wasn’t hard. I did a few lightweight tests with Pauls SpecBas though and I suspect he has the edge on similar hardware, but hindsight has taught me a few tricks I might apply to it when I get the time + energy. However running on a new-ish Intel i7 vs. a 200Mhz ARM does have many advantages…

-Gordon

2 Likes

Oh, that’s much clearer — thanks!

It’s written in Processing’s Python Mode, and when reformatted is quite pretty:

# bubble universe original, Processing 4 / Python mode
# https://twitter.com/yuruyurau/status/1226846058728177665
# 2020-02-10

W = 540
N = 200
x, y, t = 0, 0, 0


def setup():
    size(W, W)
    noStroke()


def draw():
    global t
    clear()
    [F(i, j) for i in range(N) for j in range(N)]
    t += 0.1


def F(i, c):
    global x, y
    r = TAU / N
    u = sin(i + y) + sin(r * i + x)
    v = cos(i + y) + cos(r * i + x)
    x = u + t
    y = v
    fill(i, c, 99)
    circle(u * N / 2 + W / 2, y * N / 2 + W / 2, 2)

For me, Processing is a contemporary equivalent 8-bit BASIC. I know many artists who create amazing things in Processing, yet would never consider themselves programmers.

For those who haven’t met the Processing paradigm before, it’s a little like a graphical awk. The setup clause is run once (like awk’s BEGIN), then the draw clause is run repeatedly forever. draw typically draws a frame, at 60 fps or as fast as your machine can handle it. When the Raspberry Pi first came out, I was getting around 1 fps from the soft-float Java system for that board …

(As for my comment about τ: I know what it is, but don’t know why it is. Multiplying a fundamental irrational constant by two because you stan radius over diameter seems a little futile.)

2 Likes

I’ve seen initiatives for a general introduction of TAU in the past. According to those, the general idea is about all those formulas containing 2π as a reoccurring pattern or particle and that it should be more expressive to have a dedicated atom for a full rotation. (There seem to be even “extremists”, arguing that π should be rather TAU/2. :slight_smile: Maybe, this is even more concise, as TAU versus 2π will be always a matter of interpretation.)
(I’d personally argue that π is just a Rosetta stone for translating the round and the square.)

I think I can just leave this to Vi Hart.

1 Like

Excellent! Some nearby tweets have similarities - unfortunately we see the graphics but not the code.

But perhaps see here where Cliff Pickover is credited with the attractors. And some code here on p5 (titled Nova, annotated “Dentro del donut, una nova recurrente.”)

let AS,BS,NS,t=0;
function setup(){
  createCanvas(400,400);
  noStroke();
  AS=createSlider(0,3,1.7,0.1).position(20,20);
  BS=createSlider(0,3,0.4,0.1).position(20,50);
  NS=createSlider(20,90,60).position(20,height-40);
}
function draw(x=y=0){
  background(0);
  [A,B,N]=slider(AS,BS,NS);
  translate(width/2,height/2);
  for(i=0;i<N/3;i++){
    for(j=0;j<N;j++){
      [a,b,c]=[i*A,i*B,x+t];
      x=sin(a+y)+sin(b+c);
      y=cos(a+y)+cos(b+c);
      fill(i*(c=255/N)*3,j*c,255);
      circle(x*60,y*60,2);
    }
  }
  t+=1/200;
}
slider=(...sl)=>{
  l=[];
  for(s of sl){
    v=s.value();
    text(v,s.x*2+s.width,s.y+15);
    l.push(v);
  }
  return l;
}

image

2 Likes

Counter argument: exp(iπ) = -1

1 Like

I did think of quoting Euler’s identity in support of PI rather than TAU, but having slept on it, I think it supports TAU. Because
exp(iτ)=exp(0)
expresses the same observation, but it shows explicitly the periodic nature - and the period - of the exp function when travelling in the imaginary direction, and that’s the fundamental observation about the link between e and pi. (No trig in sight! No circles!) See the most excellent exposition by Alon Amit at What is pi. From there, a visualisation of exp(z):
image

1 Like

Are the pixals square, like on the original vector equipment?

Vi addresses this in her video.

Neither well nor convincingly, though. The “we don’t define circles by diameter any more” argument isn’t even one.

Vector devices don’t really have the concept of pixel shape. If you’re really lucky, the beam will be round and crisply focused. This will give even line width on the phosphor, no matter what direction the line is drawn in.

Not all vector devices have nice imaging beams. The Stromberg-Carlson microfilm printers used by Hershey and others for early computer document production made dots and lines which might charitably be described as “grotty”: see figure 1 on p.38 of Calligraphy for Computers for the grainy details.

I suspect Ben was wondering if a circle drawn according to equal X and Y size will come out circular. For good old fashioned TVs, this aspect ratio is, I think, not well-controlled. For modern LCD displays, it is. It’s not difficult to scale the graphics according to the aspect ratio, I think.

I was musing on this. It seems relatively easy to define a circle as “the set of points all some chosen distance from some chosen point”. It seems less obvious how to do that with diameter - “for each point on the shape, all other points are at most some chosen distance, and exactly one is at that distance” might define a circle, but I’m not certain of it.

For this, the answer is “ideally yes”.
Mind that there is no direct correlation between pixels and display locations with X/Y displays. On the one hand, there are display locations as provided by a linear X and Y deflection, on the other hand, there are dot sizes in correlation with the amount of intensification. (So, if there are varying amounts of brightness, i.e. a Z axis, dot sizes will vary, as well.) In contrast to raster displays, where a pixel fills the space between intervals along the x-axis at row intervals provided by the sawtooth wave provided by the flyback, dot sizes are independent of the granularity of the axes and are often larger than the steps between discrete display locations. (Meaning, while at different display locations, dots may still overlap.)

So, as for “how circular?”, the answer is “as linear as your X and Y deflections”. Which should amount to “pretty circular”.

Not to wander this too far off field, but I meant the issue of Euler’s identity. Bringing that up is saying “I didn’t consult the source material.” :wink:

I think aspect ratio is the right term I wanted. After getting the X,Y points, you need to scale
by the aspect ratio. Do you have sound effects? The program needs to start with a bang. :slight_smile:

(We have wandered off topic a bit here… as someone with a mathematical background, I do find certain topics are strangely attractive, so I’ve joined in.)

1 Like

Wow!

I was rather aware such nice effects are possible mathematically ever since I browsed through some clever made pixel shaders. But this one really impressed me, also due to it’s implementation simplicity and size.

Funny thing is that I am working on the audio processor on my Continuum retro computer and for that to work I finished implementing floating point registers for it since I need a lot of floats for specific sound modulations. Probably one of the last major additions to the assembly architecture.

But this gave me the opportunity to test those registers right now. My implementation is not as pretty as the original, by far, and that’s most likely since I need to tweak the colors a bit and refine, but nevertheless, it works!

Thanks A LOT for this!
Are there more gems like this you guys know of? Or, how should I search for stuff like this?

P.S. It also reminds me of the good old days when I’d pick up some BASIC example from a book which looked like jiberish, typed it in and was surprised to see a lot of complexity in so few lines.

2 Likes

You could look around the oldest tweets by @yuruyurau, maybe, or look at the sketches posted on p5 by a_ who might be the same person. And then, much more retro, there are lots of unusual short graphical demos collected by BBC Micro Bot

Also some short type-ins for unattended Beebs collected here.

But the Bubble Universe is rather uniquely beautiful and complex for such a short program.

1 Like