Hi everyone,

Among the various coding challenges I set for myself there's one at the top of my list that still remains obscure and rather complex to me: coding a 3d metaball.

Since I first saw Zack Lieberman's work on 3d blobs and metaballs I've been obssessed with them.

made by Zack Lieberman with OpenFrameworks

made by Satoshi Horii (Rhizomatics) probably with OpenFrameworks

made by Mike Walczyk with OpenFrameworks and rendered in TouchDesigner (? not sure)

made by Martin Meurin with Processing

I've read the wikipedia page, I know from other sources that it may involve Ray Marching shaders and Signed distance Functions but the problem is I haven't been able to find a source code, even a snippet, to work on. I'm relatively new to Processing and starting from scratch for this challenge seems really tough.

I would love to read your suggestions and advices. If you have any link to tutorials, step-by-step roadmaps or even code in Java, Python or even C++ I would really appreciate if you could share it here.

Thank you !

Possibly helpful: previous squarespace posts:

• https://forum.processing.org/two/search?Search=squarespace

Hi, I'm trying to add a processing sketch to my squarespace website but I can't manage to do it. I have also tried to convert it to p5 but also could not do it.

Here is the sketch:

int Nmax = 1000 ; float M = 50 ; float H = 0.99 ; float HH = 0.01 ;

float X[] = new float[Nmax+1] ; float Y[] = new float[Nmax+1] ; float Z[] = new float[Nmax+1] ; float V[] = new float[Nmax+1] ; float dV[] = new float[Nmax+1] ; float L ; float R = 2sqrt((4PI(200200)/Nmax)/(2*sqrt(3))) ; float Lmin ; int N ; int NN ; float KX ; float KY ; float KZ ; float KV ; float KdV ; int K ;

void setup(){ PFont font; font = createFont("Kenzo Regular.otf",120); textFont(font); size(600,600) ; background(0) ; noSmooth() ; stroke(255,255,255) ; fill(50,50,50) ;

for ( N = 0 ; N <= Nmax ; N++ ){ X[N] = random(-300,+300) ; Y[N] = random(-300,+300) ; Z[N] = random(-300,+300) ; } }

void draw(){

background(0) ; for ( N = 0 ; N <= Nmax ; N++ ){ for ( NN = N+1 ; NN <= Nmax ; NN++ ){ L = sqrt(((X[N]-X[NN])(X[N]-X[NN]))+((Y[N]-Y[NN])(Y[N]-Y[NN]))) ; L = sqrt(((Z[N]-Z[NN])(Z[N]-Z[NN]))+(LL)) ; if ( L < R ){ X[N] = X[N] - ((X[NN]-X[N])((R-L)/(2L))) ; Y[N] = Y[N] - ((Y[NN]-Y[N])((R-L)/(2L))) ; Z[N] = Z[N] - ((Z[NN]-Z[N])((R-L)/(2L))) ; X[NN] = X[NN] + ((X[NN]-X[N])((R-L)/(2L))) ; Y[NN] = Y[NN] + ((Y[NN]-Y[N])((R-L)/(2L))) ; Z[NN] = Z[NN] + ((Z[NN]-Z[N])((R-L)/(2L))) ; dV[N] = dV[N] + ((V[NN]-V[N])/M) ; dV[NN] = dV[NN] - ((V[NN]-V[N])/M) ; stroke(125+(Z[N]/2),125+(Z[N]/2),125+(Z[N]/2)) ; line(X[N]1.2(200+V[N])/200+300,Y[N]1.2(200+V[N])/200+300,X[NN]1.2(200+V[NN])/200+300,Y[NN]1.2(200+V[NN])/200+300) ; } if ( Z[N] > Z[NN] ){ KX = X[N] ; KY = Y[N] ; KZ = Z[N] ; KV = V[N] ; KdV = dV[N] ; X[N] = X[NN] ; Y[N] = Y[NN] ; Z[N] = Z[NN] ; V[N] = V[NN] ; dV[N] = dV[NN] ;
X[NN] = KX ; Y[NN] = KY ; Z[NN] = KZ ; V[NN] = KV ; dV[NN] = KdV ; } } L = sqrt((X[N]X[N])+(Y[N]Y[N])) ; L = sqrt((Z[N]Z[N])+(LL)) ; X[N] = X[N] + (X[N](200-L)/(2L)) ; Y[N] = Y[N] + (Y[N](200-L)/(2L)) ; Z[N] = Z[N] + (Z[N](200-L)/(2L)) ; KZ = Z[N] ; KX = X[N] ; Z[N] = (KZcos(float(300-mouseX)/10000))-(KXsin(float(300-mouseX)/10000)) ; X[N] = (KZsin(float(300-mouseX)/10000))+(KXcos(float(300-mouseX)/10000)) ; KZ = Z[N] ; KY = Y[N] ; Z[N] = (KZcos(float(300-mouseY)/10000))-(KYsin(float(300-mouseY)/10000)) ; Y[N] = (KZsin(float(300-mouseY)/10000))+(KYcos(float(300-mouseY)/10000)) ; dV[N] = dV[N] - (V[N]*HH) ; V[N] = V[N] + dV[N] ; dV[N] = dV[N] * H ; } textSize(140); text("N I I N", 160, 330); fill(190);
}

