Project 2 Service: JRN-An 100% Human Custom Illustration Website

In this project, I teamed up with Rhebsa and Nimi. In order to best perform our skills and provide a service for our classmates, we came up with the website JRN which means our names and initials.

What is JRN?

JRN is a website that makes custom illustrations by 100% humans instead of AI. On this website, the user can upload a portrait picture, and get an animated process of hand-drawn illustration. While waiting for the artist to finish the illustration, the user can play with an interaction loading board, which is a real-time mouse interactive pixeled form of the picture he uploaded. When the wait time is over, the user can watch the animated illustration process and download the final avatar.

Why We Made This and Our Intention:

The three of us have very distinctive skills and strengths. Rhebsa is an amazing illustrator, and Nimi makes the most beautiful website. I am good with making interactions using Processing. Our intention is to build something that is fun for all of our classmates. We believe that colors and art uplift our daily life. We hope to share this joy by creating a platform that makes original illustrations and small interactive art.

The Visual and Interactive Forms:

The work has three essential components: the website, the interactive art, and the animated illustration. On the landing page of the website, there is a title and illustrations by Rhebsa emphasizing what is this for.

When scrolling down, we put a short about us to let people know that we are 100% human to make this illustration.

After the user uploads the portrait, there is an interactive art generated using the original portrait. The user can use mouse horizontal movement to view the circles and the circle-formed portrait.

When the wait time is over, the animated illustration will show up and the user can finally download the final illustration.

My Part about Making the Interactive Art in Processing:

When designing about this waiting state of illustration, I considered “what is the possible form between a real-life picture and a 2D graphic”. This is how I came up with the idea of this interaction picture pixelated art. The specific Processing language I used is Pjs.

Every picture has a contrast between brightness and darkness. In the code, I used a darker background for the dark area of the picture. The brightness of the picture is represented by the circles.

Reflection:

Overall, we did a pretty good job achieving this service and we can see the potential of this service to grow to a bigger user group. However, there are still some areas we can improve, including the timelapse of the artist making the illustration. After receiving feedback from the class, we think that it would be better to make the wait time more “human”, for example, we can cue that “the artist is working on it” to let users know why this illustration is not done yet.

Try the prototype in Figma here: https://www.figma.com/proto/mSW9IvbbjGFHzOEvfKxDjW/Project-2?page-id=0%3A1&node-id=1%3A1292&viewport=766%2C653%2C0.19&scaling=min-zoom&starting-point-node-id=1%3A1292

My original code in Processing: https://openprocessing.org/sketch/1674889