diff --git a/src/content/libraries/en/p5.nvim.yaml b/src/content/libraries/en/p5.nvim.yaml new file mode 100644 index 0000000000..04e2881285 --- /dev/null +++ b/src/content/libraries/en/p5.nvim.yaml @@ -0,0 +1,9 @@ +name: p5.nvim +description: Better editor support for sketchspaces in Neovim +category: utils +sourceUrl: https://github.com/prjctimg/p5.nvim +featuredImage: "../images/p5.nvim.png" +author: + name: Dean Tarisai + url: https://prjctimg.me +featuredImageAlt: p5.nvim logo diff --git a/src/content/libraries/images/p5.nvim.png b/src/content/libraries/images/p5.nvim.png new file mode 100644 index 0000000000..cd78bbb9f2 Binary files /dev/null and b/src/content/libraries/images/p5.nvim.png differ diff --git a/src/content/tutorials/en/setting-up-your-environment.mdx b/src/content/tutorials/en/setting-up-your-environment.mdx index 07cff4346d..4961e98a75 100644 --- a/src/content/tutorials/en/setting-up-your-environment.mdx +++ b/src/content/tutorials/en/setting-up-your-environment.mdx @@ -1,6 +1,6 @@ --- title: "Setting Up Your Environment" -description: A quick tutorial for setting up the p5.js Web Editor and VS Code to write and save p5.js projects. +description: A quick tutorial for setting up the p5.js Web Editor and other popular editors to write and save p5.js projects. category: introduction categoryIndex: 0 featuredImage: ../images/featured/SetupA.jpg @@ -20,16 +20,14 @@ import Callout from "../../../components/Callout/index.astro"; ![Logos for p5.js and Visual Code Studio.](../images/introduction/p5VScode.png) - ## Introduction To begin writing code using [p5.js](/reference/), you need to set up the coding environment you will use to write and save your programs. In this guide, you will: -1. Set up your coding environment on the web using the [p5.js Web Editor](https://editor.p5js.org/), or on your computer using [Visual Studio Code (VS Code).](https://code.visualstudio.com/) +1. Set up your coding environment on the web using the [p5.js Web Editor](https://editor.p5js.org/), or on your computer using [Visual Studio Code (VS Code)](https://code.visualstudio.com/) or [Neovim](https://neovim.io) 2. Use the [p5.js reference](/reference/) to help you write your first simple program using shapes and color. 3. Save and share your code. - - +4. ## What you will need 1. Access to the internet and a desktop browser such as: @@ -39,21 +37,20 @@ To begin writing code using [p5.js](/reference/), you need to set up the coding - [Edge](https://www.microsoft.com/en-us/edge?ep=193\&form=MA13L2\&es=40) 2. A desktop computer, laptop, or chromebook +## Step 0: Choose the type of coding environment -## Step 0: Choose the type of coding environment  - -You can begin your coding journey with [p5.js](/reference/) using the [p5.js Web Editor](https://editor.p5js.org/) or [VS Code](https://code.visualstudio.com/).  +You can begin your coding journey with [p5.js](/reference/) using the [p5.js Web Editor](https://editor.p5js.org/) or other editors such as [VS Code](https://code.visualstudio.com/) and [Neovim](https://neovim.io). The [p5.js Web Editor](https://editor.p5js.org/) is a website where programmers can write, test, share, or remix p5.js programs without needing to download or configure a *code editor* on a computer. A *code editor* makes writing and reading code easier by organizing and coloring text in a way that helps programmers see different parts of the code. -[VS Code](https://code.visualstudio.com/) is a popular code editor you install on your computer that provides a more advanced coding experience. Depending on your needs, choose the coding environment that is best for you. +[VS Code](https://code.visualstudio.com/) and Neovim are popular code editors you can install on your computer that provides a more advanced coding experience. Depending on your needs, choose the coding environment that is best for you. - [Link to p5.js Web Editor how-to](#web-editor) - [Link to VS Code how-to](#vscode) +- [Link to Neovim how-to](#neovim) If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.org/)! - ## Using the p5.js Web Editor ### Step 1: Open the [p5.js Web Editor](https://editor.p5js.org/) sign-up page @@ -63,26 +60,25 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o ![An arrow to the “Sign Up” link.](../images/introduction/p5_editor_sign_up.png) - ### Step 2: Create an account with [p5.js Web Editor](https://editor.p5js.org/) - Once on the [sign-up page](https://editor.p5js.org/signup), create an account on the [p5.js Web Editor](https://editor.p5js.org/) using one of the following options: - Manual sign-up - Create a username. - Enter your email address. - - Create and confirm a password.  + - Create and confirm a password. - Click the “Sign Up” button. ![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.”  + - Click on the button on the bottom of the page that says “Login with Google.” ![A Google login button displaying “Login with Google”](../images/introduction/login-with-google.png) -- Follow the prompts to enter your email and password for your Google account (if necessary).  +- Follow the prompts to enter your email and password for your Google account (if necessary). - Using a Github account - - Click on the button on the bottom of the page that says “Login with GitHub.”  + - Click on the button on the bottom of the page that says “Login with GitHub.” ![A Github login button displaying “Login with Github”](../images/introduction/login-with-github.png) @@ -91,18 +87,16 @@ If you are new to p5.js, start with the [p5.js Web Editor](https://editor.p5js.o ![A GitHub third party authorization window informing users that p5.js Web Editor wants to access their GitHub account and read email addresses from their personal user data. Users can cancel the request by clicking the “Cancel” button, or approve the request by clicking the “Authorize processing” button.](../images/introduction/github-auth.png) - ### Step 3: Explore the [p5.js Web Editor](https://editor.p5js.org/) -The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where programmers can write and test their p5.js code. Explore the different elements of the [p5.js Web Editor](https://editor.p5js.org/) and their functions.  +The [p5.js Web Editor](https://editor.p5js.org/) is an online environment where programmers can write and test their p5.js code. Explore the different elements of the [p5.js Web Editor](https://editor.p5js.org/) and their functions. 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/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) */} - +{/*![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 @@ -110,7 +104,7 @@ The following diagram labels and describes each element of the editor’s interf ![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*.  +- 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. @@ -118,7 +112,7 @@ The following diagram labels and describes each element of the editor’s interf ![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:  +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/p5_editor_running_a_sketch.png) @@ -135,22 +129,20 @@ function draw() { } ``` -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 400 pixels wide and 400 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(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. -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.  +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. To learn more, visit the [p5.js reference](/reference) pages for [`setup()`](/reference/p5/setup) and [`createCanvas()`](/reference/p5/createCanvas). - ### Step 5: Change the color of the canvas -- You can type commands for any sketch in the text editor, and view the output of your code in the preview window by clicking *Play*.  -- Change the background color of your canvas by changing the *argument* for the [`background()`](/reference/p5/background) function.  +- You can type commands for any sketch in the text editor, and view the output of your code in the preview window by clicking *Play*. +- 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*. ```js @@ -162,12 +154,10 @@ function draw() { } ``` - #### `background()` The `background()` function colors the background a specific color. You can use words inside quotations or numbers to color the background of the canvas. To learn more, visit the [p5.js reference](/reference) pages for [`background()`](/reference/p5/background) & [color](/reference/p5/color). - ### Step 6: Draw shapes on the canvas - Draw a circle on the canvas. @@ -197,14 +187,13 @@ function draw() { #### `draw()` -You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/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). +### Step 7: Create -### Step 7: Create! - -p5.js has many functions you can use to incorporate both static and interactive elements in your canvas.  +p5.js has many functions you can use to incorporate both static and interactive elements in your canvas. - Replace the background and circle commands with the following text: @@ -243,11 +232,9 @@ function draw() { Press and hold the mouse button as you drag the mouse pointer over the canvas. +The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black. -The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black.  - -Visit the [p5.js reference](/reference/) for more p5.js functions like [2D Primitive shapes](/reference/#Shape/).  - +Visit the [p5.js reference](/reference/) for more p5.js functions like [2D Primitive shapes](/reference/#Shape/). ### Errors @@ -255,8 +242,7 @@ It is easy to spell function names wrong or forget a comma. Syntax rules help th Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code. - -#### Accessibility Note: +#### Accessibility Note If you are using a screen reader, you must turn on the accessible outputs in the [p5.js Web Editor](https://editor.p5js.org/) and add the accessibility library in your html. To learn more, visit our guide to [using the p5.js Web Editor with a screen reader.](/tutorials/p5js-with-screen-reader/) @@ -269,43 +255,21 @@ Once your project is saved, you can share it! - Fullscreen: Share your project with a link (does not show code). - Edit: Share your project code in the p5.js editor with a link. - -## Next steps:  - -- Next Tutorial: [Get Started](/tutorials/get-started) -- Explore some [p5.js examples](/examples/) - - -## Resources: - -- [p5.js Welcome Video](https://hello.p5js.org/) -- The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) -- [p5.js reference page](/reference/) -- [Javascript - MDN reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) -- [Field Guide to Debugging](/tutorials/field-guide-to-debugging) -- [How to Use the p5.js Web Editor with a Screen Reader](/tutorials/p5js-with-screen-reader/) - ---- - - ## Using VS Code [VS Code](https://code.visualstudio.com/) offers a more advanced code editing experience compared to the Web Editor. We recommend this option if you’re already familiar with VS Code. - ### Step 1: Download VS Code - Download VS Code onto your device using [this link](https://code.visualstudio.com/download). - Explore the features of VS Code and various setup options using [these resources](https://code.visualstudio.com/docs/getstarted/introvideos). - ### Step 2: Install the p5.js library extension - Open VS Code and navigate to the extensions manager on the left toolbar. - 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). - ### Step 3: Create a p5.js project - Click on *View* on the top toolbar and select Command Palette. @@ -313,13 +277,12 @@ Once your project is saved, you can share it! - Follow the prompts to configure your project. - Select the folder on your machine where you would like to save your project. - ### Step 4: View your first 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*.  +- Select *Open Live 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) @@ -335,21 +298,19 @@ function draw() { } `} /> -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 400 pixels wide and 400 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(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. -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.  +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. To learn more, visit the [p5.js reference](/reference/) pages for [`setup()`](/reference/p5/setup) & [`createCanvas()`](/reference/p5/createCanvas). - ### 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 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*. Your code should look like this: @@ -363,13 +324,10 @@ function draw() { } `} /> - - #### `background()` The `background()` function colors the background a specific color. You can use words inside quotations or numbers to color the background of the canvas. To learn more, visit the [p5.js reference](/reference/) pages for [`background()`](/reference/p5/background) & [color](/reference/#Color). - ### Step 6: Draw shapes on the canvas - Draw a circle on the canvas. @@ -395,17 +353,15 @@ function draw() { } `} /> - #### `draw()` -You can draw shapes on the canvas by typing specific commands for shapes within the curly brackets `{}` after [`function draw()`](/reference/p5/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). - ### Step 7: Create! -p5.js has many functions you can use to incorporate both static and interactive elements in your canvas.  +p5.js has many functions you can use to incorporate both static and interactive elements in your canvas. - Replace the circle command with the following text: @@ -445,31 +401,48 @@ if (mouseIsPressed === true) { Press and hold the mouse button as you drag the mouse pointer over the canvas. -The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black.  - -Visit the [p5.js reference](/reference/) for more p5.js functions, such as other shapes you can draw.  +The code above draws white circles in the same position as the mouse pointer. When a mouse button is pressed, the circle’s color changes to black. +Visit the [p5.js reference](/reference/) for more p5.js functions, such as other shapes you can draw. ### Errors -It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken (for example, if [`circle()`](/reference/p5/circle) is spelled wrong), a message will appear in the browser’s console. These errors are commonly referred to as bugs; when your code does not execute correctly, there might be a bug in your code!  +It is easy to spell function names wrong or forget a comma. Syntax rules help the computer interpret code. When a “rule” is broken (for example, if [`circle()`](/reference/p5/circle) is spelled wrong), a message will appear in the browser’s console. These errors are commonly referred to as bugs; when your code does not execute correctly, there might be a bug in your code! - Visit these resources for instructions on how to view the console in specific browsers: [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) - Visit the [Field Guide to Debugging](/tutorials/field-guide-to-debugging) for more information on how to fix errors in your code. -### Accessibility note +## Using Neovim + +[Neovim](https://neovim.io/) is a hyper extensible Vim-based text editor and is a popular choice for terminal power users. We recommend this option if you’re already familiar with Neovim. + +### Step 1: Download Neovim + +- Download Neovim onto your device using [this link](https://neovim.io/doc/install/). +- Install [p5.nvim](https://github.com/prjctimg/p5.nvim) + +### Step 3: Create a p5.js project + +- Type `:P5 create` and put in your desired project name. +- After clicking `` it will create your project with all the files needed to start coding. +- Familiarize yourself with details for this extension [here](). + +### Step 4: View your first sketch -If you are using a screen reader, use the [p5.js Web Editor](https://editor.p5js.org/) instead! To learn more, visit the “[How to Use the p5.js Web Editor with a Screen Reader](https://docs.google.com/document/u/0/d/1Q_leNn8lkeSUfAyq1jLQeLYq1h8pU9134QHNvMu4Tcw/edit)” resource. +To view the preview for your code: +- Type `:P5 server` and press `` , a window will open in your default browser with the output of your project. -## Next steps:  +Repeat step 5 through and the rest as shown in the [VS Code guide](#using-vs-codea-idvscodea) + + +## Next steps - Next Tutorial: [Get Started](/tutorials/get-started) - Explore some [p5.js examples](/examples/) - -## Resources: +## Resources - [p5.js Welcome Video](https://hello.p5js.org/) - The Coding Train: [1.2: p5.js Web Editor - p5.js Tutorial](https://www.youtube.com/watch?v=MXs1cOlidWs) @@ -480,3 +453,5 @@ If you are using a screen reader, use the [p5.js Web Editor](https://editor.p5js - [VSCode Overview](https://code.visualstudio.com/docs/getstarted/introvideos) - [p5.vscode reference](https://github.com/antiboredom/p5.vscode/blob/master/README.md) - Browser consoles in [Chrome](https://developer.chrome.com/docs/devtools/console/reference/) | [Firefox](https://firefox-source-docs.mozilla.org/devtools-user/web_console/) | [Safari](https://support.apple.com/guide/safari-developer/safari-developer-tools-overview-dev073038698/11.0/mac/10.13) | [Edge](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/console/) +- [Neovim](https://neovim.io) +- [p5.nvim reference page](https://github.com/prjctimg/p5.nvim/blob/main/README.md)