I spent my time catching up on past projects, and I worked on the telematic project and created a drawing website that has rooms. These rooms would be used as prompts for people around the world to draw together from a Twitter bot account that would present a new prompt everyday. The Twitter account is @CollabDrawABCs and you can view it here. Also, here is my blog post about the deliverable.
The way I achieved merging a drawing app with an app that has rooms was by looking at template code. I used the Persistent drawing app code as well as the Piano rooms code as the basis of my project.
I had some trouble in the beginning for going about merging rooms into the drawing app because the drawing app used a database to store the drawings. This made creating rooms different from the Piano rooms code, and made me understand lowdb and socket.io better.
I initially thought about having a roomID be passed as arguments into functions for the server to understand and have the server store the data separately, but that ended up not working. After doing a couple of other approaches, I finally understood what needed to be done to get this functioning.
This is where packages to the server get packaged. Each package has a roomID in the array and gets serialized and unserialized together with the line data and color data. This package then gets stored in the database by the server.
This is on the client end. It receives a package and removes the last two elements which are room and color before creating the lines.
These are the two main things I changed. There were other things that needed tweaking like drawings that are not stored and are being drawn live and changing clients to store roomID as well.
I also created a twitter bot to tweet out prompts each day. I used cheapbotsdonequick, which basically handles everything for me.
It uses Tracery which basically allows you to replace a variable in a base line of text with random other pieces of text. After that I set it to tweet once everyday.
I spent my time catching up on past projects, and I worked on the telematic project and created a drawing website that has rooms.
These rooms would be used as prompts for people around the world to draw together from a Twitter bot account that would present a new prompt everyday. The Twitter account is @CollabDrawABCs and you can view it here.
These are some examples of drawings and drawing prompts. Each user gets assigned a color randomly, which is supposed to encourage collaboration between users. If a user is alone and would like a new color, they can just refresh the page, but the process is a lot faster with others.
Since I did not complete the Telematic project, my final project is to complete it! I wanted to learn more about how socket.io works, how things get sent from the server to the client and vise versa, and how storing data works. Using an existing persistent drawing canvas project, I implemented a rooms function which allowed me to understand these three key points better. Here is the link to the blog post.
I created a collaborative drawing website that has rooms for groups of people to semi-privately draw together. I intend for these rooms to be used by people who know each other in real life to have fun and draw together. A small quirk to this drawing app is that each user gets a random color when they enter the website, and they must work with others to create artwork that is colored in the ways that they want. Although the quirk is small, I thought it would be something fun to collaborate on with friends.
The Collaborative Drawing Room
Moving forward, I would like to add a reset button to clear the board as well as have navigating or entering different rooms easier (perhaps with a beginning pop up screen).
Because I am finishing up previous projects, this post will be about telematic experiences. I want to make a simple game or communication method for friends online, I looked at some apps and websites that I enjoy playing or using with my friends.
One game that me and my friends played a lot during quarantine was Drawphone. Basically, each person in the group draws a prompt given by another person in the group and it continues like the game telephone. A simple drawing game like this brings a lot of joy and laughter, which is something I want to emulate.
Also, I took some inspiration from upperclassmen in design who created a website/application called Pixel Push. The project allows for groups of friends to draw together using their webcams as the paintbrush. They used simple tools like HTML, p5.js, Socket.io, and Google teachable machine to achieve the end result. These are technologies we learned about in class, so I didn’t have to research about them.
For the final project, I would like to revisit the Telematic project. I did not complete a deliverable for this project due to other class deadlines and exams; however, I wanted to learn how to send things across multiple devices/clients. My main idea for revisiting the telematic project is to create an app that lets friends stay in touch online.
Some ideas I have are daily fortunes sent by friends or “sticky note” drawings that are sent from one user to the other.
PSYCHO NYMPH EXILE
Website | CG-poem | Hyper Poem
The Psycho Nymph Exile CG-poem project is part of a larger trilogy of narratives ranging from books to sticker sets. Its focus is on telling the story of trauma in multiple medias. The CG-poem is an interactive 3D world that lets the user choose their path through the story. I found this interesting because of the great visuals and deep meaning. I also liked how the visuals matched with the text on screen to create an immersive experience. The Hyper Poem is an interactive poem on the web browser. Clicking words triggers different effects, either revealing more text of the poem or resetting the experience with a metaphoric meaning. I thought that traversing through the different paths was enjoyable and that I wanted to spend more time to uncover easter eggs or secret interactions I had not discovered yet.
My concept for the Augmented body project was to have an altered way of speaking. I wanted for people to type in their words and have the words come out of their mouth without them having to actually voice themselves. I wanted to make this because sometimes writing or typing out words is easier than saying them. When you open your mouth and press a letter on the keyboard, multiple of that letter will float out of your mouth.
I wanted to have the things floating out of your mouth be words, but I ended up doing single letters instead. As I started coding for words, I ran into lots of problems (that probably could be fixed if I had more time). I was not able to get full words as input since I had a difficult time figuring out input text boxes combined with the web screen display (every time I had the input text box on screen, it would cover the webcam and vise versa). I settled for detecting single letters pressed and outputting that instead of full words. Now if the user wants to type a word, they must view the word by reading the floating letters from farthest from the mouth to closest (so disjoint letters).
Zach Lieberman, Más Que La Cara Overview
I liked how their process went above and beyond what I was expecting. They hosted workshops with high schoolers to create cardboard masks to connect with the community as well as get some ideas. I think that this was really thoughtful and considered the local culture’s perception of masks. It was also an interesting way to collect ideas for masks.
Last Week Tonight: Face Recognition
It was interesting how the government of many large countries are investing in facial recognition technology for the reason of discovering criminals, but the idea is terrifying when thinking about if the government is corrupt because the technology is extremely powerful. Both gathering information about one individual or many similar individuals and could be abused in the wrong hands. I think that even if some countries decide to implement laws and regulations on the technology, other countries will not and the tools will still be abused.
“magical giant village in tree tops” and “medieval cats fighting”
Using the Google Colab notebook was interesting. I have used Google Colab notebook before but only briefly and unsuccessfully for another project. I just remember being very confused about the concept of running pre-made code from others and not understanding that all you had to do was press the play button on the code snippets. It was very easy to complete and the most difficult part was waiting for the images to render. I thought it was cool that you could either give it a base image to work off of or just have it generate everything from scratch. Both of my prompts were generated from scratch by the colab notebook.