Wabbly shape and faster blurry filter.

BianYx

Hi,there. I am trying to create a wobbly shape which is similar the pic I attached below.

And here is what I have so far.

The thing is this shape doesn't change that smoothly as I expected.Especially the connection part,I just joined the last vertex to the first vertex,so a short straight ling always appears there.Guess I should fix it by giving this two vertexes same arguments,but I don't know how. Basically,What I want is a shape looks like generated by several bezier curves,so hope you guys can help me to improve it.

Otherwise,I applied blurry filter to the shape, but the filter runs crazy slowly. I tried to find a solution at this forum,someone says I'd better use a GPU based shader , and also I found a fast blurring , but I am a really beginner,its too complicated for me to apply it. I would be very grateful if someone can help me with it.

PS: I am planning apply minim beats detector in my next step, so all suggestions about this are very welcome.

float xoff=0;
float yoff=0;
float xoff2=0;
float yoff2=0;
float xoff3=0;
float yoff3=0;

void setup() {
size(800, 800);
smooth();
frameRate(20);
}



void draw() {
background(245,250,255);

pushMatrix();

translate(width/2, height/2);


strokeWeight(83);
stroke(255,0,240,130);
noFill();
beginShape();

float c=0; 
while(c<=TWO_PI){ 
c+=0.4;

float offset=map(noise(xoff3,yoff3), 1, 2, -22, 32);
float Radius=height/4+offset;
float x3=Radius*cos(c);
float y3=Radius*sin(c);
vertex(x3, y3);
xoff3+=0.1;
yoff3+=0.1;

}
endShape(CLOSE);







strokeWeight(80);
stroke(20,200,200,150);
noFill();
beginShape();

float b=0; 
while(b<=TWO_PI){ 
b+=0.3;

float offset=map(noise(xoff2,yoff2), 1, 2, -25, 25);
float Radius=height/4+offset+4;
float x2=Radius*cos(b);
float y2=Radius*sin(b);
vertex(x2, y2);
xoff2+=0.1;
yoff2+=0.1;

}
endShape(CLOSE);


strokeWeight(80);
stroke(0);
noFill();
beginShape();

float a=0; 
while(a<=TWO_PI){ 
a+=0.2;

float offset=map(noise(xoff,yoff), 1, 2, -25, 25);
float Radius=height/4+offset;
float x=Radius*cos(a);
float y=Radius*sin(a);
vertex(x, y);
xoff+=0.1;
yoff+=0.1;

}
endShape(CLOSE);
filter(BLUR,5);

popMatrix();
}

Thanks so much,guys

jeremydouglass

@BianYx --

Basically, what I want is a shape looks like generated by several bezier curves

Have you looked at the Processing Curves Tutorial?

• https://www.processing.org/tutorials/curves/

...and, in particular, the bezier functions and examples?

• https://processing.org/reference/bezier_.html
• https://processing.org/reference/bezierVertex_.html
• https://processing.org/reference/bezierPoint_.html
• https://processing.org/reference/bezierTangent_.html
• https://processing.org/examples/bezier.html

BianYx

@jeremydouglass

Thank u man. I have tried with curves before,but didn't succeed. What I want here is a transformation way of the shape which is smooth as a shape generated with bezier. And what I have now, the shape transforms,but not that smoothly. Could u please check this video. https://vimeo.com/161936471 I surmise that this effect is not totally created by bezier.Probably it is something like I have done.(Maybe I am wrong). Thanks again for your respond.

benja

It's always hard to reproduce a certain look perfectly. But it would be a copy anyways and not as interesting as creating something unique. So to adress your problem: "I have tried with curves before,but didn't succeed." - doesnt count. Show some sample code whit curves so we could find out where your problem is.

jeremydouglas has linked some relevant functions, i would additionally suggest curveVerteX.

blurring is usually pretty slow, but maybe you do not need it here. See this example, reduced to only one "wabbly-shape", uses transparencies instead of blur. And i used an array to store the calculated points, i find it easier this way.

int steps = 15;
float xOff, yOff;
PVector[] points;

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

  // create an array to store the points
  points = new PVector[steps];
  for (int i =0; i< points.length; i++) {
    points[i] = new PVector();
  }
}


void draw() {
  float speed = map(mouseX, 0, width, 0.001, 0.5);

  // semi transparent rectangle  
  fill(0, 4);
  noStroke();
  rect(0, 0, width, height);

  // calculate points
  float angle = TWO_PI / steps;
  for (int i =0; i< points.length; i++) {
    float c = i*angle;
    float offset=map(noise(xOff, yOff), 0, 1, -50, 50);
    float radius=height/4+offset;
    points[i].x = radius*cos(c);
    points[i].y = radius*sin(c);
    xOff+=0.5;
  }
  xOff = 0;
  yOff += speed;



  // draw points
  translate(width/2, height/2);
  noFill();
  strokeWeight(60);
  stroke(20, 220, 90, 20);


  beginShape();
  curveVertex(points[points.length-1].x, points[points.length-1].y);

  for (int i =0; i< points.length; i++) {
    curveVertex(points[i].x, points[i].y);
  }
  curveVertex(points[0].x, points[0].y);
  curveVertex(points[1].x, points[1].y);
  endShape();

  println(frameRate);
}

BianYx

@Benja Sooo cooool,man! Your example totally kicks ass. As you said, its not easy to reproduce,but thankfully,with your help,I think I am not far to achieve it. By the way, the reference pic I attached is actually did with Adobe Illustrator,thus I guess it would be super hard to realize the same exactly effect on Processing.

