Concept
Since I love the concept of interactivity, I thought to myself: “It is possible to simulate physics and collisions between objects in a simple art?”. Many ideas came into my mind, but I fixed into creating something simple and, arguably, realistic: A interactable painting that displays a glass cup and ice cubes, that you can interact with and displays a sense of physics and collisions.
Design
When I arrived at my idea, I first started to narrow my vision on what is possible to make. In my previous projects, I had done things such as abstract paintings with the use of figures, and “physics” like simulation where diamonds fall and stack on top of each other (although honestly they look more like ice). Given this, I made a sketch to understand how can I implement these physics:
Me trying to figure out the collisions and physics.
And also searched a reference in Google Images for the ideas for the art, thus I arrived at this image created by crayon.ai:
In order to interact with the painting, the user only needs to point at the objects and press at them, either only clicking or holding it to be able to move the object freely. Also, the sound design for this art will be kept minimum, as art, in my opinion, should be a relaxing experience. If a glass cup falls on the wooden table, the appropriate sound will play, if an ice cube falls into the glass cup, the appropriate sound will also play.
Therefore, I found the following references for the music used is the following:
This makes me want to create a nostalgic-like art.
Or also this one, which is more classical and makes me go through a more conventional art style:
Challenges
- Physics are hard to program and simulate, due to the many conditions one has to create and also ensure to keep the illusion that the properties could be seen in real life. Due to this, I had to ignore the idea of also adding rotations since it would be difficult to complete in a timely manner.
For example, my current code for collisions and gravity looks like this:
//Display cubes and apply collision and gravity.
for (let i = 0; i < cubes.length; i++) {
cubes[i].display();
//We check collision with the glasses. (Since we are simulating glass cups, the collision for the top is disabled for the glass cups}.
for (let c = 0; c < glasses.length; c++) {
//Check if it is on the X range of the table.
//Check if it is on the X range of a cup.
if (
cubes[i].x < glasses[c].x + glasses[c].w &&
cubes[i].x + cubes[i].w > glasses[c].x
) {
//I am standing on an edge of a cup on the right side?
if (
cubes[i].x < glasses[c].x + glasses[c].w &&
cubes[i].x + cubes[i].w > glasses[c].x + glasses[c].w
) {
print("right corner detected");
if (cubes[i].y + cubes[i].h >= glasses[c].y) {
}
}
//What about the left side?
else if (
cubes[i].x < glasses[c].x &&
cubes[i].x + cubes[i].w > glasses[c].x
) {
if (cubes[i].y + cubes[i].h >= glasses[c].y) {
print("left corner detected");
}
} else {
cubes[i].gravity();
}
//Please do not pass the cup.
if (cubes[i].y + cubes[i].h >= glasses[c].y + glasses[c].h) {
print("Im here 3");
}
//Nothing else we can check.
else {
cubes[i].gravity();
}
//Please do not pass
//If the cube is on the X range, then check Y axis to apply collision
} else {
cubes[i].gravity();
}
}
//We check collision with the cubes. Also, it is important to add the number 1 to avoid comparing the current index.
for (let c = 0; c < cubes.length; c++) {
//Check if it is on the X range of a cube.
if (
cubes[i].x < cubes[c].x + cubes[c].w &&
cubes[i].x + cubes[i].w > cubes[c].x
) {
//I am standing on top of the cube?
print("top of a cube detected");
if (cubes[i].y + cubes[i].h >= cubes[c].y) {
//Make a comparison.
} else {
cubes[i].gravity();
}
//If the cube is on the X range, then check Y axis to apply collision
} else {
cubes[i].gravity();
}
}
- Simulating the art seems challenging, but in theory, it should be possible to finish if I add images that are similarly.
- Due to the nature of this project, I want to keep the player immerse in the art while also understanding (intuitively through the elements of the painting) that it is interactable.
- Keeping all the classes consistent among the shared properties. Likewise, in order to keep best programming practices, I decided to divided it into the following way:
-
- Items:
-
- Glass.js (Glass cup)
- Cubes.js (Cubes)
- Items that are part of Scenario.js:
- Table (A wooden table)
- GlassSpawner (Still deciding on how to represent it, because I want to keep consistency with the art)
-
- Menu & HUD:
- Menu.js (Can display both the start menu and instructions)
- UI.js (Buttons that will be displayed which allows the player to return to the main menu or disable the music and/or SFX).
- Audio:
- Audio.js (For both music and SFX).
- Items:
-
Risk Prevention
- In order to ensure I finish the project, I need to work at least per day on it. The hours can vary since at the time I am writing this I am still a college student.
- The menus are possible to make without issues, the only difficult part that risks the entire project is the creation of the physics and collisions.
- Keep in mind that, if difficulties present, I can ask the professor to clarify or suggest new ideas on how to approach certain part of the code.
- Used code that I made before for the physics and collisions in order to reduce time spent.
Midterm project in its current form
Here is a quick showcase of how my midterm looks as of February 26th, 2024. This will be kept as it is, to showcase the progress once it is finished:
I have not had the time to fix the cube physics, sadly. Also, keep in mind, you can move the red square with the mouse if you hold the left click.
Conclusion
This idea was born due to the need of experimenting with new, challenging ideas. Simulating these properties in a canvas is hard without using any reference, but at the end, this will help me increase my confidence as a programmer.
Sketches, Ideas, Drawings!
