Merge pull request #201 from codedex-io/project-review

small polishes

Author: jules-kris

projects/build-a-conversational-game-in-p5js/build-a-conversational-game-in-p5js.mdx

@@ -33,9 +33,9 @@ tags:
   uid={true}
 />
 
-**Prerequisites**: p5.js, JavaScript
-**Version**: p5@1.11.2, JavaScript ES2023
-**Read Time**: 30 minutes
+**Prerequisites**: p5.js, JavaScript  
+**Version**: p5 1.11.2  
+**Read Time**: 30 minutes  
 
 ## Introduction
 
@@ -88,10 +88,12 @@ Hi, my name is ✨Julien✨, and I’m the new Senior Curriculum Developer here
   </p>
 </div>
 
-Since this is my first project tutorial here at Codédex, I’m revisiting the first coding project I ever finished. I made it ten years ago using [Processing](https://processing.org) (the Java-based precursor to p5.js). 
+Since this is my first project tutorial here at Codédex, I’m revisiting the first coding project I ever finished. I made it ten years ago using [Processing](https://processing.org) (the Java-based precursor to the p5.js library). 
 
 ## A Conversation
 
+Here's the project:
+
 The game is called *A Conversation*, and it’s a two-player game of Pong, but with a twist. Instead of each paddle, I drew a person’s head facing toward the center, and instead of a ball, I drew a speech bubble. As players hit the speech bubble back and forth, the text inside the speech bubble changes to form a conversation. 
 
 <RoundedImage
@@ -117,11 +119,11 @@ I spent a lot of 2014 thinking about the ways people communicate nonverbally whi
 The conversation itself was…hm…it was pretty dramatic. I wasn’t sure if I was going to make this tutorial, because I was a little embarrassed by the narrative stylings of nineteen-year-old Julien. But honestly? I think it’s important to honor our past selves. I was learning to code for the first time after a lifetime of considering myself An Artist Not A Programmer. 
 
 <RoundedImage
-  link="https://i.imgur.com/cA4UduS.png"
+  link="https://i.imgur.com/XyJaet1.png"
   description="" 
 />
 
-<div style={{ textAlign: "center" }}>
+<div style={{ textAlign: "center"}}>
  [@WarronBebster](https://x.com/warronbebster)
 </div>
 
@@ -136,7 +138,7 @@ I found this email to my community college professor where I gave her some conte
   description="" 
 />
 
-Omg,,,,
+Omg....
 Anyway, let’s dive in! 
 
 
@@ -157,7 +159,7 @@ For this year’s iteration of Pong, I decided to have a conversation with my pa
 
 ### Upgrading From Simple Pong
 
-There were a few elements I added to upgrade the sketch from the WASD (Pong) exercise in our p5.js tutorial. Here is a link to the [Codédex Exercise](https://www.codedex.io/p5js/05-wasd) that features single-player Pong. Here is the [starter code](https://www.codedex.io/@Julien/build/pong-as-a-conversation-starter-code) for a basic two-player pong game, which looks a bit different from the Codédex exercise. 
+There were a few elements I added to upgrade the sketch from the WASD (Pong) exercise in our p5.js tutorial. Here is a link to the [Codédex exercise](https://www.codedex.io/p5js/05-wasd) that features single-player Pong. Here is the [starter code](https://www.codedex.io/@Julien/build/pong-as-a-conversation-starter-code) for a basic two-player pong game, which looks a bit different from the Codédex exercise. 
 
 <RoundedImage
   link="https://i.imgur.com/leVbTL9.gif"
@@ -168,11 +170,11 @@ There were a few elements I added to upgrade the sketch from the WASD (Pong) exe
 
 So, how do we go from a screensaver to a conversation? I find it helpful to break down the process into smaller steps. I’m gonna show you three things that can personalize our basic Pong game. 🕹️
 
-🎧**Step 1: Add a looping soundtrack**
+🎧 **Step 1: Add a looping soundtrack**
 
-The first thing I want to do is add a soundtrack, to give the game ambiance. To play sound files in p5.js in the Codédex IDE, you’ll need to link to a url containing a .ogg audio file. You can find a ton of .ogg files with varying moods [here](https://developers.google.com/assistant/tools/sound-library). I chose an ambient outdoor summer track since I’ve always loved laying in the grass while reading a book in the park! 
+The first thing I want to do is add a soundtrack, to give the game ambiance. To play sound files in p5.js in the Codédex IDE, you’ll need to link to a url containing a **.ogg** audio file. You can find a ton of .ogg files with varying moods [here](https://developers.google.com/assistant/tools/sound-library). I chose an ambient outdoor summer track since I’ve always loved laying in the grass while reading a book in the park! 
 
-Declare a `gameSoundtrack` variable and define it in the preload function, where audio (and images!) load before the setup function. 
+Declare a `gameSoundtrack` variable and define it in the preload function, where audio (and images!) load before the `setup()` function. 
 
 ```js
 let gameSoundtrack;
@@ -193,7 +195,7 @@ function setup(){
 }
 ```
 
-🕺🏻**Step 2: Replace paddles with player images** 
+🕺🏻 **Step 2: Replace paddles with player images** 
 
 To add images for the players, you’ll need to draw or find transparent PNGs. Since I decided to have a conversation with my younger self this time, I found a recent photo of me posing in a way that’s similar to a photo of me posing as a kid. Then, I removed their backgrounds with [Adobe’s Free Image Background Remover](https://www.adobe.com/express/feature/image/remove-background) and did some light editing in Adobe Express.
 
@@ -231,7 +233,7 @@ function preload() {
 }
 ```
 
-I replaced the paddle rectangles with images in the showPaddle function.
+I replaced the paddle rectangles with images in the `showPaddle()` function.
 
 ```js
 function showPaddle(playerNumber){
@@ -283,8 +285,9 @@ In the `drawGame()` function, I draw the text, and position it with the ball coo
   textSize(20);
   fill(255);
   textAlign(CENTER);
+
   if (showBall == true){
-  text(convoText[phrase], ball.h, ball.v);
+    text(convoText[phrase], ball.h, ball.v);
   }
   pop();
 ```
@@ -294,7 +297,7 @@ In the `moveBall()` function, I cycle through the text array each time the ball
 ```js
     ...
       phrase++;
-      //stop the array at the last phrase
+      // stop the array at the last phrase
       if (phrase == convoText.length) {
         phrase = 0;
       }