Skip to content

Commit b47749e

Browse files
amandaflaggksen0
amandaflagg
authored and
ksen0
committed
updates to add all assets to the directory, updates references to those assets for the filter shader examples and the typography tutorial
1 parent 34a4c02 commit b47749e

7 files changed

Lines changed: 87 additions & 51 deletions

File tree

‎public/assets/Brown_paper_bag_texture.jpg‎

1.35 MB
Loading

‎public/assets/DiagonalCrosswalkYongeDundas.mp4‎

2.03 MB
Binary file not shown.

‎public/assets/Grouse_mountain_(ski_runs_close_up).jpeg‎

598 KB
Loading

‎public/assets/Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg‎

130 KB
Loading

‎src/content/examples/en/11_3D/04_Filter_Shader/code.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ void main() {
2828
function setup() {
2929
createCanvas(700, 400, WEBGL);
3030
video = createVideo(
31-
'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm'
31+
'/assets/DiagonalCrosswalkYongeDundas.mp4'
3232
);
3333
video.volume(0);
3434
video.hide();

‎src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ let displaceColors;
44
function setup() {
55
createCanvas(700, 400, WEBGL);
66
video = createVideo(
7-
'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm'
7+
'/assets/DiagonalCrosswalkYongeDundas.mp4'
88
);
99
video.volume(0);
1010
video.hide();

‎src/content/tutorials/en/typography-2.0.mdx‎

Lines changed: 85 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -279,8 +279,12 @@ We'll draw it to the canvas in `draw()`. `imageMode(CENTER)` lets us position th
279279
/////////////////////////////////////////////
280280
// Load the background image with loadImage
281281
/////////////////////////////////////////////
282-
bgImg = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
283-
282+
283+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
284+
285+
// Image attribution:
286+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
287+
284288
textAlign(CENTER, CENTER);
285289
textSize(blockTextSize);
286290
blockText = blockFont.textToModel(
@@ -351,9 +355,12 @@ In WebGL mode, if you want to treat 3D content like a flat 2D image, you can fla
351355
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
352356
cursiveFont = await loadFont(
353357
'https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');
354-
bgImg = await loadImage(
355-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
356-
358+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
359+
360+
// Image attribution:
361+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
362+
363+
357364
textAlign(CENTER, CENTER);
358365
textSize(blockTextSize);
359366
blockText = blockFont.textToModel(
@@ -425,8 +432,10 @@ At this point, the text starts clipping through the background image. We can rep
425432
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
426433
cursiveFont = await loadFont(
427434
'https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');
428-
bgImg = await loadImage(
429-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
435+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
436+
437+
// Image attribution:
438+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
430439
431440
textAlign(CENTER, CENTER);
432441
textSize(blockTextSize);
@@ -508,7 +517,10 @@ To start with, let's remove the stroke on it with `noStroke()`. Then, we'll turn
508517
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
509518
cursiveFont = await loadFont(
510519
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
511-
bgImg = await loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
520+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
521+
522+
// Image attribution:
523+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
512524
513525
textAlign(CENTER, CENTER);
514526
textSize(blockTextSize);
@@ -573,8 +585,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca
573585
let img;
574586
async function setup() {
575587
createCanvas(200, 200, WEBGL);
576-
img = await loadImage(
577-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
588+
img = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
578589
}
579590
function draw() {
580591
background(255);
@@ -591,8 +602,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca
591602
let blockText;
592603
async function setup() {
593604
createCanvas(200, 200, WEBGL);
594-
img = await loadImage(
595-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
605+
img = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
596606
let blockFont = await loadFont(
597607
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
598608
textAlign(CENTER, CENTER);
@@ -662,8 +672,7 @@ We can use our material at the bottom by setting `shader(textureMaterial)`. This
662672
let textureMaterial;
663673
async function setup() {
664674
createCanvas(200, 200, WEBGL);
665-
img = await loadImage(
666-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
675+
img = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
667676
let blockFont = await loadFont(
668677
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
669678
textAlign(CENTER, CENTER);
@@ -718,14 +727,16 @@ Here's how it looks in context:
718727
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
719728
cursiveFont = await loadFont(
720729
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
721-
bgImg = await loadImage(
722-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
730+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
731+
732+
// Image attribution:
733+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
734+
723735
/////////////////////////////////////////////
724736
// Load the foreground image
725737
/////////////////////////////////////////////
726-
fgImg = await loadImage(
727-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
728-
738+
fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
739+
729740
730741
textAlign(CENTER, CENTER);
731742
textSize(blockTextSize);
@@ -832,15 +843,20 @@ If your paper texture image is darkening the resulting image too much, we can dr
832843
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
833844
cursiveFont = await loadFont(
834845
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
835-
bgImg = await loadImage(
836-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
837-
fgImg = await loadImage(
838-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
846+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
847+
848+
// Image attribution:
849+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
850+
851+
fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
852+
839853
/////////////////////////////////////////////
840854
// Load the paper image
841855
/////////////////////////////////////////////
842-
paperImg = await loadImage(
843-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
856+
paperImg = await loadImage('Brown_paper_bag_texture.jpg');
857+
858+
// Image attribution:
859+
// Matt Edward (https://commons.wikimedia.org/wiki/File:Brown_paper_bag_texture.jpg), „Brown paper bag texture“, https://creativecommons.org/licenses/by/2.0/legalcode
844860
845861
textAlign(CENTER, CENTER);
846862
textSize(blockTextSize);
@@ -982,13 +998,18 @@ async function setup() {
982998
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
983999
cursiveFont = await loadFont(
9841000
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
985-
bgImg = await loadImage(
986-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
987-
fgImg = await loadImage(
988-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
989-
paperImg = await loadImage(
990-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
1001+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
1002+
1003+
// Image attribution:
1004+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
1005+
1006+
fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
1007+
1008+
paperImg = await loadImage('Brown_paper_bag_texture.jpg');
9911009
1010+
// Image attribution:
1011+
// Matt Edward (https://commons.wikimedia.org/wiki/File:Brown_paper_bag_texture.jpg), „Brown paper bag texture“, https://creativecommons.org/licenses/by/2.0/legalcode
1012+
9921013
textAlign(CENTER, CENTER);
9931014
textSize(blockTextSize);
9941015
blockText = blockFont.textToModel(
@@ -1151,12 +1172,17 @@ We can use that same `easeOutElastic` to animate a `scale()` that we apply befor
11511172
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
11521173
cursiveFont = await loadFont(
11531174
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
1154-
bgImg = await loadImage(
1155-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
1156-
fgImg = await loadImage(
1157-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
1158-
paperImg = await loadImage(
1159-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
1175+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
1176+
1177+
// Image attribution:
1178+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
1179+
1180+
fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
1181+
1182+
paperImg = await loadImage('Brown_paper_bag_texture.jpg');
1183+
1184+
// Image attribution:
1185+
// Matt Edward (https://commons.wikimedia.org/wiki/File:Brown_paper_bag_texture.jpg), „Brown paper bag texture“, https://creativecommons.org/licenses/by/2.0/legalcode
11601186
11611187
textAlign(CENTER, CENTER);
11621188
textSize(blockTextSize);
@@ -1348,12 +1374,17 @@ Try experimenting with different offsets to see what kind of effect you get! I'v
13481374
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
13491375
cursiveFont = await loadFont(
13501376
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
1351-
bgImg = await loadImage(
1352-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
1353-
fgImg = await loadImage(
1354-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
1355-
paperImg = await loadImage(
1356-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
1377+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
1378+
1379+
// Image attribution:
1380+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
1381+
1382+
fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
1383+
1384+
paperImg = await loadImage('Brown_paper_bag_texture.jpg');
1385+
1386+
// Image attribution:
1387+
// Matt Edward (https://commons.wikimedia.org/wiki/File:Brown_paper_bag_texture.jpg), „Brown paper bag texture“, https://creativecommons.org/licenses/by/2.0/legalcode
13571388
13581389
textAlign(CENTER, CENTER);
13591390
textSize(blockTextSize);
@@ -1570,12 +1601,17 @@ Try wiggling your mouse over the letters!
15701601
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
15711602
cursiveFont = await loadFont(
15721603
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
1573-
bgImg = await loadImage(
1574-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/960px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
1575-
fgImg = await loadImage(
1576-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/960px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
1577-
paperImg = await loadImage(
1578-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
1604+
bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg');
1605+
1606+
// Image attribution:
1607+
// Dietmar Rabich (https://commons.wikimedia.org/wiki/File:Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg), https://creativecommons.org/licenses/by-sa/4.0/legalcode
1608+
1609+
fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg');
1610+
1611+
paperImg = await loadImage('Brown_paper_bag_texture.jpg');
1612+
1613+
// Image attribution:
1614+
// Matt Edward (https://commons.wikimedia.org/wiki/File:Brown_paper_bag_texture.jpg), „Brown paper bag texture“, https://creativecommons.org/licenses/by/2.0/legalcode
15791615
15801616
textAlign(CENTER, CENTER);
15811617
textSize(blockTextSize);

0 commit comments

Comments
 (0)