PRACTICAS EN PROCESSING

TRAZOS DE LINEAS CURVAS.

CURVES Las curvas en Processing: arcos,
curvas de spline y curvas de Bézier.
noFill();
stroke(255, 102, 0);
curve(5, 26, 5, 26, 73, 24, 73, 61);
stroke(0);
curve(5, 26, 73, 24, 73, 61, 15, 65);
stroke(255, 102, 0);
curve(73, 24, 73, 61, 15, 65, 15, 65);

Los arcos son las curvas más simples

para dibujar. El procesamiento define
un arco como una sección de una
Arcs elipse. Llama a la función con estos
parámetros:

arc(x, y, width, height, start,

stop);

void setup() {
size(300, 200);
background(255);
smooth();

rectMode(CENTER); // show bounding boxes

stroke(128);
rect(35, 35, 50, 50);
rect(105, 35, 50, 50);
rect(175, 35, 50, 50);
rect(105, 105, 100, 50);

stroke(0);
arc(35, 35, 50, 50, 0, PI / 2.0); // lower quarter circle
arc(105, 35, 50, 50, -PI, 0); // upper half of circle
arc(175, 35, 50, 50, -PI / 6, PI / 6); // 60 degrees
arc(105, 105, 100, 50, PI / 2, 3 * PI / 2); // 180
degrees
}
 Los arcos están bien, pero son
simples. La siguiente función, curve
(), te permite dibujar curvas que no
son necesariamente parte de un arco.
Esta función dibuja lo que
técnicamente se llama un Spline Rom-
Catmull. Para dibujar la curva, debe
especificar las coordenadas (x, y)
de los puntos donde comienza y
termina la curva. También debe
especificar dos puntos de control
Curvas de spline que determinan la dirección y la
cantidad de curvatura. Una llamada a
curve () usa estos parámetros:

curve(cpx1, cpy1, x1, y1, x2, y2,

cpx2, cpy2);

cpx1, cpy1 Coordenadas del primer

punto de control
x1, y1 Coordenadas del punto de
inicio de la curva
x2, y2 Coordenadas del punto final
de la curva
cpx2, cpy2 Coordenadas del segundo
punto de control

Aquí hay un ejemplo que muestra una

curva (). Los puntos de control se
muestran en rojo y los puntos de
curva en azul.
void setup() {
size(200, 200);
background(255);
smooth();
stroke(0);
curve(40, 40, 80, 60, 100, 100, 60, 120);
noStroke();
fill(255, 0, 0);
ellipse(40, 40, 3, 3);
fill(0, 0, 255, 192);
ellipse(100, 100, 3, 3);
ellipse(80, 60, 3, 3);
fill(255, 0, 0);
ellipse(60, 120, 3, 3);
}
 En forma aislada, una sola curva ()
no es particularmente atractiva.
Para dibujar una curva continua a
través de varios puntos, es mejor
usar la función curveVertex (). Solo
puede usar esta función cuando está
creando una forma con las funciones
Curvas continuas de splne beginShape () y endShape ().

Aquí hay una curva que conecta los

puntos (40, 40), (80, 60), (100,
100), (60, 120) y (50, 150). En el
uso común, las personas usan el
primer punto de la curva como el
primer punto de control y el último
punto de la curva como el último
punto de control.

int[] coords = {
40, 40, 80, 60, 100, 100, 60, 120, 50, 150
};

void setup() {
size(200, 200);
background(255);
smooth();

noFill();
stroke(0);
beginShape();
curveVertex(40, 40); // the first control point
curveVertex(40, 40); // is also the start point of curve
curveVertex(80, 60);
curveVertex(100, 100);
curveVertex(60, 120);
curveVertex(50, 150); // the last point of curve
curveVertex(50, 150); // is also the last control point
endShape();

// Use the array to keep the code shorter;

// you already know how to draw ellipses!
fill(255, 0, 0);
noStroke();
for (int i = 0; i < coords.length; i += 2) {
ellipse(coords[i], coords[i + 1], 3, 3);
}
}
Dibuja una curva de Bezier en la pantalla. Estas curvas
están definidas por una serie de puntos de anclaje y
control. Los dos primeros parámetros especifican el primer
punto de anclaje y los dos últimos parámetros especifican
el otro punto de anclaje. Los parámetros intermedios
especifican los puntos de control que definen la forma de
la curva. Las curvas de Bezier fueron desarrolladas por el
ingeniero francés Pierre Bezier. El uso de la versión 3D
requiere renderizado con P3D (consulte la referencia del
entorno para obtener más información).

