NOC W10 – map🗺

 

A park that was designed very very casually, by Lisa.

 

Inspiration:

After learning Autonomous Agents, at first I thought that I can create a shoal of fish getting the inspiration from the video I accidentally found for week9 assignment. 

(very accidentally, when I see Moon talk about “boids” I was so surprised🤯🤯)

But then I think a top view could also be interesting. So I change my mind and find a very cute map here. Thus I decide to do this.

 

Process:

Recalling the problem I meet for another assignment, I try to use the collisions to create a wall. It works.

 

 

Thus, I arrange them into a rectangle to simulate the place we cannot walk on in the park.

 

 

Then I hide those ellipses (which help me to find the correct location), and draw rectangles instead, to make the canvas more …clean!

 

After finishing exploring this, I start to have two vehicles, and one is chasing the other. To let them move, I let the creature to wander a little bit.

 

 

Then I thought what Prof. Moon taught about braking could be useful, since I cannot let these two guys running forever😇(that would be so tired)!!!

 

I add the condition to let the creature stop while the it steps into the brake place for the girl (magic cat🧙‍♀️).

I think I will be cool if I can show the track of this creature.

So I start to let the cat (I’ll call it cat here) leave paw prints along the way.

 

According to this video, I think I could use an array to store its positions, and them draw them out on canvas. It turns out to be right. 

 

Also, I find millis() in p5 reference page. Instead have a counter/timer myself, I find it very convenient to create a series of behaviors. I use this to calculate the time I should store the position into the array, to make the paw prints base on both time and the cat’s movement.

 

I also slice this array when it have more than four element, so that the paw prints will not be everywhere while still tracking the cat’s movement.

 

(how I get to have my cat’s paw prints)

After I could leave the paw prints on canvas, I want to rotate them to make them more vivid.

 

Here I rotate them using the same angle. Then I realize that I should also make the angle into an array, so that their rotating angle are based on exactly that specific time.

 🥳🥳🥳

 

I then inset my drawing, upload my images. And also I draw circles because it help me to see the images’ positions.

 

 

Since I have said that I cannot let them run forever. I cannot let them stay there forever as well. So I designed the behavior that the cat will escape after several seconds. And the girl will chase it again.

 

I actually meet problems here. I at first create a loop myself😇. At first I say that if the cat stay in the brakeRad, it will stop, and after some seconds, it could move again. But it turns out that, even though it can move after some seconds, it still stay in the brakeRad, and the counter/timer will work again and it will stop…😅

 

To solve this problem, I use condition “canStopAgain”.

 

For the final part, I add colors and more barriers into this map (in a rush so it is not that. visually appealing)  

 

Reflection:

I add this part here because I thought there’s still a lot of room for improvement.

1. the collisions is so weird here,  it could be easy for the characters to be stuck in the places while they are bouncing here and there due to the collisions. Maybe I can make them like sweeping robots. When it detects an obstruction in front of it, it will automatically turn its direction and rotate at a certain angle.

According to Daniel Shiffman’s video here, I’m thinking about having those string forces when the character is close to this path, and break those force when character are away….

 

2. I feel the way I set barriers is so annoying, maybe I can find better way to set them.

3. Actually there are times the barriers fail to stop them🙃

 

 

NOC example code: https://editor.p5js.org/MOQN/sketches/LWApFbBVl(wander)

Daniel Shiffman’s video: https://www.youtube.com/watch?v=ujsR2vcJlLk