Module 3 Formstorming

Weekly Activity Template

Livia Kurti

Project 3

Module 3

In this model, I learned more about how to mix sound and physical interactions together. For example, in Activity 1, I focused on the visuals the user would see, and in Activity 2, on how the user would interact. That’s why, in my final design, I combined both elements by creating an experience where the user imitates turning a telescope. This action, when done on the computer screen, generates a unique-looking kaleidoscope pattern—bringing together what I learned in both activities.

Activity 1

After watching Steve's tutorials, when I was trying the sketches, the very first problem that annoyed me was that instead of clicking continuously, I could control it around by pushing it continuously. This made it much smoother and a lot more fun, with better interactions.

Continuing from the last code, I added a function to change the colors depending on which arrow I push down.

Then I started to play around with code that rotates 3D objects based on the angle, depending on which arrow key was pressed. After experimenting, I found that I could create something interesting that resembles the Red Cross symbol.

Then I played around by adding more 3D objects and experimented with where they were placed in space. It was interesting how, sometimes, they overlapped (because of the colors), and other times, you could feel the depth as if those objects were behind each other.

With ChatGPT's help, I made a few adjustments to the first sketch, such as making it bounce around the walls. It started working, but I couldn’t control it, it just kept bouncing.

After telling ChatGPT, it made adjustments, but it still bounced between the walls. However, I could control which wall it bounced off, as seen. I could make it bounce very close to the left side when I was hitting left, and I adjusted how it bounced when hitting up or down.

This time, I made shapes appear randomly depending on which arrow was clicked. For example, if the up arrow was clicked, it created triangles.

Then I made 3D shapes, depending on which arrow I click. It will change the circle to a cylinder, then to a cube.

It’s the same thing as last time, but now the changing background color also changes, giving an interesting visual response depending on which arrow I click on.

I wanted to create something interesting, so I designed cards like the heart 5. I tried to imitate the shape using cubes, and it ended up being very interesting.

Then, by placing random 3D shapes in space and editing how the arrow works, I could move up if I click the up arrow, and move down and sideways with the right and left arrows. This is different from the Sketch code, where it changes which angle you see the rotation of the objects.

Then, I asked ChatGPT again, 'What other fun code could we make?' so it gave me code for generating firecracker-like visuals. I played around, and depending on which arrow I clicked, different colors were generated.

Then, I focused on creating a rhythm game, so with Chaty’s help, I made the basics of the counter using codes from last year. However, it didn’t work as intended, so I decided to move on to something else.

That's when the kaleidoscope thing came up, so I asked ChatGPT, and it made me code so that depending on which arrow I click, it changes the shape. Also, it was only one object.That's when the kaleidoscope thing came up, so I asked ChatGPT, and it made me code so that depending on which arrow I click, it changes the shape. Also, it was only one object so...

So after telling it, I made adjustments, and now I can stack the uniquely looking shapes on top of each other, creating interesting patterns.

Here’s another one because I had fun playing with this, especially when it looked like a flower or a short. So, I included it in my fromstorming.

Afterwards, I asked to make it into lines instead, so I started playing around with that. Once again, depending on the arrow key, it generated lines of the uniquely looking shapes.

And another one, when I covered the screen, this one looked really pretty, so I encoded it.

Then, edit the code I made so that they rotate around after generating it.

This one ended up looking so cool and made me dizzy when I was looking at it for too long, but it created such a kaleidoscope effect that I just had to include it here.

Then, using code from the arrows, change the angle you're watching from and add a bunch of chaos to it. It looked very interesting, so I added it here.

Then, using the same code I asked ChatGPT to create, I made them resemble planets or a solar system, and it ended up looking very interesting. Even users would have fun with it. If I add more elements, I could even turn it into a solar system learning game if I wanted to.

Then, going back to the 3D shape once again, I played around with a zoom-in and zoom-out function instead of just viewing the object from certain angles.

Then after, I thought about making a mini-game where I ask ChatGPT how to make a ball hit a wall, like a maze function. I want to use code to move the circle around in a way I was experimenting with, in case I want to create a game with a maze-like function or something similar.

And the last one, I added some followers, or maybe like ducklings following the mother. It could be an interesting concept, like taking all the ducks safely to the other side or something, like in a game.

