bezier() vs. bezierVertex() drawing help v. 2
in
Programming Questions
•
4 months ago
I need some advice on these two functions for a work I have in mind. I already posted on this and some folks asked to see code, so I have developed a couple of sketches to try to illustrate what I am after.
15" MacBook Pro, 2.4GHz Intel Core i5, OS X v.10.8.3 Mountain Lion,
QuickTime Player v.10.2, Processing v. 1.5.1 and v.2.0b8, Arduino Uno, Nano v.3.
I want to be able to create organic shapes that animate smoothly and have beautiful, smooth curved edges. I also want them to fill fully and "normally".
I do not understand these two functions correctly and am not getting the results I need.
This first sketch uses the bezier() function. I can draw the static shape I want with it. Press the "a" key on the keyboard and one vertex is attached to the mouse pointer. No matter where it is dragged, the curve is continuous and smooth. However instead of the whole shape being filled, I have an unfilled triangle in the center.
// bezierInteractive
// Press the "a" key to toggle between interactive and fixed versions
// this is how I want the curve to behave
// fill isn't right
boolean interactive;
void setup() {
size(1000, 1000);
noFill();
interactive = false;
}
void draw() {
background(255);
fill(255, 255, 0);
if (interactive){
beginShape();
bezier(mouseX, mouseY, mouseX + 100, mouseY-20, 657, 193, 600, 360); // v1, c1, c2, v2 MOUSE X = 480, Y = 80
bezier(600, 360, 543, 527, 237, 650, 160, 520);
bezier(160, 520, 83, 390, mouseX-150, mouseY + 30, mouseX, mouseY);
endShape(CLOSE);
} else {
beginShape();
bezier(400, 80, 500, 60, 657, 193, 600, 360); // v1, c1, c2, v2 MOUSE X = 480, Y = 80
bezier(600, 360, 543, 527, 237, 650, 160, 520);
bezier(160, 520, 83, 390, 250, 110, 400, 80);
endShape(CLOSE);
}
}
void keyPressed() {
if (key == 'a'){
interactive = !interactive;
}
}
Okay, now, here is my attempt to do something similar with the bezierVertex() function. The fill works as expected--no white triangle. I can draw the static shape fine, but when it is attached to the mouse pointer as this sketch shows, I get a sharp point when it is dragged instead of a smooth curve.
// bezierVertexInteractive sketch
void setup() {
size(1000, 1000);
}
void draw() {
background(200);
fill(255, 255, 0);
beginShape();
vertex(mouseX, mouseY);
bezierVertex(500, 60, 657, 193, 600, 360);
bezierVertex(543, 527, 237, 650, 160, 520);
bezierVertex(83, 390, 250, 110, mouseX, mouseY);
endShape();
}
Thanks for helping,
George
15" MacBook Pro, 2.4GHz Intel Core i5, OS X v.10.8.3 Mountain Lion,
QuickTime Player v.10.2, Processing v. 1.5.1 and v.2.0b8, Arduino Uno, Nano v.3.
1