diff --git a/README.md b/README.md index 0d86eb30d9..c3474c7a51 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,36 @@ # p5.js Website +## About This Repository + +Hi there! Welcome to the p5.js-website repository! Here are a few things to know: + +This is the repository for the [p5js.org](https://p5js.org/) and the [beta.p5js.org](https://beta.p5js.org/) websites, including: + +- Reference pages and documentation +- Examples and embedded sketches used on the site +- Website-specific UI, layout, and accessibility improvements + +If you have a general question or bug programming with p5.js please post it in the [p5.js forum](https://discourse.processing.org/c/p5js) or ask in our [Discord server](https://discord.p5js.org) (check the #contribute-to-p5 channel). + +Please make sure you are posting to the correct repository. See [this section](https://github.com/processing/p5.js/blob/main/README.md#issues) for a list of all p5.js repositories. + +Please be sure to review our [community statement](https://p5js.org/about/#community-statement) and [code of conduct](https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md). These things are very important to us. Check out the [contributor docs](https://p5js.org/contribute/) for more in-depth details about contributing code, bug fixes, and documentation. + +### p5.js-website and p5.js +If you are seeing an issue about unclear wording, missing explanations, outdated examples, or reference structure, please open an issue in this repository. If the issue appears to be a bug or behavior change in the p5.js library itself, please open an issue in the [core p5.js repository](https://github.com/processing/p5.js). If you’re unsure where an issue belongs, feel free to open it here with as much context as possible, and a maintainer can help route it. + ## How To Contribute Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#pull-requests) to the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX". If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature. +If you’ve been assigned to an issue and are working on it, the p5.js stewards or maintainers (you can check who this is in the [p5.js stewards table](https://github.com/processing/p5.js/blob/main/README.md#stewards)) might comment and tag you in that comment to check in. Please reply within 1 week with any questions or updates; if you don’t respond in a week, stewards or maintainers may reassign the issue. This doesn’t mean you need to finish the work in 1 week: only to confirm you’re still on it. + ### Content Changes If you are here to edit or translate content, please do so inside [the `src/content/` folder](/src/content). +The English reference files in `src/content/reference/en/` are auto-generated from JSDoc comments in the p5.js library source code and should not be edited directly in this repository. Any changes made here will be overwritten the next time the reference is generated. +To fix or improve English reference content, make your changes in the p5.js library repository instead. [See the Contributing to the p5.js Reference guide](https://beta.p5js.org/contribute/contributing_to_the_p5js_reference/). +Exception: Translation files such as `src/content/reference/es/` are stored directly in this repository and can be edited here directly. ### Code Changes For making code changes, please check out the [technical overview](./docs/technical_overview.md) to get started. @@ -14,6 +38,20 @@ For making code changes, please check out the [technical overview](./docs/techni ### Adding Libraries Follow the steps in the Contributing Libraries doc if you would like to add your library to the collection! +### Get Assigned Before Working on an Issue +Please read the [contributor guidelines](https://p5js.org/contribute/contributor_guidelines/) before contributing. + +When an issue is first created, it may be labeled "Awaiting Maintainer Approval", which means it is still being reviewed by maintainers and is not yet ready for work. Please do not start work on these issues. Once an issue has been reviewed and approved, it will be labeled "Help wanted". Only issues with this label should be requested for assignment. When a contributor is set as "Assignee", they can start working on it. If you file a PR for an issue that has not been approved for contribution, or while someone else is already working on it, your PR may be closed. + +When working on multiple issues, please create a separate branch for each one. This ensures each PR only contains the files related to that specific issue. Opening a PR from a branch that contains work from multiple issues makes it difficult to review and merge cleanly. + +When you are ready to open a PR, please keep the following in mind: +- Link the issue your PR fixes using "Fixes #" followed by the issue number in your PR description +- Only include files related to the issue you are working on +- Do not include `package-lock.json` unless your PR is specifically about updating dependencies +- Test your changes locally before opening a PR +- Test against the correct branch, either `main`, `2.0`, or both depending on the issue + ## Add Yourself to p5.js Contributors We recognize all types of contributions. This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Add yourself to the [p5.js repository readme](https://github.com/processing/p5.js/blob/main/README.md#contributors) by following the [instructions here](https://github.com/processing/p5.js/issues/2309)! 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/people/en/kenneth-lim.yaml b/src/content/people/en/kenneth-lim.yaml index bdfb3434a6..ff71798914 100644 --- a/src/content/people/en/kenneth-lim.yaml +++ b/src/content/people/en/kenneth-lim.yaml @@ -2,7 +2,7 @@ name: Kenneth Lim url: https://limzykenneth.com/ category: mentor image: ../images/kenneth-lim.jpeg -imageAlt: WRITE ALT TEXT HERE +imageAlt: Portrait of Kenneth Lim role: p5.js Mentor, 2023-present order: 4 blurb: > diff --git a/src/content/people/en/stalgia-grigg.yaml b/src/content/people/en/stalgia-grigg.yaml index fe200380e5..f88ebf35dc 100644 --- a/src/content/people/en/stalgia-grigg.yaml +++ b/src/content/people/en/stalgia-grigg.yaml @@ -1,7 +1,7 @@ name: Stalgia Grigg category: alumni image: ../images/stalgia-grigg.png -imageAlt: WRITE ALT TEXT HERE +imageAlt: Portrait of Stalgia Grigg url: https://stalgiagrigg.name/ role: p5.js Fellow 2019 order: 9 diff --git a/src/content/tutorials/en/setting-up-your-environment.mdx b/src/content/tutorials/en/setting-up-your-environment.mdx index ca87439599..7fa3092c8d 100644 --- a/src/content/tutorials/en/setting-up-your-environment.mdx +++ b/src/content/tutorials/en/setting-up-your-environment.mdx @@ -13,6 +13,7 @@ relatedContent: authors: - Layla Quiñones - Jaleesa Trapp + - Shaikh Irtiza Nasar --- import EditableSketch from "../../../components/EditableSketch/index.astro"; @@ -304,22 +305,39 @@ Once your project is saved, you can share it! ### Step 2: Install the p5.js library extension - Open VS Code and navigate to the extensions manager on the left toolbar. -- Type [*p5.vscode*](https://marketplace.visualstudio.com/items?itemName=samplavigne.p5-vscode) in the search bar, select the extension, and click the install button. -- Familiarize yourself with details for this extension [here](https://github.com/antiboredom/p5.vscode/blob/master/README.md). +- Type [*p5.js 2.x Project Generator*](https://marketplace.visualstudio.com/items?itemName=Irti.p5js-project-generator) in the search bar, select the extension, and click the install button. +- Familiarize yourself with details for this extension [here](https://github.com/IrtizaNasar/p5-2.vscode/blob/main/README.md). +**This extension provides:** +- Quick project setup with p5.js 2.0 +- IntelliSense and autocomplete for p5.js functions +- Online/offline library options +- Parameter hints for most p5.js functions ### Step 3: Create a p5.js project -- Click on *View* on the top toolbar and select Command Palette. -- Type *Create p5.js Project* in the search bar and select the folder on your machine in which you would like to save your project. +#### Method 1 - From Command Palette: +- Click on *View* on the top toolbar and select Command Palette or Press `Ctrl+Shift+P` (or `Cmd+Shift+P` on macOS) +- Type *Create a new p5.js 2.x Project* in the search bar and select the folder on your machine in which you would like to create your project. +- Follow the prompts to configure your project +- **When prompted, click "Open Project"** to open the new project in your current VS Code window, or **"Open in New Window"** if you prefer to keep your current work open +- **For beginners, "Open Project" is recommended** -### Step 4: View your first sketch +#### Method 2 - From Explorer Context Menu: +- Right-click on a folder in the Explorer +- Select "Create p5.js 2.x Project Here" +- Follow the prompts to configure your project +- **When prompted, click "Open Project"** to open the new project in your current VS Code window, or **"Open in New Window"** if you prefer to keep your current work open +- **For beginners, "Open Project" is recommended** + + +### Step 4: Preview your sketch To view the preview for your code: -- Right click on the *index.html* file in the *VSCODE* tab on the left Explorer panel. -- Select *Open Live Server*.  +- Right click on the `index.html` file in the *VSCODE* tab on the left Explorer panel. +- Select *Open Live Server* (this will start a local development server).  - A window will open in your default browser with the output of your project. A *p5.js sketch* is a text file with code written in the *JavaScript* programming language. *JavaScript* is a programming language used to make web pages interactive. p5.js is a library written in *JavaScript* – which is why it ends in “*.js*” for *JavaScript*. With p5.js, you can create programs that are colorful and animated, with features that users can interact with! To learn more about some of the things you can do with p5.js, watch the [p5.js Welcome Video!](https://hello.p5js.org/) To learn more about JavaScript, you can visit [this resource.](https://developer.mozilla.org/en-US/docs/Web/JavaScript) @@ -328,19 +346,19 @@ The editor begins with the following code in the *sketch.js* file and preview: -The code above creates a canvas element in the preview that is 400 pixels wide and 400 pixels high. It also sets the background to a shade of gray.  +The code above creates a canvas element in the preview that is 800 pixels wide and 600 pixels high. It also sets the background to a shade of gray.  #### `createCanvas()` -Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(400, 400)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 400, 400 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function.  +Computer screens are made up of tiny lights called *pixels*, which are the smallest elements that make up any image. The line of code that creates a canvas in the preview window is [`createCanvas(800, 600)`](/reference/p5/createCanvas). Without this line of code, there will be no canvas to draw on! The numbers 800, 600 correspond to the width and the height of the canvas in pixels. These numbers are also known as *arguments* for the [`createCanvas()`](/reference/p5/createCanvas) function.  Any values that you place within parentheses of a function are called *arguments*: any value used to customize functions. [`createCanvas()`](/reference/p5/createCanvas) appears within the [`setup()`](/reference/p5/setup) function to create an HTML canvas element that you can draw on.  @@ -350,16 +368,16 @@ To learn more, visit the [p5.js reference](/reference/) pages for [`setup()`](/r ### Step 5: Change the color of the canvas - Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function.  - - Change `background(220);` to `background("aqua");` and press *Play*. + - Change `background(220);` to `background("yellow");` and press *Play*. Your code should look like this: @@ -386,12 +404,13 @@ Your code should look like this: @@ -400,7 +419,7 @@ function draw() { You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/draw).  -The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `200, 200` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle). +The sketch above draws a circle on the canvas by calling the [`circle()`](/reference/p5/circle) function within [`draw()`](/reference/p5/draw). The first two *arguments* – `400, 400` – place the circle in the center of the canvas, and the last *argument* – `100` – indicates that the circle is 100 pixels wide. The comments embedded in the sketch in the lines above the [`circle()`](/reference/p5/circle)` `function describe what the code does. To learn more, visit the [p5.js reference](/reference/) pages for [`draw()`](/reference/p5/draw) and [`circle()`](/reference/p5/circle). ### Step 7: Create! @@ -425,10 +444,11 @@ Your code should look like this: 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);