diff --git a/src/content/tutorials/en/get-started.mdx b/src/content/tutorials/en/get-started.mdx index fe154d146f..caab1c9a29 100644 --- a/src/content/tutorials/en/get-started.mdx +++ b/src/content/tutorials/en/get-started.mdx @@ -53,12 +53,18 @@ Using the [p5.js Web Editor](https://editor.p5js.org/): - Log in to the [p5.js Web Editor](https://editor.p5js.org/). - Name your project “Interactive Landscape” by clicking the *pencil icon* and typing “Interactive Landscape” into the text box that appears. + +![A user on the p5.js Web Editor names a new project “Interactive Landscape”.](../images/introduction/p5_editor_interactive_landscape_1.png) + - Click on *File* and select *Save*. + +![A user on the p5.js Web Editor saves their new project "Interactive Landscape".](../images/introduction/p5_editor_interactive_landscape_2.png) + - Confirm your project is saved by navigating to your gallery of saved sketches: - Click on *File* and select *Open*. - Your most recent sketches will appear at the top of the list of projects saved on your account. -![A user on the p5.js Web Editor names a new project “Interactive Landscape”, saves it, finds it in their gallery of saved sketches, and clicks the project's name to open it.](../images/introduction/rename-sketch.gif) +![A user on the p5.js Web Editor finds their project "Interactive Landscape" in their gallery of saved sketches.](../images/introduction/p5_editor_interactive_landscape_3.png) #### Default Code diff --git a/src/content/tutorials/en/setting-up-your-environment.mdx b/src/content/tutorials/en/setting-up-your-environment.mdx index 366389911e..71f233210f 100644 --- a/src/content/tutorials/en/setting-up-your-environment.mdx +++ b/src/content/tutorials/en/setting-up-your-environment.mdx @@ -4,7 +4,7 @@ description: A quick tutorial for setting up the p5.js Web Editor and VS Code to category: introduction categoryIndex: 0 featuredImage: ../images/featured/SetupA.jpg -featuredImageAlt: An interactive sketch in the p5.js Web Editor draws circles on the canvas as the mouse pointer moves. +featuredImageAlt: An interactive sketch in the p5.js Editor draws circles on the canvas as the mouse pointer moves. relatedContent: references: - en/p5/setup @@ -61,7 +61,7 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o - Open a desktop browser on your computer and go to [https://editor.p5js.org/](https://editor.p5js.org/). - Click the [“Sign up”](https://editor.p5js.org/signup) link on the top-right of the web page. -![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Web Editor.](../images/introduction/web-editor-signup.png) +![An arrow pointing to the “Sign Up” link in the top right corner of the p5.js Editor.](../images/introduction/p5_editor_sign_up.png) ### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/) @@ -73,7 +73,9 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o - Create and confirm a password.  - Click the “Sign Up” button. -![A user clicks the “Sign Up” button in the p5.js Web Editor, enters a new username, email address, and password.](../images/introduction/editor-signup.gif) + +![An arrow pointing to the highlighted fields on the Sign Up page, as described above.](../images/introduction/p5_editor_sign_up_page.png) + - Using a Google account - Click on the button on the bottom of the page that says “Login with Google.”  @@ -98,21 +100,29 @@ The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where The following diagram labels and describes each element of the editor’s interface: -![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/web-editor-diagram.png) +![A labeled diagram of the p5.js Web Editor’s user interface.](../images/introduction/p5_editor_interface_breakdown.png) + +{/* ![Play and Stop buttons.](../images/introduction/p5_editor_play_start.png) +![Settings button with a gear icon in the center.](../images/introduction/p5_editor_settings.png) */} ### Step 4: Name, save, and run your first sketch - Name your projects by clicking on the pencil icon above the text editor and typing in a name for your project. + +![An arrow points to a pencil icon to rename a sketch.](../images/introduction/p5_editor_naming_a_sketch.png) + - Save projects by clicking on *File* in the top toolbar, and selecting *Save*.  - Make sure you are logged in to your account or you will not be able to save the sketch. - Saving projects frequently helps to ensure that code isn’t lost if something happens to your computer, browser, or internet connection while you are coding. -![A user on the p5.js Web Editor names a new project “My First Sketch” and saves it. A notification box then appears for a moment with the text “Sketch saved.”](../images/introduction/renameSave.gif) +![A user on the p5.js Web Editor names a new project and saves it.”](../images/introduction/p5_editor_saving_a_sketch.png) + +![An arrow pointing to a notification box with the text “Sketch saved.”](../images/introduction/p5_editor_saved_sketch_notification.png) To view the output of your code, click the *Play* button in the top left corner:  -![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/play.gif) +![A blank canvas appears in the preview window of the p5.js Web Editor when a user clicks on the “Play” button in the top right corner.](../images/introduction/p5_editor_running_a_sketch.png) 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) diff --git a/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_1.png b/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_1.png new file mode 100644 index 0000000000..1d70dbb571 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_1.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_2.png b/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_2.png new file mode 100644 index 0000000000..7b094c41c9 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_2.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_3.png b/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_3.png new file mode 100644 index 0000000000..897cbbc20f Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_interactive_landscape_3.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_interface_breakdown.png b/src/content/tutorials/images/introduction/p5_editor_interface_breakdown.png new file mode 100644 index 0000000000..b03f6d1b0e Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_interface_breakdown.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_naming_a_sketch.png b/src/content/tutorials/images/introduction/p5_editor_naming_a_sketch.png new file mode 100644 index 0000000000..fc26f042a2 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_naming_a_sketch.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_play_start.png b/src/content/tutorials/images/introduction/p5_editor_play_start.png new file mode 100644 index 0000000000..c3a2512d88 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_play_start.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_running_a_sketch.png b/src/content/tutorials/images/introduction/p5_editor_running_a_sketch.png new file mode 100644 index 0000000000..b25a1699b8 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_running_a_sketch.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_saved_sketch_notification.png b/src/content/tutorials/images/introduction/p5_editor_saved_sketch_notification.png new file mode 100644 index 0000000000..1c46c67c25 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_saved_sketch_notification.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_saving_a_sketch.png b/src/content/tutorials/images/introduction/p5_editor_saving_a_sketch.png new file mode 100644 index 0000000000..cd621188d6 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_saving_a_sketch.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_settings.png b/src/content/tutorials/images/introduction/p5_editor_settings.png new file mode 100644 index 0000000000..4de94acca0 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_settings.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_sign_up.png b/src/content/tutorials/images/introduction/p5_editor_sign_up.png new file mode 100644 index 0000000000..9b0ae3b704 Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_sign_up.png differ diff --git a/src/content/tutorials/images/introduction/p5_editor_sign_up_page.png b/src/content/tutorials/images/introduction/p5_editor_sign_up_page.png new file mode 100644 index 0000000000..3ef69478bc Binary files /dev/null and b/src/content/tutorials/images/introduction/p5_editor_sign_up_page.png differ