Author: xl2149

Project Name:

Interactive Map of China

Project Description:

It’s an interactive map made by thousands of particles, lining up into the shape of China. The interactive part is when user click the certain area of the map, the particles will vanish and reshape into the outline of the province of that area. And by clicking the back button on the page, the original China’s map will show, and user can choose a place again and see the shape of that place.

This map is meant to be educational and recreational, and whether the user comes from China or not might get a better knowledge of the geography of this country, and a better insight into its provinces, including how many there are, respectively how large they are.

Project Sample:

Making Process:

Difficulties:

1. How to localize each particles on the canvas to make them shape into the form of a map, i.e, how to calculate their coordinations.
2. Transformation from one map to another.

Techniques:

1.To solve the coordinations problem, I used pixel of the image. First, I chose a picture of the map and pixelized it:

And then I loaded the pixel of the picture on p5, and I was able to get the color of each pixel. Then the algorithm is simple: where it gets a black, it puts a new particle on. And by adjusting the frequency of getting pixel, I am able to adjust the density of the particles:

2.Also, the map needs to know where the user mouse has hovered and clicked, which means I need to know the specific coordinates of the provinces. And to do that, I did some image editing work to make the map more visible and easier to calculate the coordinates. Then I used a simple formula and implemented in python and had it do the calculation work for me. Finally, I stored the data into an array and utilize them.

3.For the transformation of two maps, a force is given when the mouse click happened on one province. More specifically, two forces is given and they are perpendicular to each other, which will creates a rotating effects.

Things to Improve:

1. The transformation of the maps hasn’t reach my expectation. The main problem is that I didn’t work out a better way of particles showing up. What I expected is that they can come out from all sides, flying, rotating, and then get into its own position. However, I didn’t find a way to have each particles to find its destination (its coordination) after moving.  But now I have some clues that I can use its destination coordination as the source of the force, and there will be attraction. When the particles arrive, the velocity will be set into 0.
2. The whole project is a little bit dull and incomplete without any introduction text. I am thinking about adding names of each maps, i.e., adding names of each provinces on the screen to have my users better know about this province, or even its cultures and features. And those texts, can also be formed by particles, and have same effects as the images.

Reflection

1. My skills of using pixels is improved after the project, and now I know how to use them to analyze the image. And I think this is a very useful skill. Cause I am taking machine learning this semester, so now I now taking advantage of pixels might create very intelligent projects.
2. Also, my utilization of class and objects is much improved, and I am more familiar of the function execution in p5. 

Here is the link of my hw6:

https://drive.google.com/open?id=1OADlrDF2xEMzEhg7pOFDvmIH-BuKZnek

https://drive.google.com/open?id=1CM0sOsb0V3rFNNz_2eGo5H6qBsCSLaDJ

 

As it is showed in the picture, the purpose of the user is to move the blue earth around and to collide three other planets away to protect our sun. The earth is fixed on the specific track and it can move along with it with user’s mouse. The collision of the earth and the white planet is through function checkCollision().

Besides, the sun has attraction towards the three white planet, and since it has huge mass, its position barely changes. So simply saying, the earth has to protect sun from keeping coming planets, and the collision between sun and the white planet will result to a failure of the game.

Another fun fact is that I give our sun eyes and he will keep staring at the earth and watch it to check if it is doing a good job.

 

Here is the link of my slides:

https://docs.google.com/presentation/d/1Up1V08LlB9Yyw5GhILbI65nw43jcQqH2JhYp9sBNp34/edit?usp=sharing

This project is created by a user named “aadebdeb” on OpenProcessing, and its name is “Force by Mouse to Lines”. The interaction part is that when one pressed the mouse, there will be force come out from the pointer of the  mouse, and the lines around the mouse will be influenced and begin to transform into curves. The influence range is a circle size, and the far the line is from the pointer, the smaller the force influence. Under this situation, user can create different images by moving and pressing their mouses. And some of they are mountain shapes, water shapes, planet shapes, or crazy shapes:

  

All these different shapes make me think that by simply moving and pressing, we can get very different and impressing outlook of lines, if somehow we can record each coordinates and time of the pressing, then we can store shapes in this way, then the computer can create beautiful images itself.

Video:

https://drive.google.com/open?id=1I4ietWbcI_a4xDuA_YQEPNe0VnShRw5r

Description:

I created a thousand small circles using particle classes and give them random size and mass. I didn’t seal the ceiling of the “zone”, and at first the particles will fall from sky. There is gravity, air friction in the whole “zone”, and in the white area, there is resistance that slows the speed very much. And there is wind force given by the mouse coordinates, so we can move the particles by moving the mouse. If the circles touches the side, it will bounce back. But if we leave our mouse at the bottom of the “zone”, all the particles will stop moving and gather together. 

Image: