Playing around with fluid simulation

Processing Libraries
1

Hello, I’ve been playing around with Daniel Shiffman’s fluid simulation tutorial and trying to find a way to add a different color every time the mouse is pressed (or when the color is chosen, is where I’m trying to get), and have the different colors interact with each other. It’s probably a dumb question but I’m a beginner and even though I’ve been rewatching a bunch of videos on it, I still can’t get there.

You can take a look at the code here:
https://thecodingtrain.com/CodingChallenges/132-fluid-simulation.html

It seems to me like everything is being rendered in one function and when I change the color in there, it changes the whole fluids color.
I would really appreciate any input because I can’t figure out where in the code and how exactly I should pass that argument.

Thanks a lot :slight_smile:

2

hi! do you have the code you tried already that you want to share? are you working with processing or p5.js?

I think it’s not a dumb question at all and as you noticed the color is set globally (color depends on the density value). I don’t have a quick solution for you, but I can give you suggestions. 1) if you think this is a challenge for yourself to implement it, my guess is that you need to prepare Fluid objects separately for red, green and blue channel and mix them. It should not be a terribly difficult task, but it requires some patience :slight_smile:
or 2) if you just want to use a fluid simulator, there is pixelflow for processing

I never tried any fluid simulator for p5.js but there are bunch of javascript fluid simulations I guess (I appreciate if anyone has suggestions!)

1 Like
3

Thank you very much for your reply! I am working on processing and haven’t changed the code much. It is quite long and I am thinking maybe it’s a little complicated for me to figure out how to get different fluid objects to interact.

But pixelflow seems very promising! If you have any suggestions on how I would go about changing colors in there it would be amazing. I have added another fluid object but can’t figure out how to get the color to change.


// FLUID SIMULATION EXAMPLE
import com.thomasdiewald.pixelflow.java.DwPixelFlow;
import com.thomasdiewald.pixelflow.java.fluid.DwFluid2D;

// fluid simulation
DwFluid2D fluid;
DwFluid2D fluid2;

// render target
PGraphics2D pg_fluid;

public void setup() {
  size(800, 800, P2D);

  // library context
  DwPixelFlow context = new DwPixelFlow(this);

  // fluid simulation
  fluid = new DwFluid2D(context, width, height, 1);
  fluid2 = new DwFluid2D(context, width, height, 1);

  // some fluid parameters
  fluid.param.dissipation_velocity = 0.70f;
  fluid.param.dissipation_density  = 0.99f;
  
  fluid2.param.dissipation_velocity = 0.70f;
  fluid2.param.dissipation_density  = 0.99f;

  // adding data to the fluid simulation
  fluid.addCallback_FluiData(new  DwFluid2D.FluidData() {
    public void update(DwFluid2D fluid) {
      if (mousePressed) {
        float px     = mouseX;
        float py     = height-mouseY;
        float vx     = (mouseX - pmouseX) * +15;
        float vy     = (mouseY - pmouseY) * -15;
        fluid.addVelocity(px, py, 14, vx, vy);
        fluid.addDensity (px, py, 20, 0.0f, 0.4f, 1.0f, 1.0f);
        fluid.addDensity (px, py, 8, 1.0f, 1.0f, 1.0f, 1.0f);
      }
    }
  });
  
  
    fluid2.addCallback_FluiData(new  DwFluid2D.FluidData() {
    public void update(DwFluid2D fluid2) {
      if (keyPressed) {
        float px     = mouseX;
        float py     = height-mouseY;
        float vx     = (mouseX - pmouseX) * +15;
        float vy     = (mouseY - pmouseY) * -15;
        fluid.addVelocity(px, py, 14, vx, vy);
        fluid.addDensity (px, py, 20, 0.0f, 0.4f, 1.0f, 1.0f);
        fluid.addDensity (px, py, 8, 1.0f, 1.0f, 1.0f, 1.0f);
      }
    }
  });

  pg_fluid = (PGraphics2D) createGraphics(width, height, P2D);
}


public void draw() {    
  // update simulation
  fluid.update();
  fluid2.update();

  // clear render target
  pg_fluid.beginDraw();
  pg_fluid.background(0);
  pg_fluid.endDraw();

  // render fluid stuff
  fluid.renderFluidTextures(pg_fluid, 0);
  fluid2.renderFluidTextures(pg_fluid, 0);

  // display
  image(pg_fluid, 0, 0);
}

I can see it was sort of implemented in this example but I am having a hard time figuring out how:
https://github.com/diwi/PixelFlow/blob/master/examples/FlowField/FlowField_LIC_OpticalFlow/FlowField_LIC_OpticalFlow.java

Any advice is appreciated.
Thanks so much!

4

Update :slight_smile:

Thanks a lot!

I managed to create a function to change color with keys, using pixelflow.

I’ll paste it for future reference:

// FLUID SIMULATION EXAMPLE
import com.thomasdiewald.pixelflow.java.DwPixelFlow;
import com.thomasdiewald.pixelflow.java.fluid.DwFluid2D;

// fluid simulation

DwFluid2D fluid2;

// render target
PGraphics2D pg_fluid;

float bom;
float den;

public void setup() {
  size(800, 800, P2D);

  // library context
  DwPixelFlow context = new DwPixelFlow(this);

  // fluid simulation
  fluid2 = new DwFluid2D(context, width, height, 1);

  // some fluid parameters
  fluid2.param.dissipation_velocity = 0.2f;
  fluid2.param.dissipation_density  = 1f;
  
  pg_fluid = (PGraphics2D) createGraphics(width, height, P2D);
}


public void draw() {    
  
  addColor();
  
  // update simulation

  fluid2.update();

  // clear render target
  pg_fluid.beginDraw();
  pg_fluid.background(0);
  pg_fluid.endDraw();

  // render fluid stuff
 
  fluid2.renderFluidTextures(pg_fluid, 0);

  // display
  image(pg_fluid, 0, 0);
}

void addColor() {
      fluid2.addCallback_FluiData(new  DwFluid2D.FluidData() {
    public void update(DwFluid2D fluid2) {
      
        float px     = mouseX;
        float py     = height-mouseY;
        float vx     = (mouseX - pmouseX) * +15;
        float vy     = (mouseY - pmouseY) * -15;
        
        fluid2.addVelocity(px, py, 14, vx, vy);
       
        if (mousePressed) {
        fluid2.addVelocity(px, py, 14, vx, vy);
        }

        if (keyPressed) {
         if (key == '1'){
        float bom  = 0.1f;
            fluid2.addDensity (px, py, 20, bom, 0.4f,0.1, 1.0f);
         }
         if (key == '2'){
         float bom = 0.7f;
             fluid2.addDensity (px, py, 20, bom, 0.4f,0.1, 1.0f);
         }               
        } 
  
       
        
    
       }
      });
}
1 Like