diff --git a/public/assets/Brown_paper_bag_texture.jpg b/public/assets/Brown_paper_bag_texture.jpg new file mode 100644 index 0000000000..be81fe69bb Binary files /dev/null and b/public/assets/Brown_paper_bag_texture.jpg differ diff --git a/public/assets/DiagonalCrosswalkYongeDundas.webm b/public/assets/DiagonalCrosswalkYongeDundas.webm new file mode 100644 index 0000000000..5518a8ca67 Binary files /dev/null and b/public/assets/DiagonalCrosswalkYongeDundas.webm differ diff --git a/public/assets/Grouse_mountain_(ski_runs_close_up).jpeg b/public/assets/Grouse_mountain_(ski_runs_close_up).jpeg new file mode 100644 index 0000000000..5ee168ef7d Binary files /dev/null and b/public/assets/Grouse_mountain_(ski_runs_close_up).jpeg differ diff --git a/public/assets/Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg b/public/assets/Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg new file mode 100644 index 0000000000..d4027c7832 Binary files /dev/null and b/public/assets/Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg differ diff --git a/src/content/examples/en/11_3D/04_Filter_Shader/code.js b/src/content/examples/en/11_3D/04_Filter_Shader/code.js index d1eb0c4bcd..2846682a6d 100644 --- a/src/content/examples/en/11_3D/04_Filter_Shader/code.js +++ b/src/content/examples/en/11_3D/04_Filter_Shader/code.js @@ -28,7 +28,7 @@ void main() { function setup() { createCanvas(700, 400, WEBGL); video = createVideo( - 'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm' + '/assets/DiagonalCrosswalkYongeDundas.webm' ); video.volume(0); video.hide(); diff --git a/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js b/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js index 374fa86f06..1752e87dbc 100644 --- a/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js +++ b/src/content/examples/en/11_3D/07_Filter_Shader_p5strands/code.js @@ -4,7 +4,7 @@ let displaceColors; function setup() { createCanvas(700, 400, WEBGL); video = createVideo( - 'https://upload.wikimedia.org/wikipedia/commons/d/d2/DiagonalCrosswalkYongeDundas.webm' + '/assets/DiagonalCrosswalkYongeDundas.webm' ); video.volume(0); video.hide(); diff --git a/src/content/tutorials/en/typography-2.0.mdx b/src/content/tutorials/en/typography-2.0.mdx index 83c2062887..04d556aa5f 100644 --- a/src/content/tutorials/en/typography-2.0.mdx +++ b/src/content/tutorials/en/typography-2.0.mdx @@ -279,8 +279,12 @@ 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('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + textAlign(CENTER, CENTER); textSize(blockTextSize); 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 '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('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + + textAlign(CENTER, CENTER); textSize(blockTextSize); blockText = blockFont.textToModel( @@ -425,8 +432,10 @@ At this point, the text starts clipping through the background image. We can rep '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('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -508,7 +517,10 @@ 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('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -573,8 +585,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca let img; 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'); + img = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); } function draw() { background(255); @@ -591,8 +602,7 @@ Generally, when you want to use an image as a texture on some 3D content, you ca let blockText; 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'); + img = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); let blockFont = await loadFont( 'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); textAlign(CENTER, CENTER); @@ -662,8 +672,7 @@ We can use our material at the bottom by setting `shader(textureMaterial)`. This let textureMaterial; 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'); + img = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); let blockFont = await loadFont( 'https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap'); textAlign(CENTER, CENTER); @@ -718,13 +727,16 @@ Here's how it looks in context: '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('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + ///////////////////////////////////////////// // 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'); + fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); + textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -831,15 +843,20 @@ If your paper texture image is darkening the resulting image too much, we can dr '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'); - fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); + bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + + fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); + ///////////////////////////////////////////// // 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'); + paperImg = await loadImage('Brown_paper_bag_texture.jpg'); + + // Image attribution: + // 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 textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -981,13 +998,18 @@ async function setup() { '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'); - fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); - paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + + fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); + + paperImg = await loadImage('Brown_paper_bag_texture.jpg'); + // Image attribution: + // 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 + textAlign(CENTER, CENTER); textSize(blockTextSize); blockText = blockFont.textToModel( @@ -1150,12 +1172,17 @@ We can use that same `easeOutElastic` to animate a `scale()` that we apply befor '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'); - fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); - paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + + fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); + + paperImg = await loadImage('Brown_paper_bag_texture.jpg'); + + // Image attribution: + // 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 textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -1347,12 +1374,17 @@ Try experimenting with different offsets to see what kind of effect you get! I'v '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'); - fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); - paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + + fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); + + paperImg = await loadImage('Brown_paper_bag_texture.jpg'); + + // Image attribution: + // 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 textAlign(CENTER, CENTER); textSize(blockTextSize); @@ -1569,12 +1601,17 @@ Try wiggling your mouse over the letters! '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'); - fgImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Grouse_Mountain_%288598307419%29.jpg/960px-Grouse_Mountain_%288598307419%29.jpg?20210319145510'); - paperImg = await loadImage( - 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Brown_paper_bag_texture.jpg/640px-Brown_paper_bag_texture.jpg'); + bgImg = await loadImage('Vancouver_(BC,_Canada),_Canada_Place_--_2022_--_1906.jpg'); + + // Image attribution: + // 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 + + fgImg = await loadImage('Grouse_mountain_(ski_runs_close_up).jpeg'); + + paperImg = await loadImage('Brown_paper_bag_texture.jpg'); + + // Image attribution: + // 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 textAlign(CENTER, CENTER); textSize(blockTextSize);