Drawing the human silhouette with bezier point in Processing - processing

Question

I'm new here ... I need help with an issue Bezier Point in Processing, I apologize in advance for the English, I'm from Brazil, I write with the help of Google Translator ...
I tried to draw the "silhouette" of the human body, ie not need to have defined the face traits, etc. (I know this is complicated), only need the face outlines, body, finally simpler ...
The problem is that I would do it in 3D, so you can rotate, zoom effects, etc ...
Below we have two programs, one in 2D, which would be near what I need to do.
In the second program as a sketch do it in 3D, but could not develop the idea of ​​how to make the mesh of body contours, that's what I need help.
Could someone give some hint of any algorithm that can be translated into Processing, to draw this fabric of the human body (silhouette)?
I thank the attention, I apologize if the text was a little long, but I thought I should try to explain the best.
int neckThick, headShape, shoulderSize, armSize, hipSize, lowerSize, upperSize, thighSize, handSize, legSize, footSize;
void setup() {
size(displayWidth, displayHeight, P3D);
smooth();
strokeWeight(2);
noFill();
stroke(10,50,255,80);
atualizaPontos();
}
void draw() {
background(255);
desenhaCorpo();;
}
void atualizaPontos(){
neckThick = 3;
headShape = 0;
shoulderSize = 5;
armSize = -1;
hipSize = -3;
lowerSize = -5;
upperSize = 2;
thighSize = -5;
handSize = 15;
legSize = 0;
footSize = 14;
}
void desenhaCorpo() {
head(headShape);
neck(neckThick);
shoulders(shoulderSize);
upperArms(armSize);
hips(hipSize);
lowerBody(lowerSize);
upperBody(upperSize);
thighs(thighSize);
kneecaps();
hands(handSize);
legs(legSize);
feet(footSize);
}
void head(int headSize) {
bezier(300, 70, 308, 30, 372, 30, 385, 70); //scalp
bezier(300, 70, 300-headSize, 120, 315-headSize, 135, 320, 140); //side
bezier(385, 70, 385+headSize, 120, 370+headSize, 135, 365, 140); //side
bezier(320, 140, 340, 155, 345, 155, 365, 140); //chin
}
void neck(int neckWidth) {
bezier(320, 140, 325-neckWidth, 170, 320-neckWidth, 180, 315, 180); //left neck
bezier(365, 140, 355+neckWidth, 170, 365+neckWidth, 180, 365, 180); //right neck
}
void shoulders(int shoulderWidth) {
bezier(210, 200, 305, 190-shoulderWidth, 310, 185-shoulderWidth, 315, 180); //left trapezius
bezier(365, 180, 370, 190-shoulderWidth, 380, 195-shoulderWidth, 480, 200); //right trapezius
bezier(210, 200, 205, 205, 205, 205, 200, 220); // left shoulder
bezier(480, 200, 485, 205, 485, 205, 490, 220); // right shoulder
}
void upperBody(int upperWidth) {
bezier(240, 250, 245-upperWidth, 300+upperWidth, 250-upperWidth, 325+upperWidth, 275, 325); //left pectoral
bezier(450, 250, 450+upperWidth, 300+upperWidth, 430+upperWidth, 325+upperWidth, 415, 325); //right pectoral
bezier(330, 300, 325, 320, 320, 320, 300, 325); //inner boob
bezier(360, 300, 370, 320, 375, 320, 390, 325); //inner boob
}
void lowerBody(int lowerWidth) {
bezier (260, 320, 260-lowerWidth, 350+lowerWidth/2, 270-lowerWidth, 380+lowerWidth/2, 265, 415); // left side
bezier (430, 320, 430+lowerWidth, 350+lowerWidth/2, 420+lowerWidth, 380+lowerWidth/2, 425, 415); // right side
}
void hips(int hipWidth) {
bezier(265, 410, 265-hipWidth, 430, 255-hipWidth, 435, 260, 450); //left hip
bezier(425, 410, 425+hipWidth, 430, 435+hipWidth, 435, 430, 450); //left hip
}
void thighs(int thighWidth) {
bezier(260, 450, 240-thighWidth, 500, 250-thighWidth, 525, 270, 650); //left thigh side
bezier(335, 480, 340+thighWidth, 500, 330+thighWidth, 525, 320, 650); //right thigh side
bezier(430, 450, 445+thighWidth, 500, 440+thighWidth, 525, 420, 650); //left thigh side
bezier(360, 480, 355-thighWidth, 500, 355-thighWidth, 525, 370, 650); //right thigh side
bezier(335, 480, 340, 483, 340, 483, 360, 480);
}
void kneecaps() {
bezier(270, 650, 270, 655, 265, 655, 270, 690); // left kneecap side
bezier(320, 650, 320, 655, 325, 655, 320, 690); // right kneecap side
bezier(420, 650, 420, 655, 425, 655, 420, 690); // left kneecap side
bezier(370, 650, 370, 655, 365, 655, 370, 690); // right kneecap side
}
void upperArms(int armWidth) {
bezier(200, 220, 190-armWidth, 300, 200-armWidth, 310, 200, 350); // left forearm side
bezier(200, 350, 180-armWidth, 425, 200-armWidth, 500, 200, 500); // left arm side
bezier(240, 250, 240+armWidth, 300, 235+armWidth, 310, 235, 350); // left forearm inside
bezier(235, 350, 240+armWidth, 425, 230+armWidth, 450, 225, 500); // left arm inside
bezier(490, 220, 500+armWidth, 300, 490+armWidth, 310, 490, 350); // right forearm
bezier(490, 350, 510+armWidth, 425, 490+armWidth, 500, 490, 500); // right arm
bezier(450, 250, 450-armWidth, 300, 455-armWidth, 310, 455, 350); // right forearm inside
bezier(455, 350, 460-armWidth, 425, 455-armWidth, 450, 465, 500); // right arm inside
}
void hands(int handWidth) {
bezier(200, 500, 210-handWidth, 530, 175-handWidth, 560, 220, 575); // left hand
bezier(220, 575, 225+handWidth, 575, 220+handWidth, 560, 225, 500); // left hand
bezier(490, 500, 480+handWidth, 530, 500+handWidth, 560, 490, 575); // right hand
bezier(465, 500, 460-handWidth, 575, 455-handWidth, 560, 490, 575); // right hand
}
void legs(int legWidth) {
bezier(270, 690, 255-legWidth, 775, 265-legWidth, 800, 275, 850); //left calf
bezier(320, 690, 320+legWidth, 775, 300+legWidth, 800, 300, 850); //left calf
bezier(420, 690, 435+legWidth, 775, 415+legWidth, 800, 405, 850); //right calf
bezier(370, 690, 370-legWidth, 775, 380-legWidth, 800, 380, 850); //left calf
}
void feet(int footWidth) {
bezier(275, 850, 250-footWidth, 900+footWidth, 280-footWidth, 900+footWidth, 300, 850); // left foot
bezier(405, 850, 430+footWidth, 900+footWidth, 400+footWidth, 900+footWidth, 380, 850); // left foot
}
Second program - got in the Forum Processing - Requires proscenium Library
import remixlab.proscene.*;
Scene scene;
float px[], py[], mesh[][][];
void setup() {
size(displayWidth, displayHeight, P3D);
smooth(); //Suavição de Contorno
lights(); //Inicia Luzes no ambiente
//Inicia ambiente para Cena
scene = new Scene(this);
scene.setAxesVisualHint(false);
scene.setGridVisualHint(false);
scene.showAll();
//Cria Matriz para a malha
px = new float[40];
py = new float[40];
float t = 0;
for(int i = 0; i < px.length; i++) {
px[i] = bezierPoint(50, 130, 130, 50, t);
py[i] = bezierPoint(450, 350, 150, 50, t);
//px[i] = bezierPoint(300, 308, 370, 300, t);
//py[i] = bezierPoint(70, 30, 30, 70, t);
t += (1.0/(float)(px.length-1));
ellipse(px[i], py[i], 5, 5);
println(t);
}
//Cria Malha
mesh = createMesh(px,py,20, -60,60);
//mesh = createMesh(px,py,170, -360,360);
scene.startAnimation();
}
void draw() {
background(0);
ambientLight(128, 128, 128);
directionalLight(255, 255, 255, 0, 1, -100);
//head(-3);
stroke(255);
//noStroke();
//fill(255,120,0);
drawMesh(mesh);
}
void head(int headSize) {
fill(255);
bezier(300, 70, 30, 308, 30, 30, 372, 30, 30, 385, 70, 30); //scalp
bezier(300, 70, 30, 300-headSize, 120, 30, 315-headSize, 135, 30, 320, 140, 30); //side
bezier(385, 70, 30, 385+headSize, 120, 30, 370+headSize, 135, 30, 365, 140, 30); //side
bezier(320, 140, 30, 340, 155, 30, 345, 155, 30, 365, 140, 30); //chin
}
//Desenha Malha
void drawMesh(float mesh[][][]) {
//println(mesh.length+" "+mesh[0].length+" "+mesh[0][0].length);
for(int i = 0; i < mesh.length-1; i++) {
beginShape(QUAD_STRIP);
for(int j = 0; j < mesh[0].length; j++) {
vertex(mesh[i][j][0], mesh[i][j][1], mesh[i][j][2]);
vertex(mesh[i+1][j][0], mesh[i+1][j][1], mesh[i+1][j][2]);
}
endShape();
}
}
//Cria malha
float [][][] createMesh(float px[],float py[],int numrot, float startDeg,float endDeg) {
float deg, x, z;
double cosval, sinval, tmp1, tmp2;
float [][][] mesh = new float[numrot][px.length][3];
endDeg -= startDeg;
for(int i = 0; i < numrot; i++) {
deg = radians(startDeg + (endDeg/(float)(numrot-1)) * (float)i);
for(int j = 0; j < px.length; j++) {
x = px[j];
z = 0;
cosval = Math.cos(deg);
sinval = Math.sin(deg);
tmp1 = x * cosval - z * sinval;
tmp2 = x * sinval + z * cosval;
mesh[i][j][0] = (float) tmp1;
mesh[i][j][1] = py[j];
mesh[i][j][2] = (float) tmp2;
}
}
return mesh;
}
Thank you so much

