You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi, my name is ✨Julien✨, and I’m the new Senior Curriculum Developer here at Codédex! I love zines, games, indie comics, park hangs, and experimental baking (holiday cookie box loading…). I’m based in Brooklyn, and am originally from Los Angeles! I’ve always made art, and didn’t consider myself a technical person until my coding journey unexpectedly began about a decade ago.
44
+
45
+
<RoundedImage
46
+
link="https://i.imgur.com/a0I87n4.png"
47
+
description=""
48
+
/>
49
+
50
+
<RoundedImage
51
+
link="https://i.imgur.com/ZLLInna.png"
52
+
description=""
53
+
/>
54
+
55
+
<RoundedImage
56
+
link="https://i.imgur.com/eN6lvAQ.png"
57
+
description=""
58
+
/>
59
+
60
+
<RoundedImage
61
+
link="https://i.imgur.com/wkYjjo9.png"
62
+
description="choose your fighter 👾"
63
+
/>
64
+
65
+
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).
66
+
67
+
## A Conversation
68
+
69
+
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.
70
+
71
+
<RoundedImage
72
+
link="https://i.imgur.com/94X89Jo.gif"
73
+
description=""
74
+
/>
75
+
<RoundedImage
76
+
link="https://i.imgur.com/dgqpb3M.png"
77
+
description=""
78
+
/>
79
+
80
+
I spent a lot of 2014 thinking about the ways people communicate nonverbally while playing games, so I decided to make those invisible conversations, well, visible.
81
+
82
+
<RoundedImage
83
+
link="https://i.imgur.com/f8m1zfQ.jpeg"
84
+
description="brainstorming sketches from 2014"
85
+
/>
86
+
87
+
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.
Since this project was created in 2014 on an ancient laptop I no longer have access to, I’m recreating it from scratch in p5.js, a JavaScript library. If you’ve completed our p5.js course, you may remember coding a simple game of Pong in one of the exercises!
95
+
96
+
In this project tutorial, I'll expand the one-player Pong game from the WASD exercise in our p5.js course into a two-player game, using the conceptual framing of two characters having a conversation.
97
+
98
+
I found this email to my community college professor where I gave her some context about my goals so she could write me a recommendation letter:
99
+
100
+
<RoundedImage
101
+
link="https://i.imgur.com/qKVVVtZ.png"
102
+
description=""
103
+
/>
104
+
105
+
Omg,,,,
106
+
Anyway, let’s dive in!
107
+
108
+
109
+
## Pong
110
+
111
+
Since [Pong](https://en.wikipedia.org/wiki/Pong) is a super popular game, I had a hunch that there would be lots of existing resources online to help me debug. I had a lot of ideas, but didn’t quite have the technical know-how to build something from scratch! I wanted to learn from other people. Experienced programmers still do this! The googling never stops.
112
+
113
+
<RoundedImage
114
+
link="https://i.imgur.com/XnMB36n.gif"
115
+
description=""
116
+
/>
117
+
118
+
For this year’s iteration of Pong, I decided to have a conversation with my past self. I initially thought about talking to 2014 me, but then I decided to go way, waaaaay back, to 1997. Let's have a chat.
119
+
120
+
<RoundedImage
121
+
link="https://i.imgur.com/4r8RZbT.gif"
122
+
description="literally"
123
+
/>
124
+
125
+
### Upgrading From Simple Pong
126
+
127
+
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.
128
+
129
+
<RoundedImage
130
+
link="https://i.imgur.com/leVbTL9.gif"
131
+
description="👁️ 👁️ I could watch this for hours 💿🟦"
132
+
/>
133
+
134
+
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. 🕹️
135
+
136
+
🎧**Step 1: Add a looping soundtrack**
137
+
138
+
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!
139
+
140
+
Declare a `gameSoundtrack` variable and define it in the preload function, where audio (and images!) load before the setup function.
Then, we’ll loop the soundtrack in the setup function.
151
+
152
+
```js
153
+
function setup(){
154
+
…
155
+
//loop the game soundtrack
156
+
gameSoundtrack.loop();
157
+
…
158
+
}
159
+
```
160
+
161
+
🕺🏻**Step 2: Replace paddles with player images**
162
+
163
+
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.
164
+
165
+
<RoundedImage
166
+
link="https://i.imgur.com/gMAkmjC.jpeg"
167
+
description=""
168
+
/>
169
+
170
+
<RoundedImage
171
+
link="https://i.imgur.com/a0I87n4.png"
172
+
description=""
173
+
/>
174
+
175
+
I uploaded the photos to Imgur, and added them to the preload function where my soundtrack lives.
I replaced the paddle rectangles with images in the showPaddle function.
189
+
190
+
```js
191
+
function showPaddle(playerNumber){
192
+
...
193
+
push();
194
+
imageMode(CENTER);
195
+
196
+
image(
197
+
julien2024,
198
+
thisPlayer1.paddleH + 60,
199
+
thisPlayer1.paddleV,
200
+
PADDLE_WIDTH * 1.5, // adjusted width for photo proportions
201
+
PADDLE_HEIGHT * 1.5 // adjusted height for photo proportions
202
+
);
203
+
image(
204
+
julien1997,
205
+
thisPlayer2.paddleH - 20,
206
+
thisPlayer2.paddleV,
207
+
PADDLE_WIDTH / 1.2, // adjusted width for photo proportions
208
+
PADDLE_HEIGHT
209
+
);
210
+
pop();
211
+
}
212
+
```
213
+
214
+
💬 **Step 3: Add the chat text as an array of strings**
215
+
216
+
I thought about what I would want to talk to myself about. I knew that baby me would probably want to ask me the silly philosophical questions he was asking everyone else. Growing up, my Russian-speaking grandmother recognized my innate curiosity and affectionately called me "Pochemuchka" — loosely, “one who asks too many questions”. 👦🏻
217
+
218
+
I declare my array of strings and a variable tracking where we are in the array.
219
+
220
+
```js
221
+
let convoText = [
222
+
...
223
+
"why is the moon broken?",
224
+
"it's just hiding behind the fog, babe",
225
+
"what about when it looks like someone took a bite out of it?",
226
+
"that's called a crescent moon",
227
+
...
228
+
];
229
+
let phrase = 0;
230
+
```
231
+
232
+
In the `drawGame()` function, I draw the text, and position it with the ball coordinates.
233
+
234
+
```js
235
+
push();
236
+
imageMode(CENTER);
237
+
textSize(20);
238
+
fill(255);
239
+
textAlign(CENTER);
240
+
if (showBall == true){
241
+
text(convoText[phrase], ball.h, ball.v);
242
+
}
243
+
pop();
244
+
```
245
+
246
+
In the `moveBall()` function, I cycle through the text array each time the ball collides with a player.
247
+
248
+
```js
249
+
...
250
+
phrase++;
251
+
//stop the array at the last phrase
252
+
if (phrase == convoText.length) {
253
+
phrase = 0;
254
+
}
255
+
}
256
+
```
257
+
258
+
🪩 🔮 🎱
259
+
260
+
Some other changes from the original lesson code:
261
+
- Add a [background](https://p5js.org/reference/p5/background/) image (a particularly foggy night with a blurry moon)
262
+
- Resize the paddles to be wrapped to the images
263
+
- Figure out what I want to talk to myself about, and write it down
264
+
- Add brat [font](https://p5js.org/reference/p5/textFont/)
265
+
- Add custom messages for different game states
266
+
- Add custom text to the title
267
+
- Flip the game to vertical orientation
268
+
- Add a second paddle
269
+
- Add arrow key controls for player 2
270
+
- Track score
271
+
- Add ability to restart game
272
+
273
+
Here is a link to my [final code](https://www.codedex.io/@Julien/build/pong-as-a-conversation-final-code) for the 2024 version of A Conversation.
274
+
275
+
276
+
### Your Turn!
277
+
278
+
If you could use a game to have a conversation, what would you say, and who would you have a conversation with? You could also imagine a conversation between two other people. You and a friend? You and a family member? What would your pet say to you if they could communicate with words? What about those two people you saw at a restaurant – who are they to each other, and what might they be discussing? What about two characters from a TV show? Make a two-player Pong game based on your conversation of choice.
279
+
280
+
<RoundedImage
281
+
link="https://i.imgur.com/19juCNR.gif"
282
+
description="What do you think they’re talking about? Past Lives (2023), directed by Celine Song"
283
+
/>
284
+
285
+
Extra challenge: Think of some other games that could be turned into conversations. Find existing code examples and see if you can find a way to modify them into this conversational format.
0 commit comments