From 7b9d6d5351c51b643740b6ab171d01c630e9ca4a Mon Sep 17 00:00:00 2001 From: amandaflagg Date: Tue, 7 Apr 2026 13:13:02 -0700 Subject: [PATCH] resolve typography tutorial image 429 errors by replacing image urls sourced from wikimedia --- src/content/tutorials/en/typography-2.0.mdx | 49 +++++++++++---------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/src/content/tutorials/en/typography-2.0.mdx b/src/content/tutorials/en/typography-2.0.mdx index 83c2062887..57f67fc75f 100644 --- a/src/content/tutorials/en/typography-2.0.mdx +++ b/src/content/tutorials/en/typography-2.0.mdx @@ -279,7 +279,7 @@ We'll draw it to the canvas in `draw()`. `imageMode(CENTER)` lets us position th ///////////////////////////////////////////// // Load the background image with loadImage ///////////////////////////////////////////// - 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'); + 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'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -352,7 +352,7 @@ In WebGL mode, if you want to treat 3D content like a flat 2D image, you can fla cursiveFont = await loadFont( 'https://fonts.googleapis.com/css2?family=Meow+Script&display=swap'); 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'); + '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'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -426,7 +426,7 @@ At this point, the text starts clipping through the background image. We can rep cursiveFont = await loadFont( 'https://fonts.googleapis.com/css2?family=Meow+Script&display=swap'); 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'); + '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'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -508,7 +508,7 @@ To start with, let's remove the stroke on it with `noStroke()`. Then, we'll turn 'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); - 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'); + 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'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -574,7 +574,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca async function setup() { createCanvas(200, 200, WEBGL); img = await loadImage( - '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'); + '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'); } function draw() { background(255); @@ -592,7 +592,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca async function setup() { createCanvas(200, 200, WEBGL); img = await loadImage( - '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'); + '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'); let blockFont = await loadFont( 'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); textAlign(CENTER, CENTER); @@ -663,7 +663,7 @@ We can use our material at the bottom by setting `shader(textureMaterial)`. This async function setup() { createCanvas(200, 200, WEBGL); img = await loadImage( - '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'); + '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'); let blockFont = await loadFont( 'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); textAlign(CENTER, CENTER); @@ -719,12 +719,13 @@ Here's how it looks in context: cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); 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'); + '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'); ///////////////////////////////////////////// // Load the foreground image ///////////////////////////////////////////// fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + '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'); + textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -832,14 +833,14 @@ If your paper texture image is darkening the resulting image too much, we can dr cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); 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'); + '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'); fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + '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'); ///////////////////////////////////////////// // Load the paper image ///////////////////////////////////////////// paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -982,11 +983,11 @@ async function setup() { cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); 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'); + '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'); fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + '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'); paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -1151,11 +1152,11 @@ We can use that same `easeOutElastic` to animate a `scale()` that we apply befor cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); 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'); + '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'); fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + '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'); paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -1348,11 +1349,11 @@ Try experimenting with different offsets to see what kind of effect you get! I'v cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); 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'); + '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'); fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + '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'); paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg'); textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -1570,11 +1571,11 @@ Try wiggling your mouse over the letters! cursiveFont = await loadFont( "https://fonts.googleapis.com/css2?family=Meow+Script&display=swap"); 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'); + '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'); fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + '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'); paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/960px-Brown_paper_bag_texture.jpg'); textAlign(CENTER, CENTER); textSize(blockTextSize);