[rwet week 7] midterm: please visit the forum

Screenshot 2016-03-24 22.46.48

For my midterm, I made a “new” poetic form I’m calling “Please Visit The Forum.”

There are a lot of forums on the internet, covering pretty much all imaginable subjects for all sorts of niche interests and communities. I wanted to generate new weirdo community forums, each including a URL, moderator name, contact info and some popular topics.

Screenshot 2016-03-24 23.24.45

I downloaded a bunch of JSON files from Corpora, and then picked two of those files each time. I then mashed the words together in different ways for each of the categories.

While I found Corpora delightful and very useful, I could only figure out how to make this work for a limited group of lists that were formatted in the same way (so that I could consistently grab the values from a specific key in each list).

Screenshot 2016-03-24 22.48.33

My goal was to capture the feeling of surprise and intrigue that you get from discovering a niche community on the internet that you didn’t know about before, and some of the results of my program I thought were pretty effective.

Screenshot 2016-03-24 22.47.27

I think this is this could be more effective and interesting with a larger data set, perhaps with more live data or something more generative. Hopefully I can explore that with later projects.

Screenshot 2016-03-24 23.36.20
https://gist.github.com/nicolehe/77996f26a2286fbf8dfd.js

[live web week 6] midterm: swap chat

Screenshot 2016-03-09 10.26.21

Try Swap Chat here.

For my midterm, I made a chat room that takes a picture of somebody else in the room whenever you submit a message. I built it off of the Face Chat from the other week.

One of the first things I added was a thing to tell you how many other people are currently in the room. I kept track of the client count in a variable in the server-side code, and added to it every time a new person joined the room. Once they disconnected, I removed a number, and I sent this updating number over to the client-side, which shows it on the page.

In order to take a picture of a different person in the room, I made an array of all the clients’ socket IDs, and added someone’s ID once they joined, and then removed them once they left.

I knew I had to pick a random ID from the ID array in order to take a picture of that person, but I didn’t want the user getting themselves, so I made another array called notMe[] of all the IDs in the room except for the user’s own ID on the client side. Then sending a message looked like this:

function sendmessage(message, randoPicked) {
//pick a random person each time
randoPicked = notMe[Math.floor(Math.random() * notMe.length)];
socket.emit(‘chatmessage’, message, randoPicked);
}

From there, I executed the picture-taking code, and added that photo to the text that the original user sent.

There were a couple other extra things I added in order to make the chat experience a little better, like the floating text box, and the auto-scrolling to the bottom of the page once new data is added.

There are still a lot of CSS related things I’d want to change so that it looks better, but getting all my divs lined up properly is a task beyond me right now. I also want to add something that prevents people who don’t allow a camera on the page to not be able to access the content.

Screenshot 2016-03-08 21.07.34

I’ve only tested it myself with two cameras, so we’ll see what happens once more users try it……

See Swap Chat here.
https://gist.github.com/nicolehe/7e1851098f751d7a1609.js

[arcade week 5] controller drawing

Screenshot 2016-03-03 17.10.22

I made this three-sided illustration of my controller above, which doesn’t include the components I will mount (like the joystick or the soft button), mostly because I couldn’t figure out how to draw them in Vectorworks in a way that wasn’t confusing with the actual holes I need to lasercut out of my wood. On the left will be the joystick, and on the right will be my button made of fabric and covered with fur. (Hence the two holes – one for power and one for ground).

Screenshot 2016-03-03 17.06.13

I’ve also been working on my game in Unity. There’s still a ways to go but at least I’ve gotten my sprites working so far.

[live web week 5] midterm idea

For my midterm, I basically want to keep building off of the project I made last week (which itself is built off the project I made a couple weeks ago), but with some improvements and a twist.

I want to make a chatroom with a text box that also takes a picture when you submit. But instead of it taking a photo of you, it will take a picture of someone else who’s also in the chatroom.

Theoretically, this should be possible through sockets (I believe), but I’m slightly unsure about the feasibility mostly because I’ve never seen anything else that does this on the internet. Hopefully that’s just because it’d be too creepy to implement on any real website, and not because it’s technologically restricted.

And I want to fix the problems I currently have with the page, including some messages disappearing and some of the photos not showing up. And hopefully I’ll also be able to wrangle the CSS enough to make it look nicer overall.

 

[arcade week 4] midterm idea: a game about petting cats

pink cat sitting

For my midterm, I want to make a game about petting cats. Specifically, I want to make a game about how hard it is to pet a cat. In real life, it’s already a bit of a game – you never know exactly where the cat wants you to pet it, or for how long. One wrong move and you get scratched. Hopefully, this little game I make will capture a bit of that feeling.

pink cat tail

I’m very much not good at drawing, or visual art in general, but I had a good time using Piskel to make these sprites. (For this post I’ve exported them as gifs.)

pink cat lying down

For my controller, I’ll be making something that has a joystick  to allow you to move the petting hand around the screen, and then a piece of furry fabric that you actually have to pet in order to trigger the action. The fur will be on top of a fabric button made with Velostat that connects to the Arduino.

hand

 

[nothing week 4] midterm ideas

Phone-Phantogram-45

We (Jamie, Paula, Adi and I) brainstormed some ideas for an illusion to make for our midterm. Hopefully we’ll narrow it down after this week:

Phone hologram: https://www.facebook.com/hefty.co/videos/1748577158703988/

Using cut-up plastic and a video we create, we can use a phone screen to make a hologram.

Hybrid Image: https://en.wikipedia.org/wiki/Hybrid_image