void mousePressed(){

Lmin = 600 ; NN = 0 ; for ( N = 0 ; N <= Nmax ; N++ ){ L = sqrt(((mouseX-(300+X[N]))(mouseX-(300+X[N])))+((mouseY-(300+Y[N]))(mouseY-(300+Y[N])))) ; if ( Z[N] > 0 && L < Lmin ){ NN = N ; Lmin = L ; } } if ( K == 0 ){ dV[NN] = -200 ; K = 1 ; } else{ dV[NN] = +200 ; K = 0 ; }

}

and my p5 version:

var Nmax = 1000 ; var M = 50 ; var H = 0.99 ; var HH = 0.01 ;

var X = new Array(Nmax+1) ; var Y = new Array(Nmax+1) ; var Z = new Array(Nmax+1); var V = new Array(Nmax+1) ; var dV = new Array(Nmax+1) ; var L ; var R = 6.9547094149393337071705489656828 ; var Lmin = 0 ; var N = 0 ; var NN = 0; var KX = 0; var KY = 0 ; var KZ = 0 ; var KV = 0 ; var KdV = 0 ; var K = 0;

function setup(){ //PFont font; //font = createFont("Kenzo Regular.otf",120); //textFont(font); createCanvas(600,600) ; background(0) ; noSmooth() ; stroke(255,255,255) ; fill(50,50,50) ;

for ( N = 0 ; N <= Nmax ; N++ ){ X[N] = random(-300,+300) ; Y[N] = random(-300,+300) ; Z[N] = random(-300,+300) ; } }

function draw(){

background(0) ; // // 2-) BURAYA YAPIŞTIR // for ( N = 0 ; N <= Nmax ; N++ ){ for ( NN = N+1 ; NN <= Nmax ; NN++ ){ L = sqrt(((X[N]-X[NN])(X[N]-X[NN]))+((Y[N]-Y[NN])(Y[N]-Y[NN]))) ; L = sqrt(((Z[N]-Z[NN])(Z[N]-Z[NN]))+(LL)) ; if ( L < R ){ X[N] = X[N] - ((X[NN]-X[N])((R-L)/(2L))) ; Y[N] = Y[N] - ((Y[NN]-Y[N])((R-L)/(2L))) ; Z[N] = Z[N] - ((Z[NN]-Z[N])((R-L)/(2L))) ; X[NN] = X[NN] + ((X[NN]-X[N])((R-L)/(2L))) ; Y[NN] = Y[NN] + ((Y[NN]-Y[N])((R-L)/(2L))) ; Z[NN] = Z[NN] + ((Z[NN]-Z[N])((R-L)/(2L))) ; dV[N] = dV[N] + ((V[NN]-V[N])/M) ; dV[NN] = dV[NN] - ((V[NN]-V[N])/M) ; stroke(125+(Z[N]/2),125+(Z[N]/2),125+(Z[N]/2)) ; line(X[N]1.2(200+V[N])/200+300,Y[N]1.2(200+V[N])/200+300,X[NN]1.2(200+V[NN])/200+300,Y[NN]1.2(200+V[NN])/200+300) ; } if ( Z[N] > Z[NN] ){ KX = X[N] ; KY = Y[N] ; KZ = Z[N] ; KV = V[N] ; KdV = dV[N] ; X[N] = X[NN] ; Y[N] = Y[NN] ; Z[N] = Z[NN] ; V[N] = V[NN] ; dV[N] = dV[NN] ;
X[NN] = KX ; Y[NN] = KY ; Z[NN] = KZ ; V[NN] = KV ; dV[NN] = KdV ; } } L = sqrt((X[N]X[N])+(Y[N]Y[N])) ; L = sqrt((Z[N]Z[N])+(LL)) ; X[N] = X[N] + (X[N](200-L)/(2L)) ; Y[N] = Y[N] + (Y[N](200-L)/(2L)) ; Z[N] = Z[N] + (Z[N](200-L)/(2L)) ; KZ = Z[N] ; KX = X[N] ; Z[N] = (KZcos(float(300-mouseX)/10000))-(KXsin(float(300-mouseX)/10000)) ; X[N] = (KZsin(float(300-mouseX)/10000))+(KXcos(float(300-mouseX)/10000)) ; KZ = Z[N] ; KY = Y[N] ; Z[N] = (KZcos(float(300-mouseY)/10000))-(KYsin(float(300-mouseY)/10000)) ; Y[N] = (KZsin(float(300-mouseY)/10000))+(KYcos(float(300-mouseY)/10000)) ; dV[N] = dV[N] - (V[N]*HH) ; V[N] = V[N] + dV[N] ; dV[N] = dV[N] * H ; } //textSize(140); // //text("N I I N", 160, 330); // 1-) BU 3 SATIRI YUKARDA İŞARETLİ OLAN YERE KES-YAPIŞTIR EĞER YAZININ SPHERE İÇİNE GİRMESİNİ İSTİYOSAN //fill(190); // }

