Shake and Scroll (2022)

 

Creative coding, using p5js, html, on mobile

 

I made a website focusing the way people who see images on mobile can strongly engaged into 'seeing'.

The user has to shake strongly the mobile to see next image at phase 1 and 2.

In phase 3, the user has to scroll to see next one.

Especially, the infinite scrolling in phase 3 requires the user to continuously engage into the process of seeing.

 

 

 

ํ”๋“ค๊ธฐ, ์Šคํฌ๋กคํ•˜๊ธฐ

 

p5js, html, ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ

 

๋ชจ๋ฐ”์ผ์„ ํ†ตํ•ด ์ด๋ฏธ์ง€๋ฅผ ๊ด€๋žŒํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์ด ๋ณด๋‹ค ์ ๊ทน์ ์œผ๋กœ ๋ณด๋Š” ํ–‰์œ„์— ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ์‹์„ ๊ณ ๋ฏผํ–ˆ๋‹ค.

๊ด€๋žŒ์ž๋Š” 1๋ฒˆ๊ณผ 2๋ฒˆ ์žฅ์—์„œ ๋‹ค์Œ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๊ธฐ ์œ„ํ•ด ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ๋ฅผ ๊ฐ•ํ•˜๊ฒŒ ํ”๋“ค์–ด์•ผํ•œ๋‹ค.

3๋ฒˆ ์žฅ์—์„œ๋Š” ๋‹ค์Œ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๊ธฐ ์œ„ํ•ด์„œ ์Šคํฌ๋กค ํ•ด์•ผํ•œ๋‹ค.

ํŠนํžˆ 3๋ฒˆ์—์„œ์˜ ์Šคํฌ๋กคํ•˜๊ธฐ๋Š” ๋์ด ์—†๋Š” ๋ฌดํ•œ๋Œ€์˜ ์Šคํฌ๋กคํ•˜๊ธฐ๋กœ ๊ด€๋žŒ์ž์˜ ๋Š์ž„์—†๋Š” ์ฐธ์—ฌ๋ฅผ ์š”๊ตฌํ•œ๋‹ค.