Git Product home page Git Product logo

anarchia's Introduction

Anarchia

A short animation film to the song Anarchia inspired by Yok aka Quetschenpaua.

The whole animation is done in the browser with Babylon.js. The IDE used is Apache NetBeans 18.0. Images are done by me or grabbed at Pixabay and Pexels. The city and houses are made by the wonderful Alina Milkina.

The music is based on the song Ufo by the outstanding Yok Quetschenpaua. The text is translated into English by me with the help of the great Brad Hock. There is also a Japanese version made by Hirai Masaya.

Contributors

See CREDITS.md.

Funding

The music and video is free under Creative Commons (see LICENSE.md). Nevertheless I'm happy to receive some fundings via PayPal. You may also buy some of my stuff in the Etsy shop of the Neustadt Art Kollektiv.

License

As the short film will be submitted to various film festivals, the release is planned for 2024. Until the official release, publication, distribution and performance – even in parts or modified – is only permitted after consultation with the director. Irrespective of this, the source code and the audio track may be used anytime and anywhere and is licensed under the CC BY-SA 4.0 license.

Sidenotes

Rendering the canvas

It was surprisingly difficult to generate a video from the canvas.

  • The VideoRecorder from BabylonJS:
    • The generated webm files are extremely miserable in quality.
    • In addition, on my laptop without a dedicated encoding chip (e.g. NVENC) the 25 frames at FullHD were no longer guaranteed.
  • The attempt to film the screen using OBS Studio also failed because the frame rate was too low due to the lack of an encoding chip.

The solution was to use CCapture.js. This tool hooks into the animation-relevant functions and can therefore save every single frame. This no longer happens in real time, but that's not the goal.

I used CCapture to output the frames as PNGs and created a lossless mov file using ffmpeg:

ffmpeg -framerate 25 -i %07d.png -crf 0 anarchia.mov

I then recorded the sound effects in real time using BabylonJS VideoRecorder and processed them together with the music and the mov file in kdenlive.

anarchia's People

Contributors

g4rf avatar

Watchers

 avatar

anarchia's Issues

Select song (and other things) at beginning

  • Open a dialog at beginning choosing the version.
  • Add a reload button at the end.

Audio

In the dialog put the play and the record button replacing the buttons on the bottom.

That concerns:

  • audio file
  • headline
  • sign language
  • credentials

Versions:

  • Ufo by Yok Quetschenpaua
  • Autonomia by Jan Kosyk & Band
  • Anarchia by Jan Kosyk & Band
  • アンアーキヤ by Jan & Masaya

Textures

Add texture groups in subfolders and select subfolder at beginning.

  • original
  • 60s (with camera effects like vignette and screen noise, maybe a sound filter)
  • fancy with high contrast colors
  • rough animation (the very first one)

Add sounds

Add environment sounds.

  • wind
  • traffic noise on beginning
  • ufo landing sound
  • jump sound when coming out
  • bottle sound with punks
  • bluelight signal when police comes in
  • rumble sound when police comes in
  • pressure sound when control comes up
  • beam sound
  • tree & park sounds at the end
  • party sounds (quiet electro, bottles)

Intro

  • Animals (sheeps, cows, deers etc.) playing in front of the city
  • Birds flying in the sky

Intro

  • credential sign
  • S-Bahn train on embakrment into the city

Intro

Idea:

  • Camera only on an embankment, maybe some animals in the front. The sign with the credentials.
  • Then a train moves into the screen and the camera will follow it until the city is in view with the big headline.
  • The song starts, the ufo comes in, the camera zooms to Heinrichplatz etc.

Real pogo

Make aliens bounce at each other while moshpitting.

Beer bottles

Beer bottles accompany the punks, cheering from time to time.

Rebuild code

  • put code in different files
  • inline docs
  • create factory methods
  • group animations

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.