This project was inspired by the theme of this hackathon: rise from the ashes. I reinvented a fairy tale known by everyone by presenting it in digital form. For the artistic style, I was inspired by pointillism, a technique of painting in which small, distinct dots of color are applied in patterns to form an image.

What it does

The story book takes in an image, and every frame, randomly chooses a pixel and draws a circle in the color of the pixel at that location. This creates the background. On top of this, on certain pages, Rapunzel's hair is let down on another PGraphics layer. Finally, the text is displayed above graphics.

How I built it

I used Processing, a software sketchbook based on Java, in order to program the book functionalities, generate the pointillism, and animate Rapunzel's hair. To create the background images that the pointillism was based on, I used Adobe Illustrator and Photoshop.

Challenges I ran into

I ran into difficulties in ordering the visuals, with the circles at the back, hair in the middle, and text at the front.

Accomplishments that I'm proud of

I am proud of the background images on the pages.

What I learned

I learned how to create layers using PGraphics, which I used in order to have the proper order of the visuals.

What's next for Rapunzel: The Animated Storybook

This story book can expanded to have more pages by breaking up the text into more pieces.

Share this project: