Kai and I want to keep working on his previous sketch, we made the decision on Friday’s first meeting. We actually came up a few ideas after we viewed some finished homework made by class2017 and 2018,  such as: making a kaleidoscope, or making a very simple interactive interface.

The reason why we want to work on this one, is because both of us are very busy, we might won’t work physically together very often. So working on something has a foundation instead of build a project from zero, maybe an easy way  for us to communicate and co-work online.

This is Kai’s previous work:


It is like a classic Pac-Man game: two players could use keyboard “↑↓←→” and “wsad” to control the character on-screen. Let the ghost on left up corner to chase the right bottom elf. However, Kai didn’t get the chance to finish this game 100% and there were some lose ends need we to improve, like how to make the “wsad” work? And what would happen when two characters meet each other? And move on to week3’s assignment, we are asked to create an algorithmic design with simple parameters. We want to design a map for the game, some roadblocks will be generated randomly, and the map will be different every time you run our code.

Draft sketches of our first meeting.

Because this week is my turn to make presentation on our Application class, Kai is very thoughtful and sweet and he let me work on the easier part: event when roadblocks blocking characters’ movement and  event when two characters meet each. He would work on the harder part: the map — how to generate a map that won’t blocking characters’ path at the beginning or forbid their meeting.


Before I start to coding, I looked for some similar examples to help me to build a fundamental concept about how write this projet:

A classic PacMan game: http://graysonearle.com/edu/gamepro/pac-man-1v1/  

and its code: http://fmundergrad.hunter.cuny.edu/~warraichq/2pgame/

A puzzle game similar to ours: https://codepen.io/anon/pen/xXEbgJ 

A beautiful game controlled by keyboard: http://alexanderperrin.com.au/paper/shorttrip/


So the first thing I did, is to change the blank background to grids, like this:


I used a function defined this canvas as a combination of 18×8 grids, the size of each grid is 35×35. Include the characters, ever thing every movement of this canvas will be 35×35. Based on this reason, I changed the circle character to square as well.

One detail I like and be proud of is the face of my characters.  At the beginning, I just wanted to draw a static face, and I accidentally drew it awry, then I came up the idea use facial expression to show the moving direction of each movement:

a: draw_player(pos_a, direction_a, color(128));

b: draw_player(pos_b, direction_b, color(255));



This is the first time I write something this completed, so I had so many questions, luckily enough, I have a professional coder friend Bowen and thanks to him, I learnt so much from this project this week.

For example, he suggested us to add an environment to limit the speed of movement:


He helped me to organize and tidy the code and taught me this fancy way to write an “if…else…” sentence as :


It’s the first time I saw this kind expression:

A = xxx?a:b

means: Is xxx true or false?

if xxx is true, then A == a;

if xxx is false, then A == b;


Here are some wechat conversations between Kai and me:

I followed the advice of Bowen and used 0 and 1 simulated a static map like this:



We still couldn’t find the best way to solve the map problem, but thanks to Leon’s ICM help session and YangYang’s help, we have two ways to code:







So here is our final sketch:



We still have some glitches need to be fixed, like:

and we certainly will keeping doing it.


Thanks to all my offical and unofficial partners: Kai, Bowen, Leon and Yang, I learnt so many things from you!

We made this!





week 4

let x = 0

function setup() {
createCanvas(400, 400);

function draw() {

line(x + 50,0,x,height);
line(x + 100,0,x,height);
line(x + 150,0,x,height);
x = x +5




//let i = 0


function setup() {
createCanvas(400, 400);

function draw() {

let i = mouseX;
while (i < height) {
i =i+5;

//for (let x = 0; x < 300; x = x+50){
// line(x,0,x,height);

// stroke(0);
//line(x + 50,0,x,height);
//line(x + 100,0,x,height);
//line(x + 150,0,x,height);
//x = x +5











Posted in ICM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s