Skip to content

Commit ec2aa81

Browse files
committed
Improve spacing on side by side code snippets
1 parent 50addcd commit ec2aa81

File tree

1 file changed

+51
-57
lines changed

1 file changed

+51
-57
lines changed

README.md

Lines changed: 51 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -157,81 +157,75 @@ If you use `vertex` and `bezierVertex` is the p5.js 1.x code, here's how you can
157157

158158
The below code is based on the [custom shapes](https://p5js.org/tutorials/custom-shapes-and-smooth-curves/) tutorial:
159159

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-
167160
```js
168161
function setup() {
169162
createCanvas(windowWidth, windowHeight);
170163
background(100);
171164
}
172165
function draw() {
173166
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>
176175

177-
// Original anchor at top.
178-
vertex(0, -100);
176+
```js
177+
// Draw the curved star shape.
178+
beginShape();
179179

180-
// Top-right curve.
181-
bezierVertex(0, -50, 50, 0, 100, 0);
180+
// Original anchor at top.
181+
vertex(0, -100);
182182

183-
// Bottom-right curve.
184-
bezierVertex(50, 0, 0, 50, 0, 100);
183+
// Top-right curve.
184+
bezierVertex(0, -50, 50, 0, 100, 0);
185185

186-
// Bottom-left curve.
187-
bezierVertex(0, 50, -50, 0, -100, 0);
186+
// Bottom-right curve.
187+
bezierVertex(50, 0, 0, 50, 0, 100);
188188

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();
193195
```
194196

195197
</td><td>
196198

197199

198200
```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-
bezierVertex0, 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+
bezierVertex0, 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();
235229
```
236230

237231
</td></tr>

0 commit comments

Comments
 (0)