noFill();
stroke(255, 102, 0);
line(85, 20, 10, 10);
line(90, 90, 15, 80);
stroke(0, 0, 0);
bezier(85, 20, 10, 10, 90, 90, 15, 80);
noFill();
stroke(255, 102, 0);
line(30, 20, 80, 5);
line(80, 75, 30, 75);
stroke(0, 0, 0);
bezier(30, 20, 80, 5, 80, 75, 30, 75);
Syntax
bezier(x1, y1, x2, y2, x3, y3, x4, y4)
bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
Parametros
x1 float: coordenadas para el primer punto de anclaje
y1 float: coordenadas para el primer punto de anclaje
z1 float: coordenadas para el primer punto de anclaje
x2 float: coordenadas para el primer punto de control
y2 float: coordenadas para el primer punto de control
z2 float: coordenadas para el primer punto de control
x3 float: coordenadas para el segundo punto de control
y3 float: coordenadas para el segundo punto de control
z3 float: coordenadas para el segundo punto de control
x4 float: coordenadas para el segundo punto de anclaje
y4 float: coordenadas para el segundo punto de anclaje
z4 float: coordenadas para el segundo punto de anclaje
Aunque son mejores que los arcos,
las curvas spline no parecen tener
esas curvas elegantes y vertiginosas
que dicen "arte". Para esos, debe
dibujar curvas Bézier con la función
bezier (). Al igual que con las
curvas spline, la función bezier ()
 Curvas Bézier tiene ocho parámetros, pero el orden
es diferente:

bezier (x1, y1, cpx1, cpy1, cpx2,

cpy2, x2, y2);

x1, y1 Coordenadas del punto de

inicio de la curva
cpx1, cpy1 Coordenadas del primer
punto de control
cpx2, cpy2 Coordenadas del segundo
punto de control
x2, y2 Coordenadas del punto final
de la curva

Aquí hay un programa que muestra una

curva de Bézier y sus puntos de
control.
void setup() {
size(150, 150);
background(255);
ellipse(50, 75, 5, 5); // endpoints of curve
ellipse(100, 75, 5, 5);
fill(255, 0, 0);
ellipse(25, 25, 5, 5); // control points
ellipse(125, 25, 5, 5);
noFill();
stroke(0);
bezier(50, 75, 25, 25, 125, 25, 100, 75);
}
Al igual que curveVertex () le
permite hacer curvas continuas de
spline, bezierVertex () le permite
hacer curvas Bézier continuas.
Nuevamente, debe estar dentro de una
secuencia beginShape () / endShape
(). Debe usar vértice (startX,
startY) para especificar el punto de
Curvas continuas de inicio de la curva. Los puntos
Bézier posteriores se especifican con una
llamada a:

bezierVertex (cpx1, cpy1, cpx2,

cpy2, x, y);

cpx1, cpy1 Coordenadas del primer

punto de control
 cpx2, cpy2 Coordenadas del segundo
punto de control
x, y El siguiente punto en la curva

Entonces, para dibujar el ejemplo

anterior usando bezierVertex (),
haría esto:

void setup() {
size(150, 150);
background(255);
smooth();
// Don't show where control points are
noFill();
stroke(0);
beginShape();
vertex(50, 75); // first point
bezierVertex(25, 25, 125, 25, 100, 75);
endShape();
}

Aquí hay una curva size(200, 200);

Bézier continua, pero background(255);
no se une suavemente. noFill();
El diagrama muestra beginShape();
los puntos de vertex(30, 70); // first point
control, pero solo el bezierVertex(25, 25, 100, 50, 50,
código relevante para 100);
dibujar la curva está bezierVertex(50, 140, 75, 140, 120,
aquí. 120);
endShape();

Para que dos curvas A size(200, 200);

y B sean continuas, background(255);
el último punto de beginShape();
control de A, el vertex(30, 70); // first point
último punto de A y bezierVertex(25, 25, 100, 50, 50,
el primer punto de 100);
control de B deben bezierVertex(20, 130, 75, 140, 120,
estar en línea recta. 120);
Aquí hay un ejemplo endShape();
que cumple con esas
condiciones. Los
puntos que están en
una línea se muestran
en negrita.
Use arc () cuando necesite un segmento de un círculo o una
elipse. No puede hacer arcos continuos o usarlos como parte
de una forma.
Use curve () cuando necesite una pequeña curva entre
dos puntos. Use curveVertex () para hacer una serie
continua de curvas como parte de una forma.
Use bezier () cuando necesite curvas largas y suaves.
Use bezierVertex () para hacer una serie continua de curvas
Bézier como parte de una forma.

Bezier

Los primeros dos parámetros para la función bezier ()

especifican el primer punto de la curva y los dos últimos
parámetros especifican el último punto. Los parámetros
intermedios establecen los puntos de control que definen la
forma de la curva.

void setup() {
size(640, 360);
stroke(255);
noFill();
}

void draw() {
background(0);
for (int i = 0; i < 200; i += 20) {
bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-
(i/16.0), 300+(i/8.0));
}
}