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
Copy file name to clipboardExpand all lines: projects/build-a-conversational-game-in-p5js/build-a-conversational-game-in-p5js.mdx
+12-5Lines changed: 12 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -58,8 +58,9 @@ Hi, my name is ✨Julien✨, and I’m the new Senior Curriculum Developer here
58
58
59
59
<RoundedImage
60
60
link="https://i.imgur.com/wkYjjo9.png"
61
-
description="choose your fighter 👾"
61
+
description=""
62
62
/>
63
+
choose your fighter 👾
63
64
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).
65
66
@@ -74,21 +75,24 @@ The game is called *A Conversation*, and it’s a two-player game of Pong, but w
74
75
<RoundedImage
75
76
link="https://i.imgur.com/dgqpb3M.png"
76
77
description=""
78
+
marginTop="16px"
77
79
/>
78
80
79
81
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.
80
82
81
83
<RoundedImage
82
84
link="https://i.imgur.com/f8m1zfQ.jpeg"
83
-
description="brainstorming sketches from 2014"
85
+
description=""
84
86
/>
87
+
brainstorming sketches from 2014
85
88
86
89
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!
94
98
@@ -127,8 +131,9 @@ There were a few elements I added to upgrade the sketch from the WASD (Pong) exe
127
131
128
132
<RoundedImage
129
133
link="https://i.imgur.com/leVbTL9.gif"
130
-
description="👁️ 👁️ I could watch this for hours 💿🟦"
134
+
description=""
131
135
/>
136
+
👁️ 👁️ I could watch this for hours 💿🟦
132
137
133
138
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. 🕹️
134
139
@@ -278,8 +283,10 @@ If you could use a game to have a conversation, what would you say, and who woul
278
283
279
284
<RoundedImage
280
285
link="https://i.imgur.com/19juCNR.gif"
281
-
description="What do you think they’re talking about? Past Lives (2023), directed by Celine Song"
286
+
description=""
282
287
/>
288
+
Past Lives (2023), directed by Celine Song
289
+
What do you think they’re talking about?
283
290
284
291
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