PROCESSING

–
CURVAS
FRANKLIN JUÁREZ ROMÁN
 Entre los principales métodos para la creación de
curvas, en el momento de utilizar processing, son
las siguientes:
 Bezier()
 BezierDetail()
 BezierPoint()
 BezierTangent()
 Curve()
 CurveDetail()
 CurvePoint()
 CurveTangent()
 CurveTightness()
Bezier()
 Dibujar una curva Bezier en la pantalla. Estas curvas se definen por
una serie de puntos de anclaje y de 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 medias especifican los puntos de control que definen
la forma de la curva. Curvas de Bézier fueron desarrollados por el
ingeniero francés Pierre Bézier. El uso de la versión de 3D requiere
el procesamiento con P3D.
 SINTAXIS:
 bezier(x1, y1, x2, y2, x3, y3, x4, y4)
 bezier(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
 EJEMPLO
 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);
BezierDetail()
 Establece la resolución a la que la
pantalla Beziers. El valor por defecto es
20. Esta función sólo es útil cuando se
utiliza el procesador de P3D; el render
P2D defecto no utiliza esta información.
 SINTAXIS:
 bezierDetail(detail)
 PARÁMETROS
 Detail int: resolution of the curves
EJEMPLO:
 // Move the mouse left and right to see the
detail change
 void setup() {
size(100, 100, P3D);
noFill();
}
 void draw() {
background(204);
int d = int(map(mouseX, 0, 100, 1, 20));
bezierDetail(d);
bezier(85, 20, 10, 10, 90, 90, 15, 80);
}
BezierPoint()
 Evalúa el Bezier en el punto t para los puntos a, b, c,
d. El parámetro t varía entre 0 y 1, A y D son puntos
de la curva, y b y c son los puntos de control. Esto se
puede hacer una vez con las coordenadas x y una
segunda vez con las coordenadas Y para obtener
la ubicación de una curva de Bezier en t.
 SINTAXIS
 bezierPoint(a,b,c,d,t)
 PARÁMETROS
 a float: coordinate of first point on the curve
 b float: coordinate of first control point
 c float: coordinate of second control point
 d float: coordinate of second point on the curve
 T float: value between 0 and 1
EJEMPLO:
noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);
fill(255);
int steps = 10;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = bezierPoint(85, 10, 90, 15, t);
float y = bezierPoint(20, 10, 90, 80, t);
ellipse(x, y, 5, 5);
}
BezierTangent()
 Calcula la tangente de un punto en una curva
Bezier. Hay una buena definición de la tangente
en Wikipedia.
 SINTAXIS:
 bezierTangent(a,b,c,d,t)
 PARÁMETROS:
 a float: coordinate of first point on the curve
 B float: coordinate of first control point
 c float: coordinate of second control point
 D float: coordinate of second point on the curve
 t float: value between 0 and 1
 EJEMPLO:
noFill();
bezier(85, 20, 10, 10, 90, 90, 15, 80);
stroke(255, 102, 0);
int steps = 16;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = bezierPoint(85, 10, 90, 15, t);
float y = bezierPoint(20, 10, 90, 80, t);
float tx = bezierTangent(85, 10, 90, 15, t);
float ty = bezierTangent(20, 10, 90, 80, t);
float a = atan2(ty, tx);
a -= HALF_PI;
line(x, y, cos(a)*8 + x, sin(a)*8 + y);
}
Curve()
 Dibuja una línea curva en la pantalla. El primero y
segundo parámetros especifican el punto de control de
inicio y los dos últimos parámetros especifican el punto
de control final.
 Los parámetros intermedios especifican el inicio y
parada de la curva. Curvas más largas pueden ser
creados por poner una serie de funciones curva () juntas
o usando curveVertex ().
 Una función adicional llamada curva de estanqueidad
() proporciona un control de la calidad visual de la
curva. La función de curva () es una implementación de
splines Catmull-Rom.
 El uso de la versión de 3D requiere el procesamiento
con P3D (véase la referencia para el Medio Ambiente
para obtener más información).
 SINTAXIS:
 curve(x1, y1, x2, y2, x3, y3, x4, y4)
 curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)
 PARÁMETROS:
 x1 float: coordinates for the beginning control point
 y1 float: coordinates for the beginning control point
 x2 float: coordinates for the first point
 y2 float: coordinates for the first point
 x3 float: coordinates for the second point
 y3 float: coordinates for the second point
 x4 float: coordinates for the ending control point
 y4 float: coordinates for the ending control point
 z1 float: coordinates for the beginning control point
 z2 float: coordinates for the first point
 z3 float: coordinates for the second point
 z4 float: coordinates for the ending control point
