@@ -1390,6 +1390,93 @@ learn:
1390
1390
Ahora observemos una aplicación un poco más realista, con una pantalla de
1391
1391
dimensiones 200 por 200. Notemos el uso de la función createCanvas() para
1392
1392
especificar el tamaño de la ventana.
1393
+ curves-description1 : >-
1394
+ This tutorial is written by J David Eisenberg and ported by Sally Chen. If
1395
+ you see any errors or have comments,
1396
+ curves-description2 : ' please let us know.'
1397
+ curves-description3 : ' This work is licensed under a '
1398
+ curves-description4 : ' Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.'
1399
+ curves-p1x1 : >-
1400
+ This short tutorial introduces you to the three types of curves in p5.js:
1401
+ arcs, spline curves, and Bézier curves.
1402
+ curves-arcs-title : ' Arcs '
1403
+ curves-arcs-p1x1 : >-
1404
+ Arcs are the simplest curves to draw, it is defined an arc as a section of
1405
+ an ellipse. You call the function with these parameters:
1406
+ curves-arcs-p2x1 : ' arc (x, y, w, h, start, stop, [mode])'
1407
+ curves-arcs-p3x1 : >-
1408
+ The first four parameters (x,y,w,h) define the boundary box for your arc and
1409
+ the next two (start, stop), are the start and stop angles for the arc. These
1410
+ angles are given in radians and are measured clockwise with zero degrees
1411
+ pointing east and PI radians equals 180°.
1412
+ curves-spline-curves-title : Spline Curves
1413
+ curves-spline-curves-p1x1 : >-
1414
+ Arcs are fine, but they’re plain. The next function, curve(), lets you draw
1415
+ curves that aren’t necessarily part of an arc. This function draws what is
1416
+ technically called a Rom-Catmull Spline. To draw the curve, you must specify
1417
+ the (x, y) coordinates of the points where the curve starts and ends. You
1418
+ must also specify two control points which determine the direction and
1419
+ amount of curvature. The first two and last two parameters are the control
1420
+ points of the curve. A call to curve() uses these parameters:
1421
+ curves-spline-curves-p2x1 : ' curve (cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);'
1422
+ curves-spline-curves-p3x1 : How do the control points affect the way the curve looks?
1423
+ curves-spline-curves-p4x1 : >-
1424
+ The tangent to the curve at the start point is parallel to the line between
1425
+ control point one and the end of the curve. The tangent to the curve at the
1426
+ end point is parallel to the line between the start point and control point
1427
+ 2.
1428
+ curves-spline-curves-p5x1 : >-
1429
+ The following diagram shows a curve and the points can be dragged to show
1430
+ how the control point affects the curve:
1431
+ curves-continuous-spline-curves-title : Continuous Spline Curves
1432
+ curves-continuous-spline-curves-p1x1 : >-
1433
+ In isolation, a single curve() is not particularly appealing. To draw a
1434
+ continuous curve through several points, you are better off using the
1435
+ curveVertex() function. You can only use this function when you are creating
1436
+ a shape with the beginShape() and endShape() functions.In common usage,
1437
+ people use the first point of the curve as the first control point and the
1438
+ last point of the curve as the last control point.
1439
+ curves-bezier-curves-title : Bézier Curves
1440
+ curves-bezier-curves-p1x1 : >-
1441
+ Though better than arcs, spline curves don’t seem to have those graceful,
1442
+ swooping curves that say “art.” For those, you need to draw Bézier curves
1443
+ with the bezier() function. As with spline curves, the bezier() function has
1444
+ eight parameters, but the order is different. The first two and last two
1445
+ parameters are the start and end points while middle four points are the
1446
+ control points.
1447
+ curves-bezier-curves-p2x1 : ' bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2); '
1448
+ curves-bezier-curves-p3x1 : >-
1449
+ While it is difficult to visualize how the control points affect a curve(),
1450
+ it is slightly easier to see how the control points affect Bézier curves.
1451
+ Imagine two poles and several rubber bands. The poles connect the control
1452
+ points to the endpoints of the curve. A rubber band connects the tops of the
1453
+ poles. Two more rubber bands connect the midpoints of the poles to the
1454
+ midpoint of the first rubber band. One more rubber band connects their
1455
+ midpoints. The center of that last rubber band is tied to the curve. This
1456
+ diagram helps to explain, the points can be moved to change the curve.
1457
+ curves-continuous-bezier-curves-title : ' Continuous Bézier Curves'
1458
+ curves-continuous-bezier-curves-p1x1 : >-
1459
+ Just as curveVertex() allows you to make continuous spline curves,
1460
+ bezierVertex() lets you make continuous Bézier curves. Again, you must be
1461
+ within a beginShape() / endShape() sequence. You must use vertex(startX,
1462
+ startY) to specify the starting anchor point of the curve. Subsequent points
1463
+ are specified with a call to:
1464
+ curves-continuous-bezier-curves-p2x1 : ' bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y);'
1465
+ curves-continuous-bezier-curves-p3x1 : >-
1466
+ Here is a continuous Bézier curve, but it doesn’t join smoothly. In order to
1467
+ make two curves A and B smoothly continuous, the last control point of A,
1468
+ the last point of A, and the first control point of B have to be on a
1469
+ straight line.
1470
+ curves-summary-title : Summary
1471
+ curves-summary-li1 : >-
1472
+ Use arc() when you need a segment of a circle or an ellipse. You can’t make
1473
+ continuous arcs or use them as part of a shape.
1474
+ curves-summary-li2 : >-
1475
+ Use curve() when you need a small curve between two points. Use
1476
+ curveVertex() to make a continuous series of curves as part of a shape.
1477
+ curves-summary-li3 : >-
1478
+ Use bezier() when you need long, smooth curves. Use bezierVertex() to make a
1479
+ continuous series of Bézier curves as part of a shape.
1393
1480
teach-desc : ' Teach a p5 workshop or class, or create teaching materials!'
1394
1481
libraries :
1395
1482
Libraries : Bibliotecas
0 commit comments