top of page

DES240 - Data design (coding two)

Context:

Continuing the geometric GIF project, the second aspect was to adhere to the same Sustainable Development Goal (6, Clean Water and Sanitation), which I had chosen for freshwater. The new specification was to create a colourful GIF that can visually communicate the problem statement, which is "Bacteria, such as Campylobacter, in waters enhance risks of affecting human and marine health. 82% of New Zealand's polluted clean waters were considered unsafe". You can use any type of art style; therefore, I opted for something I hadn't tried before: raw sketching. Due to my passion for drawing, I figured it would give the GIF a more unique aesthetic, one that is different from the ordinary, which I digitally designed. I completed this project using sketching, Processing (written in Java code), with guidance from YouTube and ChatGPT (OpenAI).

Note: The GIF has to be in a loop.

Design process (ideating & developing)

Screenshot 2025-11-22 at 4.00.06 PM.png

Based on these inspirational images, I created drawings that convey various ways to communicate freshwater and the cause of pollution. Before proceeding with the next process, I gathered feedback from both students and teachers to ensure that my design isn't biased. Others' opinions will also help clarify whether the message and art did all the explaining for itself, or if I need to modify the drawing.

Note:

Click on the images to see clearly.

Screenshot 2025-11-22 at 4.10.51 PM.png

The feedback mentioned how drawings 1, 2, 3, and 5 were the most suitable for the next step. I considered the fact that the drawings could not independently visually communicate the objective. Therefore, I decided to combine the chosen drawings 2 and 5. Doing this will help me explore my options and determine the best approach to take. I also did some brainstorming sketches along the way (associated with the chosen drawings), so that I don't completely narrow my options too early in the process. 

During this process, I had slipped away from my original objective. I realised this after receiving the second round of feedback. I made the mistake of visually communicating that the sea creatures were the cause of pollution, not the humans themselves. Considering this, the plan was to continue forward with idea 3, which portrays the right message the best (feedback also approves of this plan). However, there were some drawing elements which I decided to use from the other ideas, like the use of jellyfish and the composition of the sea floor.

As I had already confirmed the idea of using the exploding feature (particle system) within my GIF, I decided to begin my code learning, which was genuinely challenging, but the outcome was worth it. Additionally, I will be using image coding to convey my message, so I also learnt movements that could be useful. Throughout this process, I made sure not to make it too complicated for myself. I did this whole process with the support of YouTube and ChatGPT.

Screenshot 2025-11-25 at 8.16.01 PM.png

The aim of the 'Slowly exploding effect' (the particle system) code is to make the bacteria spread in 82% of the fresh water. To simplify the beginning/learning process, I used white circles (bacteria images) scattered from the green mark (the hand image), then they disappear.  

Note:

The percentage is not as essential in this GIF as it was in the geometric GIF (the first code assignment). However, I did include some features that represent the specifics of my statistics.

Screenshot 2025-11-25 at 8.19.46 PM.png
Screenshot 2025-11-29 at 7.22.21 PM.png
Screenshot 2025-11-29 at 7.29.09 PM.png
Screenshot 2025-11-29 at 7.31_edited.jpg
Screenshot 2025-11-29 at 7.38.19 PM.png
Screenshot 2025-11-29 at 7.40.30 PM.png

After the learning process, I began designing and incorporating the drawing image elements. I also modified the animation ideas and updated the statement of intent to ensure the viewers understood my whereabouts in this project. Based on feedback, I made sure to convey the humans as the cause of pollution, not the sealife. I did do minor critiques as I was creating the final drawings and coding. 

Screenshot 2025-11-29 at 7.56.28 PM.png
Screenshot 2025-11-29 at 8.00.05 PM.png
Screenshot 2025-11-29 at 8.08.01 PM.png
Screenshot 2025-11-29 at 8.08.13 PM.png
Screenshot 2025-11-29 at 8.08.34 PM.png
Screenshot 2025-11-29 at 8.08.47 PM.png
Screenshot 2025-11-29 at 8.12.43 PM.png
Screenshot 2025-11-29 at 8.12.30 PM.png

GIF sketch components:

Screenshot 2025-11-29 at 8.22.54 PM.png
Screenshot 2025-11-29 at 8.21.21 PM.png

Coding process:

Note:

I used random photos when creating the animation code. I figured it would be an easier process to use Google images and then apply my final drawings when the code is completed. It will also provide a satisfying feeling when combining all the final elements together at the end.

Screenshot 2025-11-29 at 9.06.09 PM.png
Screenshot 2025-11-29 at 9.06.23 PM.png
Screenshot 2025-11-29 at 9.06.16 PM.png
Screenshot 2025-11-29 at 9.22_edited.jpg
Screenshot 2025-11-29 at 9.22.32 PM.png
Screenshot 2025-11-29 at 9.22.01 PM.png
Screenshot 2025-11-29 at 9.22.07 PM.png
Screenshot 2025-12-02 at 7.18.57 PM.png
Screenshot 2025-12-02 at 7.18.17 PM.png

Underneath is the finalising steps of the animation and coding, and yes, this was the most challenging part. Hence, my lack of skills with coding and my free, rather large, imagination, I faced some obstacles. Combining these various ideas and sketches created a whole emotional rollercoaster. The results were worth it, though.

I numbered each modifying step so I don't overwhelm myself. 

Click on images for full view.

Screenshot 2025-12-04 at 8.51.45 PM.png

Click on the images for full view.

Screenshot 2025-12-04 at 9.09.03 PM.png
Screenshot 2025-12-08 at 11.46.27 AM.png

Final images of GIF:

Final code is the link top of the page.

Screenshot 2025-12-04 at 8.32.34 PM.png
Screenshot 2025-12-04 at 9.01.02 PM.png
bottom of page