Answer 1

Instead of trying to hammer code you found on the internet into submission, I highly recommend you start a little smaller and try to focus on one small thing at a time.
Instead of trying to get your whole figure working, focus only on the head, or only on one line of the head.
The bezier() function can either take 2D coordinates like you're currently using, or it can take 3D coordinates by simply providing a Z value for each coordinate. More info can be found in the reference.
Think about it this way: right now you're using 3D coordinates, but the Z value for every point is 0. Go through each line and think about what the Z value should be for each coordinate.
This is going to be a pretty manual process, but it's going to save you a ton of headaches over trying to get random code to work. Good luck.

Answer 2

I've actually tried to make simpler, but it seems that more complex shapes in 3D do not seem to give the effect you would like to get with Bezier Curve.
Another possibility would be to work with Bezier Point, (but then changes everything in the form of fill) the reference did not see anything that could direct me to a more complicated task like this ...
But thanks for the tips, I will keep searching about, to see how best to do ...
Below is a snippet of code that was trying to adapt, but to see the result, I used the proscene library for easy viewing, the way I have to do too manual, because in this example below, must return the mouse scrool to see the face, but without the effect of 3d ...
import remixlab.proscene.*;
Scene scene;
void setup() {
size(800, 600, P3D);
noFill();
stroke(255);
background(0);
head(-3);
scene = new Scene(this);
scene.setAxesVisualHint(false);
scene.setGridVisualHint(false);
//scene.showAll();
}
void draw() {
//background(0);
//head(-3);
}
void mousePressed(){
background(0);
head(-3);
}
void head(int headSize) {
//fill(255);
bezier(300, 70, 30, 308, 30, 30, 372, 30, 30, 385, 70, 30); //scalp
bezier(300, 70, 30, 300-headSize, 120, 30, 315-headSize, 135, 30, 320, 140, 30); //side
bezier(385, 70, 30, 385+headSize, 120, 30, 370+headSize, 135, 30, 365, 140, 30); //side
bezier(320, 140, 30, 340, 155, 30, 345, 155, 30, 365, 140, 30); //chin
}

