This project was requested and envisioned by Márcio Carvalho, designed by Joana Voa and submitted as one entry for the National Arts Festival 2020. Festival which, due to global pandemic reasons had a digital edition this year.
"In a time where statues and monuments are toppling globally, Who Do We Come to H(a)unt offers a timely opportunity for alternative stories to be drawn and told, and where old hegemonic histories can be re-customized. This is an interactive art project that uses drawing to disrupt the memorial culture advertised by statues, monuments, and memorials of colonial and imperial rulers still standing today in many cities around the globe."
Technical wise the usage of the wonderful Fabric.js canvas library, was of great help. Leaving the hard bit to tackle, to be the animated stickers on canvas. This allowed me to improve my ffmpeg knowledge, as well as understanding the current state of video transparency on the web.
After some research and experimentation, the following formats were used:
- .webm videos with vp9 codec for modern browsers
- .mov videos with prores codec for Safari
- gifs for all things iOS
Unfortunately, iOS devices older than v13 do not work with transparent videos. Hence plain gifs were used. This is a major drawback as every single frame has to be parsed and animated via setTimeout.
Given a folder with gifs, the following bash script will convert them to the video formats mentioned above while preserving transparency.
#!/bin/bash
for file in $1 *.gif
do
filename="${file%.*}"
ffmpeg -i "$file" -qmin 0 -qmax 18 -vcodec prores_ks -q:v 64 -b:v 1400K -pix_fmt yuva444p10le -an -sn -vf scale="'if(gt(a,1000/1000),1000,-1)':'if(gt(a,1000/1000),-1,1000)'" -metadata title="$filename mov." "$filename.mov"
ffmpeg -i "$file" -qmin 0 -qmax 18 -crf 9 -vcodec libvpx-vp9 -b:v 1400K -quality good -cpu-used 0 -auto-alt-ref 0 -pix_fmt yuva420p -an -sn -vf scale="'if(gt(a,1000/1000),1000,-1)':'if(gt(a,1000/1000),-1,1000)'" -metadata title="$filename Webm." "$filename.webm"
done