How to make a grid which deforms like a ball on a net

Programming Questions

eb_dev

How to make a grid which deforms like a ball on a net

in Programming Questions • 1 year ago

Hi all,

I'd like to make a grid which deforms as a net would deform if it was supported on all sides and a heavy ball was rolled
around it.

I know how to make a grid, that part is straight forward enough but I really have no idea how to make it deform.

Could someone point me in the right direction please? Desired effect is below.

Thanks,

eb_dev

Replies(4)

Chrisir

Re: How to make a grid which deforms like a ball on a net

1 year ago

that should be very easy

let's asume you have a grid.

each node has a x and y pos.

It is also connected to its 4 neighbours

Thus you have to change only the x and y.

You have a ball pos (x,y) that is an extra object or var apart from your grid.

Now check the distance from all nodes to the ball (use douple for loop plus dist : ball x,y to node x,y ).

When the dist is smaller (or equal) than a threshhold, move node x and y towards ball x,y (proportional to the dist) (but stay under a max amount of movement?)
make sure that nodes have always a certain dist among each other?
when the dist is higher than another threshhold, don't change grid there (to far away from ball)

when ball rolls, calculate whole grid and paint it then.

Good Luck!

see also maybe :
https://forum.processing.org/topic/how-to-animate-an-expanding-grid-based-particle

fatthrash

Re: How to make a grid which deforms like a ball on a net

1 year ago

Hi Chrisir.

After checking the distance between node x and y and ball x and y, what function would you recommend to move those nodes towards the ball(translate, easing, ?)?

Please see my sketch:

import processing.opengl.*;

int a = 50;

int b = 50;

void setup(){

size(400,400,OPENGL);

background(0);

smooth();

}

void draw(){

background (0);

//double for loop for grid

for(int j=0; j <10; j++){

for(int i=0; i < 10; i++){

//grid nodes

ellipse(i*a, j*b, 10, 10);

//grid lines

stroke (100);

line(i*a, 0, i*a, height);

line(0, i*a, width, i*a);

//setting up "ball" following mouse

ellipse (mouseX, mouseY,10,10);

//distance between "ball" and grid nodes

float q = dist (mouseX, mouseY, i*a, j*b);

//if past certain distance

if(q <80){

//WHAT FUNCTION TO MOVE NODES TOWARDS BALL?

ellipse(i*a, j*b, 33, 33);

}

Chrisir

Re: How to make a grid which deforms like a ball on a net

1 year ago

I would recommend a array for the grid with defaultX and defaultY (without the ball).
Save those values in setup () in the global array.

Then in draw() use the grid with defaultX and defaultY and calculate currentX and currentY from it (also in an array) and from the ball.

Then with those values replace this:

line(i*a, 0, i*a, height);
line(0, i*a, width, i*a);

by that

line ( nodes(x,y).x, nodes(x,y).y , nodes(x+1,y).x, nodes(x,y).y )
line ( nodes(x,y).x, nodes(x,y).y , nodes(x,y+1).x, nodes(x,y).y )

etc.

Later make a class Node with

defaultX , defaultY
currentX , currentY
...
void calculate (float ballX, float ballY)
...
void draw()
...

Chrisir

allonestr..

Re: How to make a grid which deforms like a ball on a net

1 year ago

Like Chrisir, I've kept track of the original grid positions. As I was thinking of a net, I've called the original positions flatKnots and those distorted by the ball dippedKnots. I've proposed three different ways of distorting the net - none are as you show in your diagram, but they should give you a start.

int numKnots = 50;
PVector[][] dippedKnots;
PVector[][] flatKnots;
float gridSize;
float ballRadius = 100;
void setup()
{
size(500, 500);
gridSize = (width / numKnots);
flatKnots = new PVector[numKnots][numKnots];
dippedKnots = new PVector[numKnots][numKnots];

for(int j = 0; j < numKnots; j++)
{
    for(int i = 0; i < numKnots; i++)
    {
      flatKnots[i][j] = new PVector(i * gridSize, j * gridSize);
      dippedKnots[i][j] = new PVector(i * gridSize, j * gridSize);
    }
}
}
void draw()
{
background(255);
for(int j = 0; j < numKnots; j++)
{
    for(int i = 0; i < numKnots; i++)
    {
      float dipDist = dist(mouseX, mouseY, flatKnots[i][j].x, flatKnots[i][j].y);
      if(dipDist > ballRadius)
      {
        dippedKnots[i][j].x = flatKnots[i][j].x;
        dippedKnots[i][j].y = flatKnots[i][j].y;
      }
      else
      {
        float dx = mouseX - flatKnots[i][j].x;
        float dy = mouseY - flatKnots[i][j].y;

        //give a linear distortion
        float xDistortionDistance = 0.1;
        float yDistortionDistance = 0.1;
        dippedKnots[i][j].x = flatKnots[i][j].x + dx * xDistortionDistance;
        dippedKnots[i][j].y = flatKnots[i][j].y + dy * yDistortionDistance;

        //making the distortionDistance proportional to the ballRadius
        //and squaring it gives a curved distortion
//        float xDistortionDistance = map(dx, -ballRadius, ballRadius, -0.5, 0.5);
//        float yDistortionDistance = map(dy, -ballRadius, ballRadius, -0.5, 0.5);
//        dippedKnots[i][j].x = flatKnots[i][j].x + dx * (xDistortionDistance*xDistortionDistance);
//        dippedKnots[i][j].y = flatKnots[i][j].y + dy * (yDistortionDistance*yDistortionDistance);
        //or use sin to get a different curve
//        float xDistortionDistance = map(dx, -ballRadius, ballRadius, 0, PI);
//        float yDistortionDistance = map(dy, -ballRadius, ballRadius, 0, PI);
//        dippedKnots[i][j].x = flatKnots[i][j].x - dx * sin(xDistortionDistance);
//        dippedKnots[i][j].y = flatKnots[i][j].y - dy * sin(yDistortionDistance);
      }
    }
}
stroke(0);
for(int j = 0; j < numKnots - 1; j++)
{
    for(int i = 0; i < numKnots - 1; i++)
    {
      line(dippedKnots[i][j].x, dippedKnots[i][j].y, dippedKnots[i+1][j].x, dippedKnots[i+1][j].y);
      line(dippedKnots[i][j].x, dippedKnots[i][j].y, dippedKnots[i][j+1].x, dippedKnots[i][j+1].y);
    }
}
stroke(255, 0, 0);
noFill();
ellipse(mouseX, mouseY, 2*ballRadius, 2*ballRadius);
}

Top Reply