Module 3 Formstorming

Weekly Activity Template

Ada Walia


Project 3


Module 3

For Activity 1, I focused on ideating based on each of the example codes given. I also tried to further it by connecting to the lecture content, for example, I saw the concept of touch hear from the National University of Singapore where users would touch text and have it read to them in the week 10 lecture. I took this concept in my forstorming that was inspired by Braille. For Activity 2, I was focused on coming up with unique ways to connect to my code ideas. I experimented with different shapes, like using a cube and bangles.

Activity 1

Here I have changed the colours from the template to the primary colours (red, blue, yellow) and the shades, white and black. I have also added another button using (key === 'w' || key === 'W') for the colour white. I have added another variable to valR, valG, and valB, called alpha representing the opacity, and kept it at 10, so the colours are a bit transparent and so users can use this as a colour mixing tool. Also, I am curious as to why I can easily create purple and orange but I am not able to create green. I wanted to be able to mix a green colour that isn't muddy so I switched the primary colours to magenta, cyan, and yellow to do so. I have coded a grid of 6 circles (representing braille) by using the following p5 code example. <a href='https://editor.p5js.org/zhiru44@gmail.com/sketches/45qEIeQ2e'>See the code here</a> Here I have added a yellow dot that can move between the circles. Now when the space key is pressed there is a light blue mark. I have used this function to write the letter Z in braille. <a href='https://chatgpt.com/share/681618cc-cc70-8011-b0c4-12960a69726a'>See AI Chat</a> Adding different textures from photos. They are changed using the keys w, a, s, and d. I changed the shape to a cube. Here I'm experimenting with ambientMaterial, specularMaterial, and normalMaterial. I changed the torus to a plane and added an earth picture as a texture and then kept the Sketch 3 camera code. I changed the plane to a sphere. Here I have created a zoom in and out on an image using the up and down key. Also, the space key is being used as a black-and-white filter. <a href='https://chatgpt.com/share/68163cbe-83d8-8011-b31c-b6711aa18dd2'>See AI Chat</a> Here I have created 4 cubes that can be moved. I am only able to select cubes right now before it stops working. <a href='https://chatgpt.com/share/681642e9-21f8-8011-8061-a79462634437'>See AI Chat</a> Now I am able to move all 4 cubes. <a href='https://chatgpt.com/share/681642e9-21f8-8011-8061-a79462634437'>See AI Chat</a> Here I have made the cubes and added more keys to be able to turn the cubes more. <a href='https://chatgpt.com/share/681642e9-21f8-8011-8061-a79462634437'>See AI Chat</a> When the space bar is clicked a heart appears and a heartbeat sound plays. I used this code example as a reference. https://editor.p5js.org/Mithru/sketches/Hk1N1mMQg <a href='https://youtube.com/shorts/dHRpdeBa6Jk'>Watch the Video</a> Here I have made it so that the user can click the space bar multiple times and have the heart pulse. https://chatgpt.com/share/681642e9-21f8-8011-8061-a79462634437 <a href='https://youtube.com/shorts/dHRpdeBa6Jk'>Watch Video</a> I have added a heartbeat line every time the space bar is clicked to track it like a heartbeat monitor. https://chatgpt.com/share/681642e9-21f8-8011-8061-a79462634437 <a href='https://youtube.com/shorts/dHRpdeBa6Jk'>Watch Video</a> Using sketch 6 as a base I created an interaction where every time the space, up, down, right, and left keys are pressed vertical rectangles appear along with a sound. https://chatgpt.com/share/6816f927-9a00-8011-ac26-ca93d457056d <a href='https://youtu.be/uixidW6nUtk'>See Video</a> Here only one rectangle appears depending on the key pressed. Space = White, left = blue, up = yellow, right = red, and down = magenta. https://chatgpt.com/share/6816f927-9a00-8011-ac26-ca93d457056d <a href='https://youtu.be/nsBUheUJaoQ'>See Video</a> Here only one circle appears depending on the key pressed. Space = White, left = blue, up = yellow, right = red, and down = magenta. https://chatgpt.com/share/6816f927-9a00-8011-ac26-ca93d457056d <a href='https://youtu.be/kbiDOHT-ENE'>See Video</a> Here if the up key is clicked the background changed colour Here if the space key is clicked a red circle appears Here the circle has been centered Here the circle grows when teh space bar is pressed and when the up arrow is pressed everything resets

Activity 2

Here I had the ground connected to the foil and then another wire connecting to that foil that I used to press the other keys. Here I was able to make the up key work on this coppy tape square I created. The up key turns the virtual square blue. In this iteration, I was able to make my copper tape square work for all four keys and change the virtual square from blue, red, yellow, and black. Here I used my colour mixing code and am showing how I can use the copper tape square to interact with the website.      In this iteration, I have added a button for the w key which represents white so users can mix white into their colour or go back to the base of white. Here I am showing all the buttons together in my final iteration of the colouring mixing code with cyan, yellow, magenta, black, and white buttons. Here I have used bangles to create a braille-themed button to match the braille-inspired code I have created. I only have up, down, left, and right working right now.       Here I have the down key (to move the circle down) and the space key (to create a permanent blue circle) working.      This is two buttons working, one for rotating and the other for changing the texture.       Here are paper cubes I have created for my interactions I have created a cube that as you turn it and press onto the ground you can change the texture on the online version.       Here I am showing this arrow pad I have created and how it can be used to rotate the cube. This is the same cube mechanism working on the torus shape and switching textures.       Here I am showing it all together being able to change the rotation direction and the switch between 4 different textures using the cube. This shows a zoom-in and out feature as well as a button to switch from black & white to colour. Here I am using the buttons I created for the previous code and testing it out on my 3d earth sphere zoom in and out code.       Here I am using the buttons I created for the previous code and testing it out on my flat earth plane zoom in and out code.       Here I am using the arrow pad I created to move these 3d cubes.      In this test, the cubes are not rotated so I am trying to use my copper tape arrow pad to get them aligned.      Here I have created a simple button for my heartbeat  and ekg line code.       Here I have used tin foil to create a heart-shaped button.       In this test there is a ground and one working key which I am using to create white dots.       Here I have created buttons that are colour-coded so the user can see what colour dots they are going to be placing on the screen.       Here I am doing the same thing as the previous one but trying it out with my rectangle code instead of circle.       In this test, there is only one button which the user holds to create these overlapping rectangles, if they let go the rectangles stop appearing.

Project 3


Final Project 3 Design

This is an interactive game/learning experience for Braille. Users can use the copper circles to create letters and have them read out to them.

×

Powered by w3.css