I haven’t done much final progress updating because I’ve never felt like I’ve made enough progress to write about it. I worked in two steps, first trying to get the camera to work and take the photos in the way that I wanted it to and them to create and place stickers where the user clicked. I spent a lot of my time working on improving what I had before, getting everything straightened out.
There’s my general process:
Get the camera working/saving images to the canvas
Make the images/stickers/stamps
Get the stamps to print on screen
Make sure the camera and the stamps work together in one program
I made a photo booth for my final project. It works the way one would expect a photo booth would, but also has elements from Japanese photo booths, called Purikura, which are popular in Asia. I’ve always really enjoyed making these photos, which are printed on stickers that people used to stick to their phones (before smartphones existed) but it’s always really expensive. I thought it would be nice to recreate some of the fun on my computer. There are two key differences between photo booths in the US and Japanese ones is that the Japanese ones edit your pictures to make you more attractive and after the photos are taken, the users can draw on and place images on top of the photos. I really could only do create the latter experience, but think that even without the automatic airbrushing, using this photo booth is a bit of a unique experience for those unfamiliar with Asian culture. I would imagine this version would be used at parties as a kind of replacement for a guest book.
This photo booth takes photos of the users and allows them to select with the number pad and paste with a click of the mouse small images on top of their photos before finally saving the whole collection to the computer. To retake the photos, they can refresh the window and can delete objects they’ve placed using the backspace.
Using this booth is a bit difficult and I’ve left it a bit vague. While I’ve been taking photos in these booths all around the world, I’ve never been with someone that actually can read or understand Japanese, so while there are many clear instructions for how to use the machines, I’m never completely sure if I’ve got it right. I was taught how to use them by people who figured it out on their own and I’ve done the same for others. Still, one is able to choose and paste stamps where they want, deleting images for which they didn’t like the placement. They should also be able to save the images when they’re done, as well.
What struck me the most about new media was not the medium used to create it, New technology, but that it facilitates meaningful Interaction between its participants. It’s essential to teach people how to use technology in order to understand our New rapidly changing world and communicate with computers, it’s a big part of why I’m taking courses here. However, it’s more important to teach people how to communicate with each other. Computational media allows people to communicate with each other and share ideas with people they may never actually meet in person. People can learn New skills that they would have never been able to Learn in a different time. Teachers can share knowledge and expertise with students all around the world. The lines between creator and consumer, producer and user are now blurred. In this regard, New Media is hailed as a harbinger of great social change.
When people who were not previously able to share their thoughts and opinions now how a channel where they can distribute their message, giving a voice to the voiceless. Regardless of new channels, methods, and mediums to communicate messages, people are still people, they’re just louder. These people who both produce and use content have been molded by the media they consume and make many of the same mistakes or send similar messages that that more traditional make. You can see this when examining the actions of young entrepreneurs to social media celebrities YouTube and even the President to the United States.
More than learning to communicate with computers and technology, people need to learn to communicate with each other, with people who are different and to respect those differences. They need to learn the importance and impact of their words and actions on those around them. People are still people even if you can’t see them, or they’re behind a screen. Teaching people to communicate with computers is important, but teach others to communicate with each other is essential.
Using the NASA Astronomy Picture of the Day API, I created a minimalist program that presents the viewer with everything that they could want to know about the picture of the day, except the actual picture. This encourages them to use their imagination and instills a sense of wonderment when picturing the cosmos. The program only shows the present day to emphasize the importance of living in the present. But the user can choose to go back and forward by pressing the left and right arrow keys.
Through making this program, I learned after a lot of trial and error that there is something wrong with my p5. It can’t actually run this program, even though literally every other device/console/program/thing that was used to try to call the data worked, including but not limited to terminal, the google browser, and p5’s online editor.
I tried to make a Japanese photobooth. They’re a lot of fun to take pictures with friends, but really expensive, so I wanted to recreate some of the fun/ridiculous on my computer.
Ideally pressing the return button would make the camera take a series of 4 videos in relatively rapid succession. After, the user would be able to draw on it and add ‘stamps’ to personalize the photos, for example, the date the photo was taken, a phrase to describe the relationship of the people in the photo, cat ears, hearts, and a brush to draw whatever they want. The user would decide where they would want to place the stamps by clicking the position.
When I set about trying to create the photobooth, I had some difficulty with my camera, it wouldn’t resize to a smaller image when I drew the captured image on the canvas. I decided I’d deal with that issue later.
I also wasn’t sure how to create a timer that would take pictures in succession, so I decided to go for one image for now. The cat ears and heart were drawn in Illustrator and the date and phrase were created in p5. I was only able to get the images to be placed with a mouse click, but ran into an issue where with the first click, both images would appear.
Trying to combine these two components of the photo booth gave me a lot of trouble. They worked fine separately, but would disappear when placed together.
I had a lot of difficulty trying to decide what to do for the assignment this week. Looking through past projects wasn’t very helpful, so I watched all the videos linked on the Creative Computing WordPress. I decided to make something heavily based off one of Dan Shiffman’s videos, but still ran into a bunch of issues. This was another outer space-themed project because I run out of ideas a lot. The goal was to generate stars randomly with the push of the up arrow key and to place floating images where the mouse was clicked. I was able to get the stars and then the first image, but I couldn’t get them to work together.
Went back and re-worked the assignment to make it work.
I wanted to make something that didn’t really need to be made for this assignment. This is a game about feeding cats. It’s not particularly rewarding or inspiring. I knew that the most difficult part to this assignment would be the game’s main function, randomly generating a triangle in one of four positions. I asked my friend for help and this is how we made the triangles work. The program would generate a random number between one and four. We found out that this included numbers with decimal points, so we made sure to make the computer choose integers between 0 and 4 by using the parseInt() function. If a 2 was generated, a triangle would be drawn in the second position a triangle could be drawn in.
Then, to continue generating these random triangles, if a 2 was generated and the mouse clicked in the area in the second position of the triangle, a new number would be generated. Generated the new numbers and triangles happened too quickly, so I put a half a second delay on the number generating function. To make this an actual game, each time the correct triangle was pressed, the player would be awarded one point. When 10 point were reached, the screen would switch to an ending scene for 4 seconds, while the point count would reset back to zero.
After I figured out these logistics, I drew the cat faces. I don’t think I made them very efficiently and ran into issues with strokes on shapes, even though I used the noStroke function/command. I had trouble recreating the cats in the new positions and doing basic math. As you can see, one cat is missing an ear. This is not intentional.
I learned classical piano for 12 years. I’m awful at it. What came with 12 years of classical piano training was some passable knowledge of music theory. Learning to play an instrument is hard and the average listener doesn’t put much thought into what makes some songs work. Because music is auditory, I want to visualise the structure of songs in a way that could be understood by someone who doesn’t think much about music theory. At first, I wanted to visualise the key in which certain pieces were composed to show patterns and parallels. I would have to think more about which aspect of music to focus on, for example, I could also compare the chords of a song to the melody and repetition or looping that happens with music.
I imagine colors and lines/bars for this visualisation, but I’m not really sure how I would do so at this point. Below is some inspiration:
An alternative could be creating something which analyzes the most common words in on an album, artist’s discography, or genre of music and displays these words. I could also do variations on this theme, as well. Similar to one of the first pieces shown in class.
For another idea, I have three goals:
Build a representation of a city that looks like stained glass (and maybe filigree)
Individuals stories can come together and create a community
Re-use this for another project
On a late night bus in Hong Kong, I looked out the window to see a set of highrises not too far away. Soft light illuminated their massive windows, most slight variations on the yellow glow from incandescent bulbs. There were some florescent lights, ranging from a stark neutral white light to an unnatural blue-ish tinge. Some were waiting, unlit. The emerald green and ruby colored windows threw me off. It seemed more like stained glass on church windows, not a highrise apartment complex in Hong Kong. As soon as I made that connection, the buildings were out of sight. I want to recreate that sight and that feeling I got from looking at the buildings.
I would create the cityscape from paper or cardstock and something translucent, maybe tissue or parchment paper, for the different colored windows. They would be lit by different colored LEDs. To interact, viewers would be invited to say one phrase and the brightness of the lights would change in relation to the speaker’s pitch, cadence, volume, ect., creating a unique but communal experience for each participant.
I built off of last week’s assignment by adding a potentiometer to a p5 program. The goal was to use the potentiometer to control the movement of the moon. I had actually wanted to control the movement of the moon in the Y direction, but I wasn’t sure if I’d be able to, so I tried to make sure I could move it along the X axis. Here, I ran into a problem, the moon would not pass 255.
After struggling, I learned that the Serial Port in p5 doesn’t read more than 255, so I would have to map the reading in p5 to the width of my canvas to get a full range of motion. From there I decided to go ahead and use the potentiometer to control the Y movement of the moon, this time only allowing the moon to move from Y 100 to 300, mapping this made the circle’s movement much less sensitive to the turns of the potentiometer. I had also wanted to make it so that when the circle reached a certain altitude, bits of red would creep in from the edges of the canvas. While I got the gradient to be about what I wanted, I had difficulty animating it and abandoned that effort.
The video below shows the program in action. It would be best to watch it on mute.
For this week’s assignment, we were supposed to create something that bounces off of walls. I decided to make a ball/circle that would change direction when the mouse was pressed or when it passed the width of the page on both sides. As the circle progressed towards the center of the screen, the background would become darker, while it would get lighter as it neared both edges of the screen. In order to accomplish this, I mapped the range of light blue to dark blue for the left half of the screen to the circle’s x value, so that the background would get darker as it approached the center of the screen. I did the opposite for the right half of the screen, going from dark to light. This creates a smooth transition from one color to the next.
I had wanted to change from purple or orange to the dark blue, but wasn’t sure how to accomplish that. I think I had to use lerpColor(), but I wasn’t sure how to accomplish that. Additionally, the number of times the mouse was pressed is counted in the right hand corner because I wanted to use type in some way. Because what I made kind of replicates watching the moon at night and controlling what time it is by reversing the direction, I may have been able to have the time proportional to where the moon was in the sky, but I just thought of this.
Below is a picture of my brainstorming process and an example of what it looks like.
This week, we also had to create a self portrait using P5js. I started out really very basic because I wasn’t exactly sure what to do with the software. I knew my biggest challenge would be trying to affect my wavy/curly hair using simple shapes.
I found a current ITP student’s blog that had a similar assignment was able to understand how to represent myself better using P5. So I decided to start over. Here’s an initial sketch I did to try to decide which shapes to use. Here you can see I was trying to decide between using ellipses or quads to do my hair. In the end I used a bit of both.
It took a while to figure out how all the shapes worked. I created outlines first before adding color. Below is what it looked like before trying to fill in my shapes.
My final result ended up being much more detailed than I had initially imagined. I’m still not happy with how my eyes turned out. I realised I’d have to deal with my own internalized racism if I wanted to be happy with any eyes I could make using P5, so I decided to complete the assignment and deal with it another time.
I’d like to conclude with a s/o to this incredibly useful skin tone chart, as well as validation that what I made can be recognised as a face.
This weeks assignment was to make something that moves. I decided to try to make a “lighthouse.” I wanted to use the DC motor because I thought that it would be nice to have something that spins around a full 360 degrees. For this project, it was actually unnecessary to have something spin around in a full circle, but I it was something I wanted to see happen. I assembled the breadboard using the schematic from class.
From the junk pile, I found an old painted pringles can that I thought could serve well as the lighthouse. It already had holes cut into it that would help me be able to run the wires from the motor to the breadboard. The spinning section of the motor would have to sit above the opening of the can. From there, I would attach a wire with paper or something to be the ‘light.’ I had debated attaching a LED to the wire, so that it would actually be a lighthouse, but decided against it as I wasn’t sure how to prevent the wire from spinning around the motor and pulling out from the breadboard. In order to support the motor, I cut a DC motor shaped hole into a piece of cardboard that would keep the motor centered and help lift to some extent. I also cut a piece of cardboard that was the diameter of the can to put under the motor and support it. I hot glued these items in place.
I made something to sit on top of the spinning portion of the motor that was vaguely reminiscent of the house portion of a lighthouse and decided to use yellow wire to mimic a beam of light. At one point, the wires to my motor broke off and I had to solder them back together. The DC motor spins way too fast to get the result I was going for, I wanted a much lazier spin to my lighthouse. I think using some sort of gear system would slow it down, but I’d have to look into it more.
For this assignment, I wanted to create a circuit where pressing a button a certain way would result in a certain color of light emitting from the 3-color LED. This was another adapted attempt of the same project from the book that I tried last week. I wanted to make it so that the light in would be shine blue constantly and pressing the button would result in either a red or green color emitting from the light. The red would be the ‘wrong’ sequence of button presses and the green would be the correct sequence. I thought that this idea was simple and possible, but I really didn’t know how to achieve it.
I started by setting up the breadboard similar to that of the one from the project in the book. I added the button and tried to remember exactly what we did the last class when we used the button.
I couldn’t remember and found a tutorial online that could help guide me. After then, I tried to figure out how to make the red or green light shine when the button was pressed in different ways. After running my idea by a friend, she said that timing things was tricky, so I modified my idea to simplify it a bit. I decided that holding down the button for a certain time should be easier to program than than a certain sequence of presses.
I looked online for a reference and tried to adjust some code to fit my idea for the project. In reality, I had no idea what I was doing and was a bit unclear of which things I needed to change or be mindful of to make the project work the way I wanted it to. At one point, I pressed the button and the green light shone, but then remained on for as long as the arduino was connected to power. I wasn’t able to turn it off by pressing the button or to make the light shine red or blue again.
Here’s my gitHub code. And here’s the bit I soldered.
This assignment gave me a lot of difficulties. I’m learning both coding and circuits for the first time and really don’t have a firm grasp on either of them. We were supposed to add some sort of time or another interactive element to a circuit you don’t flip with your hands. While trying to come up with an idea, I really wanted to either work with the temperature or the light sensor. A friend told me they didn’t think the temperature sensor was very reliable, so I picked light.
I decided to try to use the book we were given to complete the assignment. I chose one that used the RGB LED, but made a modification to the circuit they presented, which I hoped would allow me to just use one LED for the circuit. Looking back, it may have worked, I may have been using the wrong resistor. Unfortunately, I forgot to take a picture because I was frustrated with my creation and just wanted something to work.
first failed attempt (or maybe 2nd?)
I tried to find something on the internet that was more simple than the project in the book. I followed a guide from sparkfun.com. Using the schematic they provided, I still wasn’t even able to get the light to shine. Sending a picture to a friend, they suggested some adjustments which allowed me to make the LED glow. After uploading the code I found on the website, it didn’t seem to react to the sensor. Strangely, it seemed to get a little dimmer when it was very dark over the sensor, but the difference was barely recognisable.
Here is the light shining
Here is a picture taken with the flash on my phone turned on, giving the appearance of responsiveness to light
We were assigned to create a circuit in which you don’t use your hand to flip the switch. I had a lot of difficulty deciding how I would go about doing that, but decided to try to attempt some sort of method using a floating piece of conductive material to complete a circuit. I thought about using washers, some sort of metal plate, or some sort of copper wire weave, but wasn’t sure how effective any of those methods would be. After doing a quick Google search for some conductive materials, I found I could use aluminum foil. After assembling all my components, I tried to actually put together the circuit.
I used the breadboard because I thought it would help me better visualize and organize the flow of electricity through the circuit. Using a resistor was confusing and I had difficulty trying calculate which sort of resistor I should use, and how to determine the function of the resistor. When asking a friend for her opinion, she thought that we were always advised to use the 1k resistor, so that’s the one I ultimately chose. When most of the circuit was set up, I tried figure out the “handless” part of the assignment.
Here, a test was conducted to see if tinfoil would be a reliable conductor for the electricity. It turns out the internet didn’t lie this time around.
In the ITP shop I found a small cup and some tape. The cup was small enough to act as a bit of a guide for the tinfoil, to make sure water poured from above wouldn’t force the tinfoil away from two pieces of exposed wire, which would complete the circuit. The tape was used to attach the wire to the cup, and position the wires to come into contact with the aluminum. When water is poured into the cup, the aluminum foil comes into contact with the wires, completing the circuit and making the LED light shine.
When putting the whole circuit together, I had some difficulty having the light shine. I tried to figure out what the issue was, maybe the positive end of the battery was attached to the black wire, maybe I needed the resistor to be in another place, maybe I had a defective battery. Testing the potential problems resulted with the same dark LED. I decided it could have been the voltage for the LED, I knew the green one I was using was 2 volts, changing to a red one allowed the light to shine dimly. When changing to a blue LED with 3 volts, it shone the way it had in class, I I realised this was the proper LED I should use with this battery and resistor. Finally, I was able to put together the circuit.