Activity 2

The first one I made was a very simple piano-inspired keyboard, especially since I used a sketch file that creates those melodic or music-like tones.

Then, I played around with ways of movement inside the screen, like putting copper tape for each direction.

Then I was thinking maybe I could replicate the feeling of scrolling, so I made curved copper tape lines and used square-like buttons for the up and down keys.

Then, I made scrolling with both up and down together in one line, followed by right and left in lines as well, to maintain the scrolling-like feeling.

Then, using the kaleidoscope code from the last activity, make copper tape in different shapes so that when I click on a triangle, that shape will appear, and so on.

Then, I made square lines for only the left and right, and I want to make it so that tapping and scrolling on it feel interactive.

Then I used the crane or clamp to do the Poppy Playtime video game-like interaction, where they use their hands, like cranes, or extend them out to hit the copper tape against each other.

Then, when getting the piano keyboard back, I wanted to create a fun interaction. When hitting down the 'key,' the LED sticker would light up, but it didn't and can be seen later. I will explain the reason.

This was my very first prototype when I was inspired by the code and made it out of a plastic cup, trying to replicate the turning interaction like with a real kaleidoscope.

Here is a better shot of what I wanted to do, where I wanted the copper tape to be, and how the whole circuit or interaction would be.

Then, using aluminum foil, I made a drum-like keyboard experience.

This time using the metal chopsticks.

Then, I remembered someone in Project 1 said Play-Doh is conductive, so I wanted to see it for myself. After finding a container in our house, I was surprised—wow, it's very good, almost on the same level as copper or aluminum foils.

Then I shaped them into a square, circle, and triangle, and played around with touch and hand interactions.

Then, using the same keyboard made of Play-Doh, I used a metal chopstick to play around.

Then I did a small experiment using the magnet. I wasn’t expecting much, but it reacted to the alligator clips and activated the MakeyMakey. However, it didn’t do anything when it simply touched Play-Doh. It was an interesting experiment, though. I could have hidden the alligator clips behind a thin piece of cardboard, and that could activate the MakeyMakey by having the alligator clip sense the magnet nearby or something.

Getting back the claw this time, actually holding the aluminum foils as an interaction, I found it kind of similar to shooting games when you need to hit objects.

Continuing with the claw, I tried and played around with the arcade claw machine game like experience. It could have been done on a computer, showing randomly what you won or maybe offering a free (re-play) play.

Then I wanted to do something interesting with fabric, so I used the metal chopstick as the core and created petals from fabric to use as the arrow buttons. It was a little tricky to do since the alligator clips were heavy and were pulling the fabric petals down.

I was trying to make a kaleidoscope random generator by hitting and rotating a metal chopstick. The problem was I couldn't do the motion too well since I was recording with my other hand.

Considering the last one, I used the sound-making code this time, trying to create random sound responses by randomly hitting the aluminum foils and trying to turn them around, like in soup or water, to make even more random and interesting interactions. However, it was kind of hard to do with one hand once again.

So, going back to the LED stickers, it transmits electricity. When I was playing YouTube on my computer, I noticed it became faster, only to realize I had used the space button for an experiment. It has an electric current, but not enough for the LED sticker to light up. That was kind of sad I could have made a few interesting prototypes with it.

I just wanted to put that keyboard interaction there again as it had a fun look to it, like a shocking-looking emoji face that also had an interesting interaction to it.

Then, here are the cardboard prototypes of the kaleidoscope I was making when I only had the first two parts.

Then, here are all four parts together. While prototyping, I realized it wasn’t going to work. Soon after, I reduced the four parts to three, which was important and useful. If I hadn’t done that, I would have wasted a lot of time and created bad user interactions at the same time.

Project 3

Final Project 3 Design

For my final design, I created a telescope-like 3D printed model using the key interaction of turning the middle part, similar to how it's done with real-life objects to zoom in and out. Here is the link to the website I made: Click here

Here is the demo of how it can be turned around. Unfortunately, the main rod inside the telescope broke, so it can no longer be turned around in the middle area the way I intended. I will likely need to fix some things in the 3D model and then reprint it for a better experience. Additionally, I need to fix up my code for the mini-games.

Powered by w3.css