function touchStarted(){

Lmin = 600 ; NN = 0 ; for ( N = 0 ; N <= Nmax ; N++ ){ L = sqrt(((mouseX-(300+X[N]))(mouseX-(300+X[N])))+((mouseY-(300+Y[N]))(mouseY-(300+Y[N])))) ; if ( Z[N] > 0 && L < Lmin ){ NN = N ; Lmin = L ; } } if ( K == 0 ){ dV[NN] = -200 ; K = 1 ; } else{ dV[NN] = +200 ; K = 0 ; }

}

I am using SquareSpace and I was able to get my p5.js script to show on the page, but no matter what I do it is always on the very bottom of the page. If you are familiar with SquareSpace, I have inserted my code into a "code block" in the body of the page, but the p5 script just says "nope! I'm going to the bottom, see y'all later". Contacting square space, they say it's a fault on the p5 side, but they could easily just be shrugging me off to avoid work. So my question is;

Is there a p5 setting that makes it sit at a specific spot on the page, no matter what it is wrapped in?

First time in this forum! Let me know if you need anything else.

Thank you so much for your help @kfrajer and @jeremydouglass! I tried your examples but for some reason with both of them I got the error code "Type mismatch, "float" does not match with "int"", that seemed to be related to the map function. Do you happen to know what that means? My end goal is to rotate an object in the browser. I tried using Processing video library and controlling video with the mouse – it worked with Processing but my challenge is to get it work in Squarespace using Processing JS. I think I'd have the same problem with 3d objects.

Hi,

I'm using processing.min.js to display a sketch (made with Processing 2.2.1) within HTML (Squarespace, to be precise). We're trying to emulate the effect shown here: https://processing.org/examples/brightness.html. The sketch calls on a image from a URL, so I'm preloading it using the @pjs directive. The sketch works perfectly within Processing, and the image loads fine in the browser when I comment out the interactivity (I did this as a test using image(image_name,0,0), but putting the two together results in just a gray box (can be seen beneath the snake sketch at https://hailee-r.squarespace.com/test-1.. you may need to enter a CAPTCHA code, apologies!)

Here is the code from the PDE file:

/*PDE FILE--WORKS WITHIN PROCESSING
    /* @pjs preload="https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg"; */


PImage mummies;

void setup() {
  size(300 , 360);
  frameRate(30);
  mummies = loadImage("https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg");
  image(mummies,0,0,100,100);
  mummies.loadPixels();
  loadPixels();
  println("hola!");
}

void draw() {
  for (int x = 0; x < mummies.width; x++) {
  for (int y = 0; y < mummies.height; y++ ) {
  int loc = x + y*mummies.width;
  float r,g,b;

  r = red (mummies.pixels[loc]);

  float maxdist = 50;//dist(0,0,width,height);
  float d = dist(x, y, mouseX, mouseY);      
  float adjustbrightness = 255*(maxdist-d)/maxdist;
  r += adjustbrightness;
  r = constrain(r, 0, 255);
  color c = color(r);

  pixels[y*width + x] = c;
    }
  }
 updatePixels();
}

Here is the entirety of the code I put in the code block on the page:

    <script src="/s/processingmin.js"></script>
 <script type="application/processing" data-processing-target="pjs12">
/* @pjs preload="https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg"; */


PImage mummies;

void setup() {
  size(300 , 360);
  frameRate(30);
  mummies = loadImage("https://static1.squarespace.com/static/56e2e7b42fe131d8eec561c5/t/56e82e7b01dbae088004311c/1458056830321/?format=750w", "jpg");
  image(mummies,0,0,100,100);
  mummies.loadPixels();
  loadPixels();
  println("hola!");
}

void draw() {
  for (int x = 0; x < mummies.width; x++) {
  for (int y = 0; y < mummies.height; y++ ) {
  int loc = x + y*mummies.width;
  float r,g,b;

  r = red (mummies.pixels[loc]);

  float maxdist = 50;//dist(0,0,width,height);
  float d = dist(x, y, mouseX, mouseY);      
  float adjustbrightness = 255*(maxdist-d)/maxdist;
  r += adjustbrightness;
  r = constrain(r, 0, 255);
  color c = color(r);

  pixels[y*width + x] = c;
    }
  }
 updatePixels();
}
</script>
 <canvas id="pjs12"> </canvas>

Any help would be greatly appreciated!

That's sounds very intersting, but this is what I got from that link.

EDIT: sorry it was only a few clicks away. Gonna have a look, thanks for sharing. ( I just should have clicked visitors access)

Squarespace Trial Squarespace trial accounts are not visible to the public. When you are ready to publish your website, upgrading your trial will make your site active to the world. Owner LoginVisitor Access

Moved to the right section and reuploaded in different parts here:

https://carlo-farina.squarespace.com/visual-code/