digicult2023-hsinyi-lin

[digicult2023-hsinyi-lin]

Digital girl

I attempted to incorporate Glitch into my illustration work and used p5.js to create interactive flat illustrations. I wanted to harness the charm of the Glitch effect, so I drew a girl using a computer at home to give it a modern feel. The room's layout was inspired by photos of female gamers' living spaces, and I used fluorescent colors to create a Cyberpunk atmosphere.

For this project, I chose the WebP format for Glitching. Users can click on different screens to change the background Glitch images. Additionally, I applied the Glitch effect separately to the line art and one of the colored layers to enhance the texture of the artwork.

Final Project: https://hsinyilin.work/glitch/

Making Process: https://www.icloud.com/keynote/099HMYBExSqW3C0iPRVyjf6zg#FinalPresentation

[digicult2023-hsinyi-lin]

[digicult2023-hsinyi-lin]

[digicult2023-hsinyi-lin]

[digicult2023-hsinyi-lin]

Add texture

[digicult2023-hsinyi-lin]

I drew an illustration and divided it by layer. Each layer has different glitch image.

[digicult2023-hsinyi-lin]

After finding out special HEX, I try to animate it in p5.js.

[digicult2023-hsinyi-lin]

After finding out special HEX, I try to animate it in p5.js.

[digicult2023-hsinyi-lin]

After finding out special HEX, I try to animate it in p5.js.

[digicult2023-hsinyi-lin]

Test of WebP format

I still want to keep the interactive effect, so I decided to change to WebP format. I used Hex Explorer to find special HEX

[digicult2023-hsinyi-lin]

test of HEIC format.

I hope it can change by time, but the speed is too slow. Therefore, I try to use mouse to control it.

[digicult2023-hsinyi-lin]

Glitch my illustration artwork with p5.glitch

It’s fine with png format, but I don’t like this effect at all actually. I also tried other format and use “mask” to keep the transparency. However I failed

[digicult2023-hsinyi-lin]

Pretest of making illustration glitch

Combine each layer