@@ -157,81 +157,75 @@ If you use `vertex` and `bezierVertex` is the p5.js 1.x code, here's how you can
157
157
158
158
The below code is based on the [ custom shapes] ( https://p5js.org/tutorials/custom-shapes-and-smooth-curves/ ) tutorial:
159
159
160
-
161
- <table >
162
- <tr ><th >p5.js 1.x</th ><th >p5.js 2.x</th ></tr >
163
- <tr ><td >Blank “Loading…” screen, then image shown</td ><td >Red background while image loads</td ></tr >
164
- <tr ><td >
165
-
166
-
167
160
``` js
168
161
function setup () {
169
162
createCanvas (windowWidth, windowHeight);
170
163
background (100 );
171
164
}
172
165
function draw () {
173
166
translate (width/ 2 , height/ 2 );
174
- // Draw the curved star shape.
175
- beginShape ();
167
+ // Draw the curved star shape
168
+ describe (" A white star on a gray background in the middle of the canvas" )
169
+ }
170
+ ```
171
+
172
+ <table >
173
+ <tr ><th >p5.js 1.x</th ><th >p5.js 2.x</th ></tr >
174
+ <tr ><td >
176
175
177
- // Original anchor at top.
178
- vertex (0 , - 100 );
176
+ ``` js
177
+ // Draw the curved star shape.
178
+ beginShape ();
179
179
180
- // Top-right curve .
181
- bezierVertex (0 , - 50 , 50 , 0 , 100 , 0 );
180
+ // Original anchor at top .
181
+ vertex (0 , - 100 );
182
182
183
- // Bottom -right curve.
184
- bezierVertex (50 , 0 , 0 , 50 , 0 , 100 );
183
+ // Top -right curve.
184
+ bezierVertex (0 , - 50 , 50 , 0 , 100 , 0 );
185
185
186
- // Bottom-left curve.
187
- bezierVertex (0 , 50 , - 50 , 0 , - 100 , 0 );
186
+ // Bottom-right curve.
187
+ bezierVertex (50 , 0 , 0 , 50 , 0 , 100 );
188
188
189
- // Top-left curve.
190
- bezierVertex (- 50 , 0 , 0 ,- 50 , 0 ,- 100 );
191
- endShape ();
192
- }
189
+ // Bottom-left curve.
190
+ bezierVertex (0 , 50 , - 50 , 0 , - 100 , 0 );
191
+
192
+ // Top-left curve.
193
+ bezierVertex (- 50 , 0 , 0 ,- 50 , 0 ,- 100 );
194
+ endShape ();
193
195
```
194
196
195
197
</td ><td >
196
198
197
199
198
200
``` js
199
- function setup () {
200
- createCanvas (windowWidth, windowHeight);
201
- background (100 );
202
- }
203
- function draw () {
204
- translate (width/ 2 , height/ 2 );
205
-
206
- // Draw the curved star shape.
207
- beginShape ();
208
- bezierOrder (3 );
209
-
210
- // Original anchor at top.
211
- bezierVertex (0 , - 100 );
212
-
213
- // Top-right curve.
214
- bezierVertex (0 , - 50 );
215
- bezierVertex (50 , 0 );
216
- bezierVertex (100 , 0 );
217
-
218
- // Bottom-right curve.
219
- bezierVertex (50 , 0 );
220
- bezierVertex (0 , 50 );
221
- bezierVertex (0 , 100 );
222
-
223
- // Bottom-left curve.
224
- bezierVertex ( 0 , 50 );
225
- bezierVertex (- 50 , 0 );
226
- bezierVertex (- 100 , 0 );
227
-
228
- // Top-left curve.
229
- bezierVertex (- 50 , 0 );
230
- bezierVertex (0 , - 50 );
231
- bezierVertex (0 ,- 100 );
232
-
233
- endShape ();
234
- }
201
+ // Draw the curved star shape.
202
+ beginShape ();
203
+ bezierOrder (3 );
204
+
205
+ // Original anchor at top.
206
+ bezierVertex (0 , - 100 );
207
+
208
+ // Top-right curve.
209
+ bezierVertex (0 , - 50 );
210
+ bezierVertex (50 , 0 );
211
+ bezierVertex (100 , 0 );
212
+
213
+ // Bottom-right curve.
214
+ bezierVertex (50 , 0 );
215
+ bezierVertex (0 , 50 );
216
+ bezierVertex (0 , 100 );
217
+
218
+ // Bottom-left curve.
219
+ bezierVertex ( 0 , 50 );
220
+ bezierVertex (- 50 , 0 );
221
+ bezierVertex (- 100 , 0 );
222
+
223
+ // Top-left curve.
224
+ bezierVertex (- 50 , 0 );
225
+ bezierVertex (0 , - 50 );
226
+ bezierVertex (0 ,- 100 );
227
+
228
+ endShape ();
235
229
```
236
230
237
231
</td ></tr >
0 commit comments