EJEMPLO:
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);
CurveDetail()

 Establece la resolución a la que muestran

las curvas. El valor por defecto es 20 Esta
función sólo es útil cuando se utiliza el
procesador de P3D como el renderizador
P2D defecto no utiliza esta información.
 SINTAXIS:
 curveDetail(detail)
 PARÁMETROS:
 Detail int:resolution of the curves
EJEMPLO:
 void setup() {
size(100, 100, P3D);
noFill();
noLoop();
}
 void draw() {
curveDetail(1);
drawCurves(-15);
stroke(126);
curveDetail(2);
drawCurves(0);
stroke(255);
curveDetail(4);
drawCurves(15);
}
 void drawCurves(float y) {
curve( 5, 28+y, 5, 28+y, 73, 26+y, 73, 63+y);
curve( 5, 28+y, 73, 26+y, 73, 63+y, 15, 67+y);
curve(73, 26+y, 73, 63+y, 15, 67+y, 15, 67+y);}
CurvePoint()
 Evalúa la curva en el punto t para los puntos a, b, c, d. El
parámetro t puede variar de 0 (el comienzo de la curva) y
1 (el extremo de la curva). A y D son puntos de la curva, y
b y c son los puntos de control.
 Esto puede ser usado una vez con las coordenadas x y una
segunda vez con las coordenadas Y para obtener la
ubicación de una curva en t.
 SINTAXIS:
 curvePoint(a,b,c,d,t)
 PARÁMETROS:
 a float: coordinate of first point on the curve
 b float: coordinate of second point on the curve
 c float: coordinate of third point on the curve
 d float: coordinate of fourth point on the curve
 t float: value between 0 and 1
EJEMPLO:
noFill();
curve(5, 26, 5, 26, 73, 24, 73, 61);
curve(5, 26, 73, 24, 73, 61, 15, 65);
fill(255);
ellipseMode(CENTER);
int steps = 6;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = curvePoint(5, 5, 73, 73, t);
float y = curvePoint(26, 26, 24, 61, t);
ellipse(x, y, 5, 5);
x = curvePoint(5, 73, 73, 15, t);
y = curvePoint(26, 24, 61, 65, t);
ellipse(x, y, 5, 5);
}
CurveTangent()
 Calcula la tangente de un punto sobre una
curva. Hay una buena definición de tangente
en Wikipedia.
 SINTAXIS:
 curveTangent(a,b,c,d,t)
 PARÁMETROS:
 a float: coordinate of first point on the curve
 b float: coordinate of first control point
 C float: coordinate of second control point
 d float: coordinate of second point on the curve
 t float: value between 0 and 1
EJEMPLO:
noFill();
curve(5, 26, 73, 24, 73, 61, 15, 65);
int steps = 6;
for (int i = 0; i <= steps; i++) {
float t = i / float(steps);
float x = curvePoint(5, 73, 73, 15, t);
float y = curvePoint(26, 24, 61, 65, t);
//ellipse(x, y, 5, 5);
float tx = curveTangent(5, 73, 73, 15, t);
float ty = curveTangent(26, 24, 61, 65, t);
float a = atan2(ty, tx);
a -= PI/2.0;
line(x, y, cos(a)*8 + x, sin(a)*8 + y);
}
CurveTightness()
 Modifica la calidad de las formas creadas con la
curva () y curveVertex ().
 La estrechez parámetro determina la curva se ajusta
a los puntos de vértice.
 El valor 0,0 es el valor por defecto de estanqueidad
(este valor define las curvas para ser splines Catmull-
Rom) y el valor 1.0 se conecta todos los puntos con
líneas rectas.
 Los valores dentro del rango de -5,0 y 5,0 se deforman
las curvas, pero les dejará reconocible y como
valores aumentan en magnitud, que continuarán a
deformarse.
 SINTAXIS:
 curveTightness(tightness)

 PARÁMETROS:
 tightness float: amount of deformation from
the original vertices
EJEMPLO:
// Move the mouse left and right to see the curve change
 void setup() {
size(100, 100);
noFill();
}
 void draw() {
background(204);
float t = map(mouseX, 0, width, -5, 5);
curveTightness(t);
beginShape();
curveVertex(10, 26);
curveVertex(10, 26);
curveVertex(83, 24);
curveVertex(83, 61);
curveVertex(25, 65);
curveVertex(25, 65);
endShape(); }