We can design a large poster with a hybrid image of two faces (or something else!) that looks different when you’re close to it vs. when you’re far away.

Phantogram: http://www.gravitram.com/phantograms.htm

We can use Photoshop to design a phantogram, and print it out. With red-cyan glasses on, viewers will see it as a 3d object.

Phantom Words: http://deutsch.ucsd.edu/psychology/pages.php?i=211

Not sure if this project is exclusively for visual illusions, but we could use two speakers to make a Phantom Words auditory illusion.

Infinite Space: https://www.youtube.com/watch?v=mNQiW00mxH4

Using one way mirrors, lights and movement to create a structure that manipulates space.

Ideas for locations within 721 Broadway include the basement, with its long hallways and brick walls, the room we actually have our class in, or possibly a closet. What kind of illusion we end up making will determine the best location for it. More soon!

[pcomp week 7] Space Laser! (midterm)

 

For our Physical Computing midterm project, Yiting and I made a game called Space Laser!. (The critical exclamation point was added at the suggestion of Tom.)

HOW IT WORKS

You have 30 seconds to hit all five aliens using your laser. When you successfully hit one, their eyes will dim and they’ll make a dying sound. When you only have 10 seconds left, the eyes will start to blink so that you know you’re running out of time.

IDEA

We originally came up with an entirely different idea for a game, but after some experimentation, decided that we wanted to do something with two servos on top of each other. This formed the basis for our laser pointer. But what good is a laser if you don’t have something to shoot at?

Everyone knows that aliens are the natural enemy of lasers, so we decided to make a space-themed game where you’d shoot a laser at aliens, who would react in various ways when they got hit.

There were two main parts of the project: the laser and the target board. We prototyped both pieces before we made the final versions.

LASER

One of the first things we did was attach a laser diode to a servo on top of another servo. One servo moved in the x-axis and the other moved in the y-axis, so when combined, they allowed a wide range of movement for the laser on top. We then connected it to a toggle switch to turn it on and off, and a joystick that mapped to the axes of the servos. We put them all together in a cardboard box for prototyping, which was simple enough.

IMG_0635

IMG_2798

 

Here’s where it got a bit more complicated. Neither Yiting nor I have any experience with fabrication, which was one of the biggest challenges in this project. We knew we wanted to make a more solid enclosure, but weren’t really sure how. When we found a piece of acrylic in the junk shelf, we thought hey, why not try to make something out of this?

IMG_2805 IMG_2804

We took some measurements, and Yiting lasercut the acrylic into rectangles, as well as the holes on top for the joystick and switch. I rather haphazardly glued the pieces together with acrylic cement.

It worked for this project, but I learned that going forward with future projects, I should use a different material or buy a pre-made enclosure.

box1

box2

TARGET BOARD

As with the box, we began with a cardboard prototype of a target.

boardPrototypr

After some testing, we confirmed that a laser could reliably make a spike in the photocell’s sensor reading, so it could easily be used as a target on each alien. We figured that having two types of feedback together for successfully hitting the target — audio and visual — would create a nice effect, so we used LEDs for the eyes, and decided to add a speaker as well. The eyes would dim and the speaker would make the “dying” sound once you hit an alien.

I found a large black foam board in the junk shelf in the back. (Who knew that it could be such a treasure trove?) This became the backdrop of our space fight.

We found some free assets online, and Yiting used her amazing Illustrator skills to mock up a design. We print the images out and cut them up.

Then the tedious part began!

IMG_0662IMG_0663

It’s funny how the unexpected things can take up the most time. For example, it took us an excruciatingly long time to successfully poke the legs of the photocells and LEDs through a piece of paper, a layer of cardboard, and a foamboard. We had 30 legs in total to poke through, and often each one took multiple attempts, even with the help of a sewing needle.

IMG_0666

In the end, we successfully gave each alien two LED eyes and a photocell target in its mouth.

Now, on to the wiring.

This next part was theoretically straightforward — each LED would need a resistor and a digital input, and each photocell would also need a photocell and an analog input. We taped an Arduino and a breadboard on the back, and after some testing with alligator clips, we began to solder.

IMG_0688 IMG_0691

This also took a very long time even with the two of us soldering together.

Happily, we wired it all up correctly and it all worked, even if it’s not pretty. In the future, I’ll make an effort to tidy up and organize wires better.

IMG_0759

The next part was both the easiest and probably the most rewarding. We thought it would be fun to add obstacles to the board to make the game harder, so we added three planets that moved back and forth automatically in front of the aliens, each controlled by a servo. This was simple but made the game immensely more dynamic and fun. It really confirmed for me what Tom said in class a few weeks ago, which was that servos really give us a lot of “bang for [our] buck.”

IMG_0704

The last component was sound. We attached a speaker to the board and designed three different types of sound: a “game start” sound, an “alien died” sound, and a “game over” sound. This audio effects also really added a lot of how dynamic and interactive the game felt.

END RESULT

IMG_0716

Yiting and I were both really pleased with how this little game turned out. It was a good lesson in making something from start to finish, and in collaboration.

Lessons learned for me:

  • Organize your wiring!
  • Prototyping before making a final version is necessary.
  • Learn more about fabricating enclosures, or just buy them.
  • Working with another person is extremely helpful.
  • The soldering irons in the ITP shop suck.
  • Giving a user more than one type of feedback makes the experience feel much more interactive.
  • Never try to poke the legs of photocells through foam board or cardboard, it is a terrible experience.

We used three Arduinos for this project, and the code for all three parts is below.

Continue reading “[pcomp week 7] Space Laser! (midterm)”