Merge pull request #840 from raclim/updated-editor-introduction

Updated editor introduction

Author: ksen0

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
 

src/content/tutorials/en/setting-up-your-environment.mdx

@@ -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,7 @@ 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 User Name, Emaill, Password, and Confirm Password fields on the Sign Up page.](../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 +98,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)