Anyway, really appreciate your help.

I am going to move forward now!

BianYx

@Benja Sorry to bother you again. Thanks to your help,as you can see below,I am quiet close to my destination now. Just I still want to have three "wabbly-shapes"with different colours,but only apply the transparencies on the two bottommost shapes.For now,everytime the transparent rectangle refreshes,the black circle also gets the transparence effect which is actually unwanted. Could you please help me with it? Even a simple direction could be fine.

int steps = 15;
float xOff, yOff;
PVector[] points;
PGraphics blk;
PGraphics rest;

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

// create an array to store the points
points = new PVector[steps];
for (int i =0; i< points.length; i++) {
points[i] = new PVector();
}
}
void draw() {
float speed = map(mouseX, 0, width, 0.01, 0.3);

// semi transparent rectangle  
fill(255,4);
noStroke();
rect(0, 0, width, height);

// calculate points
float angle = TWO_PI / steps;
for (int i =0; i< points.length; i++) {
float c = i*angle;
float offset=map(noise(xOff, yOff), 0, 0.8, -30, 30);
float radius=height/5+offset;
points[i].x = radius*cos(c);
points[i].y = radius*sin(c);
xOff+=0.5;
}
xOff = 0;
yOff += speed;

// draw points 1
translate(width/2, height/2);
noFill();
strokeWeight(60);
stroke(255,60,220,20);

beginShape();
curveVertex(points[points.length-1].x, points[points.length-1].y);

for (int i =0; i< points.length; i+=2) {
curveVertex(points[i].x, points[i].y);
}
curveVertex(points[0].x, points[0].y);
curveVertex(points[1].x, points[1].y);
endShape();


// draw points 2
noFill();
strokeWeight(60);
stroke(20,220,220,20);

beginShape();
curveVertex(points[points.length-1].x, points[points.length-1].y);

for (int i =0; i< points.length; i+=3) {
curveVertex(points[i].x, points[i].y);
}
curveVertex(points[0].x, points[0].y);
curveVertex(points[1].x, points[1].y);
endShape();

// draw points 3
noFill();
strokeWeight(60);
stroke(0);

beginShape();
curveVertex(points[points.length-1].x, points[points.length-1].y);

for (int i =0; i< points.length; i+=1) {
curveVertex(points[i].x, points[i].y);
}
curveVertex(points[0].x, points[0].y);
curveVertex(points[1].x, points[1].y);
endShape();
println(frameRate);
}

benja

I think you already had the same idea... I see a declaration of PGraphics at the top of your sketch, but you do not use it. Just draw the first two colors to that PGraphics and the semi-transparent rectangle too.

Then use image() to show the PGraphics before drawing the black wabbly-thing above.

int steps = 15;
float xOff, yOff;
PVector[] points;
PGraphics rest;

void setup() {
  size(800, 800);
  rest = createGraphics(width, height);
  // create an array to store the points
  points = new PVector[steps];
  for (int i =0; i< points.length; i++) {
    points[i] = new PVector();
  }
}
void draw() {
  float speed = map(mouseX, 0, width, 0.01, 0.3);

  // semi transparent rectangle  
  rest.beginDraw();
  rest.fill(255, 4);
  rest.noStroke();
  rest.rect(0, 0, width, height);

  // calculate points
  float angle = TWO_PI / steps;
  for (int i =0; i< points.length; i++) {
    float c = i*angle;
    float offset=map(noise(xOff, yOff), 0, 0.8, -30, 30);
    float radius=height/5+offset;
    points[i].x = radius*cos(c);
    points[i].y = 1.2*radius*sin(c);
    xOff+=0.5;
  }
  xOff = 0;
  yOff += speed;

  // draw points 1
  rest.translate(width/2, height/2);
  rest.noFill();
  rest.strokeWeight(60);
  rest.stroke(255, 60, 220, 20);

  rest.beginShape();
  rest.curveVertex(points[points.length-1].x, points[points.length-1].y);

  for (int i =0; i< points.length; i+=2) {
    rest.curveVertex(points[i].x, points[i].y);
  }
  rest.curveVertex(points[0].x, points[0].y);
  rest.curveVertex(points[1].x, points[1].y);
  rest.endShape();


  // draw points 2
  rest.noFill();
  rest.strokeWeight(60);
  rest.stroke(20, 220, 220, 20);

  rest.beginShape();
  rest.curveVertex(points[points.length-1].x, points[points.length-1].y);

  for (int i =0; i< points.length; i+=3) {
    rest.curveVertex(points[i].x, points[i].y);
  }
  rest.curveVertex(points[0].x, points[0].y);
  rest.curveVertex(points[1].x, points[1].y);
  rest.endShape();
  rest.endDraw();

  image(rest, 0, 0);

  translate(width/2, height/2);
  // draw points 3
  noFill();
  strokeWeight(60);
  stroke(0);

  beginShape();
  curveVertex(points[points.length-1].x, points[points.length-1].y);

  for (int i =0; i< points.length; i+=1) {
    curveVertex(points[i].x, points[i].y);
  }
  curveVertex(points[0].x, points[0].y);
  curveVertex(points[1].x, points[1].y);
  endShape();
  println(frameRate);
}

BianYx

Thank you @benja.I've finished this and applied audio volume to control the motion,it works well!