top of page
Project Brief:
Catinder is a Creative Coding Midterm Project by Liqian Zhang.
Based on Petfinder's API, create an adoption app that helps homeless cat to find their new home. Inspired by the famous dating app Tinder, this app will feature similar interaction which gives users a fresh feeling through looking at cats. With built-in button, user can click to jump to next cat, open the adoption link or archive the current cat.
Timeline: 2 weeks
Midterm progress
For my midterm, I am thinking of exploring more API by creating a pet adoption APP. I am a cat person, I knew that there are still many homeless pets around the world, and I believe adoption is meaningful and can actually help. They are waiting for a warm home and a great person who will spend time with them for the rest of their life. So I decided to create a mini-app to help.
At first, I sketch up the surface. I want to create a Tinder-like app, which is easy to use and gives a casual feeling. Continuing from the weather report app, I decided to create some input to let the user input types of pets they want and also the user’s location. (maybe by zip code? )
On the next window, I want to randomly push the pet’s information from the API. I decide to put the pet’s name & location(or distance?) on top. Images in the middle(images pull from API). Under the image create I decide to add 2 buttons; one indicates like and one indicates doesn’t fit my situation. Lastly, on the bottom, I decided to print out some information such as breeds, ages, and gender.
Based on this idea, I started researching the pet’s API and I found the Petfinder API. As followed its instructions, I have to use curl to verify with my API key first, then get the data. It works locally on my computer and I got the data. But when I tried to fetch the API from VS code it doesn’t work, because I have to verify first. I did some research base on how to use this API but most of it is from 3 years ago or uses code that I don’t understand. I also tried copying the data and storing it in a .json file; unfortunately, it doesn’t work. It always gets error 401, which means I will have to verify locally first. However, I will keep researching.
Lo-fi prototypes
As I continue researching in the following days, I found the Petfinder API's developer Github. From there, I got the SDK and the beautiful template in order to fetch information from the API. https://github.com/petfinder-com/petfinder-js-sdk
Following the template provided by mloberg, fetching data from the Petfinder API. I specific the search type as cat domestic short hair. Because I'm a cat person, and I see many domestic shorthairs get abandoned around. And I want this mini-app to help them.
After the response, I choose to console log out the key information first: name, id, URL, and photos. Then I notice some cats don't have photos in the log information. So I use array [i] and set up an if statement to skip out those that don't have images. When I log information, I notice for those that don't have photos, photos.length = 0. So I use this information to detect if the cat has photos. If not, i ++.
Then I display the current cat's photo. I tried preloading the image, but it doesn't work. From my understanding, I think that's because the photo data comes in objects, that's why the load Image function doesn't work. After trying, only createImg works in that case.
After successfully displaying the image, I tried to load the current cat's name, and address on the screen. Unfortunately, it doesn't work.. So I decided to change the interaction a bit to keep it simple. I will only leave 2 buttons & cat images on the display menu. I will set one button as "like", which leads the user to the adoption URL, then set up another button for the user to jump to the next cat.
I use j = j + 1 to indicate "next cat". And use the if statement to jump over a cat without photos. I was trying to use hide() function to hide current cat photos, but I'm not sure why it doesn't work. The next cat image only overlaps with the current image. And I'm meeting another challenge, how would I call out the next cat image after j?
I went to have a conversation with Prof. Cotter during office hours. I learned the idea that I use "i" and "j" to display photos is kind of complicated, and may cause errors as the function runs. Same as my function for detecting if the cat has photos. Prof. Cotter gives me a quick demo about filter( ), which I can use to filter out cats that have photos through the array. And IT WORKS!!
After successfully filtering out cats that have photos, I start building up the scene. I decided to simplify the display scene a bit. I print out the cat's name on top. And other important information on the bottom. Then I prototype 2 very basic buttons on the left for now to test interaction. When the user clicks the first button, it will lead the user to the adoption web page of this cat. And when the user clicks the second button, it jumps to the next cat.
After setting up the basics, I start to build up the scene. First, I set the cat image size to a certain size(I have to because I want a cohesive display) I use catImg.size() function to do so.
I also added interactive functions for the 2 buttons. Use create button function, and also create functions to tell what the button should do. The first button led the user to the adoption page and the next button takes the user to the next cat. When the user clicks the next button, the idea I wrote here is to remove all the current variables I have displayed on the page, set I equal to a new value, and then print out the new set. I I let i = (i + 1) % filteredCats.length, learn from Prof. Cotter here. By writing this down I'm able to loop the whole array. When research reaches the last cat and clicks next, loop the user back to the first cat.
Everything about the basics is pretty much done. I decide to think about the UI design. I added a cell background and information background by using class. Also, I added a like icon just like all social media & dating app does. Users can double-click the like button and show their love to the cat! The reason I use double click here is to prevent interruption with mousePressed.
Later on, I look at the prototype and think. I think the information I provided is not enough if I want to adopt a cat. I ask myself, what's the basic information I need when I'm adopting a cat?
Name, age, and location I have.
But I also want to know its vaccination information, if neutered, and if it needs special care. I start looking back into the information array. Yes! it has that information! So I went back and print them out.
I notice my space is limited. So I decided to expand the background UI, then use the mouse wheel to enable the user to scroll down. Besides displaying those key information, I also display the 2nd image of the current cat. I also let the 2 buttons flow in the same place while the user is scrolling. So that they can interact with the button anytime.
A fun fact when I worked on the mouse scroll function is that I first set variables posY + ... for all Y axis. And when mouseWheel, posY = event delta. But it's lagging when I scroll the mouse. However, if I use another variable in the Y axis, and change it to posY when the mouse event. It works smoothly. I'm not quite sure why. It is probably because the program runs slow through time and putting another variable is just a psychological comfort.
Last but not least, I feel the like icon is kind of boring. It doesn't make any special for this project by only changing color to show love. What if the user can also archive the cat when they click it?
I start with a variable j, and j equals i when the mouse double-clicked. And store it on the left bottom side of the screen. And it will keep the 'archive cat' until the user double-click to archive another cat. Also, feature another 'adopt me ' button for user to go back and adopt their archive cat anytime.
Reflection
Overall it's a fun coding experience for me as a cat person to create this mini-app with a unique experience for cat adoption. And I hope this can help cats find a home. Because my background is in creative art(I went to art school for Bachelor's), I want to challenge myself more on the engineering side by working with API. It's a challenge for me because there's barely any reference to see for this project. I have to debug throughout the process. One thing I'd like to share from my debugging experience is that always step away from the computer when you can't figure it out. Just go to do something else and come back. Eventually, you will have a different thought when you come back and may figure out the situation. And also, just like p5js debugging article says, it's always good to talk about your code logic to a friend, or even an object. Throughout the conversation, while explaining the logic you may notice which part went wrong. I found these helpful and they help me throughout my development.
Enjoy the app and help a cat if you'd love to!
bottom of page