You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/data/en.yml
+50Lines changed: 50 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -1209,6 +1209,56 @@ learn:
1209
1209
Now let's look at what some code with shapes in more complete form, with
1210
1210
canvas dimensions of 200 by 200. Note the use of the createCanvas() function
1211
1211
to specify the width and height of the canvas.
1212
+
curves-description1: 'This tutorial is written by J David Eisenberg and ported by Sally Chen. If you see any errors or have comments, '
1213
+
curves-description2: ' please let us know.'
1214
+
curves-description3: 'This work is licensed under a '
1215
+
curves-description4: ' Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.'
1216
+
curves-p1x1: 'This short tutorial introduces you to the three types of curves in p5.js: arcs, spline curves, and Bézier curves.'
1217
+
curves-arcs-title: ' Arcs '
1218
+
curves-arcs-p1x1: 'Arcs are the simplest curves to draw, it is defined an arc as a section of an ellipse. You call the function with these parameters:'
1219
+
curves-arcs-p2x1: 'arc (x, y, w, h, start, stop, [mode])'
1220
+
curves-arcs-p3x1: >-
1221
+
The first four parameters (x,y,w,h) define the boundary box for your arc and the next two (start, stop), are the start and stop angles for the arc. These angles are given in radians
1222
+
and are measured clockwise with zero degrees pointing east and PI radians equals 180°.
1223
+
curves-spline-curves-title: 'Spline Curves'
1224
+
curves-spline-curves-p1x1: >-
1225
+
Arcs are fine, but they’re plain. The next function, curve(), lets you draw curves that aren’t necessarily part of an arc. This function draws what is technically called a Rom-Catmull Spline.
1226
+
To draw the curve, you must specify the (x, y) coordinates of the points where the curve starts and ends. You must also specify two control points which determine the direction and amount of curvature.
1227
+
The first two and last two parameters are the control points of the curve.
curves-spline-curves-p3x1: 'How do the control points affect the way the curve looks?'
1231
+
curves-spline-curves-p4x1: 'The tangent to the curve at the start point is parallel to the line between control point one and the end of the curve. The tangent to the curve at the end point is parallel to the line between the start point and control point 2.'
1232
+
curves-spline-curves-p5x1: 'The following diagram shows a curve and the points can be dragged to show how the control point affects the curve:'
In isolation, a single curve() is not particularly appealing. To draw a continuous curve through several points, you are better off using the curveVertex() function.
1236
+
You can only use this function when you are creating a shape with the beginShape() and endShape() functions.In common usage, people use the first point of the curve
1237
+
as the first control point and the last point of the curve as the last control point.
1238
+
curves-bezier-curves-title: 'Bézier Curves'
1239
+
curves-bezier-curves-p1x1: >-
1240
+
Though better than arcs, spline curves don’t seem to have those graceful, swooping curves that say “art.” For those, you need to draw Bézier curves with the bezier() function.
1241
+
As with spline curves, the bezier() function has eight parameters, but the order is different. The first two and last two parameters are the start and end points while middle
While it is difficult to visualize how the control points affect a curve(), it is slightly easier to see how the control points affect Bézier curves.
1246
+
Imagine two poles and several rubber bands. The poles connect the control points to the endpoints of the curve. A rubber band connects the tops of the poles.
1247
+
Two more rubber bands connect the midpoints of the poles to the midpoint of the first rubber band. One more rubber band connects their midpoints.
1248
+
The center of that last rubber band is tied to the curve. This diagram helps to explain, the points can be moved to change the curve.
Here is a continuous Bézier curve, but it doesn’t join smoothly. In order to make two curves A and B smoothly continuous, the last control point of A,
1257
+
the last point of A, and the first control point of B have to be on a straight line.
1258
+
curves-summary-title: 'Summary'
1259
+
curves-summary-li1: 'Use arc() when you need a segment of a circle or an ellipse. You can’t make continuous arcs or use them as part of a shape.'
1260
+
curves-summary-li2: 'Use curve() when you need a small curve between two points. Use curveVertex() to make a continuous series of curves as part of a shape.'
1261
+
curves-summary-li3: 'Use bezier() when you need long, smooth curves. Use bezierVertex() to make a continuous series of Bézier curves as part of a shape.'
1212
1262
teach-desc: 'Teach a p5 workshop or class, or create teaching materials!'
Copy file name to clipboardExpand all lines: src/templates/pages/learn/curves.hbs
+28-42Lines changed: 28 additions & 42 deletions
Original file line number
Diff line number
Diff line change
@@ -12,30 +12,29 @@ slug: learn/
12
12
<main >
13
13
14
14
<divclass="attribution">
15
-
This tutorial is written by J David Eisenberg and ported by Sally Chen. If you see any errors or have comments, <ahref="https://github.com/processing/p5.js/issues"> please let us know.</a>
16
-
This work is licensed under a <ahref="https://creativecommons.org/licenses/by-nc-sa/4.0/"> Creative Commons Attribution-NonCommercial-ShareAlinke 4.0 International License.</a>
This short tutorial introduces you to the three types of curves in p5.js: arcs, spline curves, and Bézier curves.
23
+
{{#i18n"curves-p1x1"}}{{/i18n}}
24
24
</p>
25
25
26
-
<h2> Arcs </h2>
26
+
<h2>{{#i18n"curves-arcs-title"}}{{/i18n}}</h2>
27
27
28
28
<p>
29
-
Arcs are the simplest curves to draw, it is defined an arc as a section of an ellipse. You call the function with these parameters:
29
+
{{#i18n"curves-arcs-p1x1"}}{{/i18n}}
30
30
</p>
31
31
32
32
<p>
33
-
arc (x, y, w, h, start, stop, [mode])
33
+
{{#i18n"curves-arcs-p2x1"}}{{/i18n}}
34
34
</p>
35
35
36
36
<p>
37
-
The first four parameters (x,y,w,h) define the boundary box for your arc and the next two (start, stop), are the start and stop angles for the arc. These angles are given in radians
38
-
and are measured clockwise with zero degrees pointing east and PI radians equals 180°.
37
+
{{#i18n"curves-arcs-p3x1"}}{{/i18n}}
39
38
</p>
40
39
41
40
<!-- this script only needs to get added once even if there are multiple widget instances -->
Arcs are fine, but they’re plain. The next function, curve(), lets you draw curves that aren’t necessarily part of an arc. This function draws what is technically called a Rom-Catmull Spline.
60
-
To draw the curve, you must specify the (x, y) coordinates of the points where the curve starts and ends. You must also specify two control points which determine the direction and amount of curvature.
61
-
The first two and last two parameters are the control points of the curve.
62
-
A call to curve() uses these parameters:
58
+
{{#i18n"curves-spline-curves-p1x1"}}{{/i18n}}
63
59
</p>
64
60
65
61
<p>
66
-
curve (cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);
62
+
{{#i18n"curves-spline-curves-p2x1"}}{{/i18n}}
67
63
</p>
68
64
69
65
<p>
70
-
How do the control points affect the way the curve looks?
66
+
{{#i18n"curves-spline-curves-p3x1"}}{{/i18n}}
71
67
</p>
72
68
73
69
<p>
74
-
The tangent to the curve at the start point is parallel to the line between control point one and the end of the curve. The tangent to the curve at the end point is parallel to the line between the start point and control point 2.
70
+
{{#i18n"curves-spline-curves-p4x1"}}{{/i18n}}
75
71
</p>
76
72
77
73
<p>
78
-
The following diagram shows a curve and the points can be dragged to show how the control point affects the curve:
In isolation, a single curve() is not particularly appealing. To draw a continuous curve through several points, you are better off using the curveVertex() function.
90
-
You can only use this function when you are creating a shape with the beginShape() and endShape() functions.In common usage, people use the first point of the curve
91
-
as the first control point and the last point of the curve as the last control point.
Though better than arcs, spline curves don’t seem to have those graceful, swooping curves that say “art.” For those, you need to draw Bézier curves with the bezier() function.
126
-
As with spline curves, the bezier() function has eight parameters, but the order is different. The first two and last two parameters are the start and end points while middle
While it is difficult to visualize how the control points affect a curve(), it is slightly easier to see how the control points affect Bézier curves.
138
-
Imagine two poles and several rubber bands. The poles connect the control points to the endpoints of the curve. A rubber band connects the tops of the poles.
139
-
Two more rubber bands connect the midpoints of the poles to the midpoint of the first rubber band. One more rubber band connects their midpoints.
140
-
The center of that last rubber band is tied to the curve. This diagram helps to explain, the points can be moved to change the curve.
0 commit comments