Dripping spray paint in P5

AndreasH

Hello world.

I have created a super simple painting program in p5 which is working fine so far.

Now I am attempting to simulate dripping paint like a real world spray can would work. Would be somewhat eternally grateful if anyone could point me in the right direction, so far I am lost. Thanks! Mwah!

jeremydouglass

I believe there are a number of related examples in the forum in the first page or two of search results here:

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

KevinWorkman

It's hard to help with general "how do I do this" type questions. The best advice we can give you is to break your problem down into smaller steps.

Start by trying to explain exactly what you want to happen, in English. Pretend you have a really dumb friend who has never seen a real world spray can (or any kind of paint). Explain to your friend exactly what's happening, and remember that they're really dumb so you have to break it down into very small steps so they can understand.

When you have those steps written out, then you have an algorithm that you can start thinking about implementing with code.

AndreasH

I guess I'm trying to not have the answer handed to me because it's fun to learn. Creating a step by step algorithm for the way of thinking is a good idea which I use far to little.

Currently checking the search results that Mr Douglas provided which i was to silly/fast to find myself from the get go .

jeremydouglass

@AndreasH -- do follow up in this thread if you find a good starting point and want to share a code snippet and ask further questions about dripping. Good luck!

AndreasH

After an intense and sweaty google session i found some code that comes somewhat close to what i want to achieve. But the code confuses me because it uses an API for the colors and random locations and direction. I want to just have straight dripping down the y-axis, somehow I feel more lost now than before.

This is the code i found:

var WIDTH = 500,
  HEIGHT = 500,
  BACKGROUND = 240,
  COLOR_PALETTE = ['#69d2e7', '#a7dbd8', '#e0e4cc', '#f38630', '#fa6900'],
  MAX = 100,
  STROKES = 100;

var time = 1,
  particles = [],
  deltaX = 400,
  deltaY = 700,
  strokeArray = [],
  palette = [];

class Particle {
  constructor(x = WIDTH / 2, y = HEIGHT / 2, radius = 10, rotation) {
    this.x = x,
            this.y = y,
            this.r = radius,
            this.rotation = 0;
  }

  render(color, delta) {
    fill(color);
    tint(255, 127);
    noStroke();
    ellipse(this.x, this.y, this.r, this.r);
  }

  rotate() {}
}

class Stroke {
  constructor(x, y, color) {
    this.particles = [],
            this.x = x,
            this.y = y,
            this.dx = x,
            this.dy = y,
            this.color = color;
  }

  render() {
    this.particles.map((particle, index) => {
      particle.render(this.color, this.dx);
    });

    this.dx += 0.006;
    this.dy += 0.006;
  }

  addParticle(deltaX, deltaY) {

    var fx = map(noise(this.dx * noise(cos(400) / 40) * noise(sin(1000) / 40)), 0, 1, 0, WIDTH);
    var fy = map(noise(this.dy), 0, 1, 0, HEIGHT);

    var dist = Math.sqrt((fx - this.x) * (fx - this.x) + (fy - this.y) * (fy - this.y));

    var maxSize = (x) => {
      if (x > 15) {
        return 15;
      }
      return x;
    };

    if (this.particles.length < 2) {
      this.particles.push(new Particle(fx, fy, 5, fx / fy * Math.PI * 2));
    } else {
      this.particles.push(new Particle(fx, fy, maxSize(map(dist, 4, 0, 0, 10)), fx / fy * Math.PI * 2));
    }

    this.x = fx;
    this.y = fy;
  }
}


function preload() {
  var input = [];

  for (var i = 0; i < STROKES; i++) {
    input.push('N');
  }


  var url = 'http://colormind.io/api/';
  var data = {
    model: 'default',
    input: input
  };

  var http = new XMLHttpRequest();

  http.onreadystatechange = () => {
    if (http.readyState == 4 && http.status == 200) {
      palette = JSON.parse(http.responseText).result;

      for (var i = 0; i < STROKES; i++) {
        strokeArray.push(new Stroke(
                    Math.random() * 800,
                    Math.random() * 800,
                    palette[Math.floor(Math.random() * 5)]
                ));
      }
    }
  };

  http.open('POST', url, true);
  http.send(JSON.stringify(data));
}

function setup() {
  //var canvas = createCanvas(WIDTH, HEIGHT);
  //canvas.parent('sketch');
  createCanvas(500, 500);
  background(BACKGROUND);
}

function draw() {
  if (time > MAX) {
    noLoop();
  }

  background(BACKGROUND);

  if (true) {
    particles.push(new Particle(Math.random() * 800, Math.random() * 800));
  }

  for (var i = 0; i < strokeArray.length; i++) {
    strokeArray[i].addParticle(deltaX, deltaY);
    strokeArray[i].render();
  }

  time++;
}

KevinWorkman

Trying to use code you randomly find on the internet is a recipe for a ton of headaches. Instead, you need to understand exactly how the code is working, and use that as inspiration for how you can organize your own code.

Which part of this code is confusing you?

AndreasH

Yes, agreed it's a recipe for headache but also a way to learn and find syntax you're not yet familiar with. I'm not planning on using the above code, my goal is to understand it so i can write something more suitable for my needs.

The part that is confusing me is pretty simple. I want to disconnect the input from the API and after that experiment and learn from the code.

PS. Thanks for being cute and patient.

KevinWorkman

I want to disconnect the input from the API

Cool, and which part of that is confusing you? I'm not trying to be annoying, but part of learning how to program is leaning how to be much more detailed. What does the code currently do? Go line-by-line and try to understand exactly what it's doing.