Week 5 Midterm Process

My Midterm Process!

For my midterm project, I decided to make Build Your Own Slime. The idea is that the user can create their own slime by choosing the color, face, and charm. After they finish making it, they can play with it by poking, stretching, and shaking it before saving their slime.

For this stage, I started designing the interaction and working on the basic code. I made a  slime class and used different variables for the slime’s color, face, charm, and size. I also made different pages for the slime lab, playtime, and the final screen. This helped me figure out how I want the whole interaction to work.

The most uncertain part for me was figuring out how to make the slime feel more like an actual cute slime instead of just basic shapes. I also wasn’t completely sure how I would add the different images and sounds later. So for now, I made a simple sketch/prototype of the idea using basic shapes and emojis. This was mainly to see if the idea and interaction actually worked before spending time making all the final assets.

As I continue working on it I want to replace the basic shapes with PNGs that I draw myself, including different slime colors, faces, and charms. I also want to add background sounds and other small details to make the experience feel more complete and fun. For now, this version is basically a sketch of where I want the project to go and just a basic idea of it, and I’ll keep building on it throughout the next stages.

The part of this project that I am probably the most scared about is making it feel like an actual finished interactive artwork and not just a bunch of buttons with a slime on the screen. I know I want to use PNGs that I draw myself for the slime, faces, and charms, but I am not completely sure how all of those images will work together in the code yet. I also want to add sounds and background noise, which is something I have not really worked with much before. Another thing I am worried about is making the slime interactions like poking, stretching, and shaking actually feel fun instead of just changing the size of the slime. For now, I tried to reduce that risk by making a really simple version first. I focused on getting the main pages and interactions working before worrying about how everything looks.

// poke

if (
  mouseX > width * 0.25 - 75 &&
  mouseX < width * 0.25 + 75 &&
  mouseY > height * 0.80 - 30 &&
  mouseY < height * 0.80 + 30
) {
  slime.size = 170;
}

This code segment is for the poke interaction. To explain, right now when the user clicks the button, it makes the slime smaller as a simple test. In the final version, I want to replace this with a different PNG of the slime being poked, along with a sound effect, so the interaction feels more realistic and fun. This part was a little hard for me because I didn’t know how to set the size and position of the button using the percentages of the canvas. I had to figure out how the width * 0.25 and height * 0.80 worked so the button would be in the right place and the click would actually work.

Leave a Reply