Answer 3

I'm leaving the solution I found here, because it can be helpful to others ...
I was "another way" to "build" the human being, I used MakeHuman Application http://www.makehuman.org/
The model can export to .stl Using toxilibs library, you can download and view the image from the .stl file
To zoom and rotation, used the peaseCam library ...
Below is the code to run must have a file in the folder .stl type of course ...
Note: It can be enhanced with 3D software like Blender for example, but this is another story ... well, what to do from the this, will the goals you want ...
Thank you,
Code:
import toxi.geom.*;
import toxi.geom.mesh.*;
import toxi.processing.*;
import peasy.*;
TriangleMesh mesh;
ToxiclibsSupport gfx;
PeasyCam cam;
int zoom = 30;
void setup() {
size(displayWidth, displayHeight, P3D);
mesh = (TriangleMesh)new STLReader().loadBinary(sketchPath("Exemplo.stl"),STLReader.TRIANGLEMESH);
gfx = new ToxiclibsSupport(this);
cam = new PeasyCam(this, 800);
cam.setMinimumDistance(10);
cam.setMaximumDistance(800);
noStroke();
}
void draw() {
background(0);
rotateX(-.2);
rotateY(-.2);
pushMatrix();
translate(0,0,20);
directionalLight(192, 168, 128,0, -1000, -0.5);
directionalLight(255, 64, 0, 0.5f, -0.5f, -0.1f);
scale(zoom);
gfx.mesh(mesh,false);
popMatrix();
}
void keyPressed(){
if (key==CODED) {
if (keyCode == UP) zoom++;
else if(keyCode == DOWN) zoom--;
}
}
Image