How would I go about creating this interactive wave effect?

alex1095

There's a nice canvas effect on this website (waaark.com) When you mouse over the different sections there's a wobbly wave effect. Could you make this using p5 and if so how would one go about it?

TfGuy44

float[] midpoints;
float time = 500;
color bg = rcolor();
color cf = rcolor();
int reset_at = -1;

void setup() {
  size(600, 400);
  midpoints = new float[2+width/20];
}

void reset() {
  cf = bg;
  bg = rcolor();
  fill(cf);
  float py = random(height/4, 3*height/4);
  for (int i=0; i<midpoints.length; i++) {
    py += random(-60, 60);
    midpoints[i] = py;
  }
  reset_at = int(millis() + (2*time));
}

void draw() {
  if (millis() > reset_at) {
    reset();
  }
  background(bg);
  beginShape();
  if (millis()%(2*time)<time) {
    vertex(0, lerp(0, midpoints[0], (millis()%time) / time));
  } else {
    vertex(0, lerp(midpoints[0], height, (millis()%time) / time));
  }
  for (int i=1; i<midpoints.length; i++) {
    if (millis()%(2*time)<time) {
      curveVertex(20*i, lerp(0, midpoints[i], (millis()%time) / time));
    } else {
      curveVertex(20*i, lerp(midpoints[i], height, (millis()%time) / time));
    }
  }
  vertex(width, height);
  vertex(0, height);
  endShape();
}

color rcolor() {
  return(color(random(255), random(255), random(255)));
}

This is about as far as I got trying to replicate it. Not sure why the colors flicker wrong. Maybe someone else can take it from here.

alex1095

I don't think I explained well enough here. I meant once the page has loaded and there three different coloured sections. when you pass the cursor through the different sections, their bounding box wobbles like a jelly effect. You can see below in the image.

kfrajer

Great effect @TfGuy44. Thxs for sharing it (A+ for effort and intentions!)

Kf

koogs

their bounding box wobbles like a jelly effect

it also makes my CPU go crazy, solid 100% utilisation of one of the cores.

alex1095

Sorry, I'd also like to say thanks @TfGuy44 for your effort and intentions. Also I'm not bothered about optimisation or anything, I'd just like to know a way of obtaining this or any similar interactive effect for educational purposes. Doesn't have to be exact I'd just like to learn the principles because I don't even know where I would start at this point. Thanks.

kfrajer

Check this: http://p5js.sketchpad.cc/Pj6Y0NTGJl

Kf