Skip to content

Commit 7b9d6d5

Browse files
amandaflaggamandaflagg
committed
resolve typography tutorial image 429 errors by replacing image urls sourced from wikimedia
1 parent 9b84ffc commit 7b9d6d5

File tree

1 file changed

+25
-24
lines changed

1 file changed

+25
-24
lines changed

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

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -279,7 +279,7 @@ 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/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
283283
284284
textAlign(CENTER, CENTER);
285285
textSize(blockTextSize);
@@ -352,7 +352,7 @@ In WebGL mode, if you want to treat 3D content like a flat 2D image, you can fla
352352
cursiveFont = await loadFont(
353353
'https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');
354354
bgImg = await loadImage(
355-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
356356
357357
textAlign(CENTER, CENTER);
358358
textSize(blockTextSize);
@@ -426,7 +426,7 @@ At this point, the text starts clipping through the background image. We can rep
426426
cursiveFont = await loadFont(
427427
'https://fonts.googleapis.com/css2?family=Meow+Script&display=swap');
428428
bgImg = await loadImage(
429-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
430430
431431
textAlign(CENTER, CENTER);
432432
textSize(blockTextSize);
@@ -508,7 +508,7 @@ To start with, let's remove the stroke on it with `noStroke()`. Then, we'll turn
508508
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
509509
cursiveFont = await loadFont(
510510
"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/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
512512
513513
textAlign(CENTER, CENTER);
514514
textSize(blockTextSize);
@@ -574,7 +574,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca
574574
async function setup() {
575575
createCanvas(200, 200, WEBGL);
576576
img = await loadImage(
577-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/640px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
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');
578578
}
579579
function draw() {
580580
background(255);
@@ -592,7 +592,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca
592592
async function setup() {
593593
createCanvas(200, 200, WEBGL);
594594
img = await loadImage(
595-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/640px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
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');
596596
let blockFont = await loadFont(
597597
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
598598
textAlign(CENTER, CENTER);
@@ -663,7 +663,7 @@ We can use our material at the bottom by setting `shader(textureMaterial)`. This
663663
async function setup() {
664664
createCanvas(200, 200, WEBGL);
665665
img = await loadImage(
666-
'https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Grouse_mountain_%28ski_runs_close_up%29.JPG/640px-Grouse_mountain_%28ski_runs_close_up%29.JPG');
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');
667667
let blockFont = await loadFont(
668668
'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');
669669
textAlign(CENTER, CENTER);
@@ -719,12 +719,13 @@ Here's how it looks in context:
719719
cursiveFont = await loadFont(
720720
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
721721
bgImg = await loadImage(
722-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
723723
/////////////////////////////////////////////
724724
// Load the foreground image
725725
/////////////////////////////////////////////
726726
fgImg = await loadImage(
727-
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510');
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+
728729
729730
textAlign(CENTER, CENTER);
730731
textSize(blockTextSize);
@@ -832,14 +833,14 @@ If your paper texture image is darkening the resulting image too much, we can dr
832833
cursiveFont = await loadFont(
833834
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
834835
bgImg = await loadImage(
835-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
836837
fgImg = await loadImage(
837-
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510');
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');
838839
/////////////////////////////////////////////
839840
// Load the paper image
840841
/////////////////////////////////////////////
841842
paperImg = await loadImage(
842-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg');
843+
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
843844
844845
textAlign(CENTER, CENTER);
845846
textSize(blockTextSize);
@@ -982,11 +983,11 @@ async function setup() {
982983
cursiveFont = await loadFont(
983984
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
984985
bgImg = await loadImage(
985-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
986987
fgImg = await loadImage(
987-
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510');
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');
988989
paperImg = await loadImage(
989-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg');
990+
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
990991
991992
textAlign(CENTER, CENTER);
992993
textSize(blockTextSize);
@@ -1151,11 +1152,11 @@ We can use that same `easeOutElastic` to animate a `scale()` that we apply befor
11511152
cursiveFont = await loadFont(
11521153
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
11531154
bgImg = await loadImage(
1154-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
11551156
fgImg = await loadImage(
1156-
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510');
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');
11571158
paperImg = await loadImage(
1158-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg');
1159+
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
11591160
11601161
textAlign(CENTER, CENTER);
11611162
textSize(blockTextSize);
@@ -1348,11 +1349,11 @@ Try experimenting with different offsets to see what kind of effect you get! I'v
13481349
cursiveFont = await loadFont(
13491350
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
13501351
bgImg = await loadImage(
1351-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
13521353
fgImg = await loadImage(
1353-
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510');
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');
13541355
paperImg = await loadImage(
1355-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg');
1356+
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
13561357
13571358
textAlign(CENTER, CENTER);
13581359
textSize(blockTextSize);
@@ -1570,11 +1571,11 @@ Try wiggling your mouse over the letters!
15701571
cursiveFont = await loadFont(
15711572
"https://fonts.googleapis.com/css2?family=Meow+Script&display=swap");
15721573
bgImg = await loadImage(
1573-
'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg/640px-Vancouver_%28BC%2C_Canada%29%2C_Canada_Place_--_2022_--_1906.jpg');
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');
15741575
fgImg = await loadImage(
1575-
'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510');
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');
15761577
paperImg = await loadImage(
1577-
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg');
1578+
'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg');
15781579
15791580
textAlign(CENTER, CENTER);
15801581
textSize(blockTextSize);

0 commit comments

Comments
 (0)