Perlin Noise Controler

Processing Project Guidance
1

Hello there

I’m a Graphic Designer and for my final diploma project I want to explore Generative Art / Creative Coding. I intend to do something with Perlin Noise but don’t really know where to start yet. So I figured I would ask you Guys.

877dfd12924823.5626ef1e07345

I want to create something that looks similar to the picture. I’m also curious if it’s possible that I have some sliders to control the Perlin Noise, so for example it changes the color, size, speed etc.

I’m really looking forward to your input!

1 Like
2

Hi there fabnai,

Since you’re talking about Generative Art / Creative Coding, I suggest that you let the sketch take control of the output. It’s amazing to let parameters such as colors, sizes, and shapes be randomized, till a point where you can’t anticipate the outcome any more. Working like this has let to so many new ideas for my designs, and I really encourage you to go through a similar work approach.

Start with simple sketches and once you got some more experience play around with Perlin Noise. Make tons of tiny, little sketches and follow what feels right. Hopefully it will let you experience the feeling of letting go of working towards a goal, and instead just have fun and see where the coding takes you. It’s often when you focus on the process rather than the product that the interesting ideas appear.

Good luck with your graduation project, and hope to see some crazy outcomes of your work in the gallery later :clown_face:

1 Like
3

Yes. If you are using Processing (Java mode) then you can use G4P or ControlP5 for sliders. You can find these on the libraries page and in the PDE Contributions Manager – installing them will also install Examples of how to make slider sketches.

Or just roll your own. Here is a very simple slider – two rectangles, plus mouse detection that updates the value and moves one rectangle. The library sliders are significantly more sophisticated…

Slider s1;
void setup() {
  size(300, 300);
  s1 = new Slider(10, 10, 200, 20, 100);
}
void draw() {
  background(128);
  s1.render();
}
void mouseDragged() {
  s1.update();
}
void mousePressed() {
  s1.update();
}

class Slider {
  int x, y, w, h, val;
  Slider(int x, int y, int w, int h, int val) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.val = val;
  }
  void render() {
    rect(x, y+5, w, h-10);  // bar
    rect(x+val, y, 4, h);   // knob
    text(val, x, h+20);     // value display
  }
  void update() {
    if (mouseX>=x && mouseX <=x+w && mouseY>=y && mouseY<=y+h) {
      val = mouseX-x;
    }
  }
}