flipnote.js
Advanced tools
Comparing version 1.4.5 to 1.4.6
{ | ||
"name": "flipnote.js", | ||
"version": "1.4.5", | ||
"version": "1.4.6", | ||
"description": "API for handling Flipnote Studio's .ppm animation format, capable of real-time playback using webGL", | ||
@@ -5,0 +5,0 @@ "main": "dist/flipnote.js", |
# flipnote.js | ||
[Flipnote Studio](http://flipnotestudio.nintendo.com/) is a DSiWare application released for the Nintendo DSi console in 2008. It lets users create simple flipbook-style animations ("Flipnotes") with the console's touchscreen or camera. Until 2013, Flipnotes could be shared online on a service called [Flipnote Hatena](flipnote.hatena.com). | ||
[Flipnote Studio](http://flipnotestudio.nintendo.com/) is an application for the Nintendo DSi console, originally released in 2008. Users can create simple flipbook-style animations ("Flipnotes") with the console's touchscreen or camera, and add sounds or music with the microphone. Until 2013, Flipnote creations could also be shared with others on and online service called [Flipnote Hatena](flipnote.hatena.com). | ||
This project's goal is to allow for entirely browser-based parsing and playback of Flipnote Studio's animation format, `.ppm`. It started mostly as a way to challenge myself to learn [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API), with no real purpose in mind other than making something of a tribute to an app that I spent a *lot* of my early teens playing with. | ||
I hope that maybe in the long term it will serve some use in archiving Flipnote animations, epecially given that now there's no legitimate way to get Flipnote Studio unless you have a DSi with it already installed. | ||
I hope that maybe in the long term it will serve some use in archiving Flipnote animations, epecially given that now there's no legitimate way to get Flipnote Studio unless you manage to find a DSi with it already installed. | ||
@@ -29,7 +29,7 @@ ### Features | ||
The PPM format is an entirely custom-made by Nintendo for use within Flipnote Studio. The file extension comes from the Japanese "パラパラマンガ" ("Para Para Manga"), which roughly translates to "flip comic". Its purpose is to store Flipnotes created within the app, which comprise of animation frames, audio, and metadata (author name, timestamp, etc). | ||
The PPM format was custom-made by Nintendo for use within Flipnote Studio. The file extension comes from the Japanese "パラパラマンガ" ("Para Para Manga"), which roughly translates to "flip comic". Its purpose is to store Flipnotes created within the app, which comprise of animation frames, audio, and metadata (author name, timestamp, etc). | ||
PPM animations have 2 layers per frame, each layer is a monochrome bitmap image where each pixel is represented in data by a single bit. Layers can use one of three colors; red, blue, or black/white, the latter being the inverse of the background color. As such, there is a maximum of 3 colors per frame. | ||
To save space (the Nintendo DSi doesn't have much internal memory) layers are compressed in a variety of different ways. The [PPM Format Docs](https://github.com/pbsds/hatena-server/wiki/PPM-format) cover frame compression in more detail, but the general idea was to avoid storing data for chunks of pixels that have the same value. That said, all the PPM documentation I've come across so far seems to omit noting that there are difference-based frames, where both layers need to be merged with the previous frame to produce a complete image. This is done by XORing each pixel in each layer. | ||
To save space (the Nintendo DSi doesn't have much internal memory) layers are compressed in a variety of different ways. The [PPM Format Docs](https://github.com/pbsds/hatena-server/wiki/PPM-format) cover frame compression in more detail, but the general idea was to avoid storing data for chunks of pixels that have the same value. | ||
@@ -40,3 +40,3 @@ PPMs can also have up to four audio tracks; a one minute long background track and 3 short "sound effects" that can be assigned to any frame. Nintendo went with [ADCPM](https://en.wikipedia.org/wiki/Adaptive_differential_pulse-code_modulation) for storing audio data because, again, they wanted to use as little space as possible. | ||
Frame decoding ([source](https://github.com/jaames/flipnote.js/blob/master/src/decoder/index.js#L296)) is easy enough to implement so long as you follow the docs. One thing I really wanted to avoid was predecoding frames, though, as it could cause JavaScript execution to lock up for a while and memory usage wouldn't be too great. | ||
Frame decoding ([source](https://github.com/jaames/flipnote.js/blob/master/src/decoder/index.js#L296)) is easy enough to implement so long as you follow the docs. I wanted to avoid was pre-decoding frames though, as it could cause JavaScript execution to lock up for a while and memory usage wouldn't be too great. | ||
@@ -57,3 +57,3 @@ The general process looks like this: | ||
Audio was a little tricky. In my Python PPM decoder I was just able to rely on the [audioop module](https://docs.python.org/3.6/library/audioop.html#audioop.adpcm2lin) to decode ADPCM, but JavaScript doesn't have any out-of-the-box way to process ADPCM like that. The [AudioBuffer](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) API does support PCM audio, however it's a rather young and finicky API where implementations still differ quite a bit. That's no biggie though, the HTML5 [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element also supports PCM via the [WAV](https://en.wikipedia.org/wiki/WAV) format! In the end the audio decoding and playing process looks like this: | ||
Audio was a little tricky. In my Python PPM decoder I was just able to rely on the [audioop module](https://docs.python.org/3.6/library/audioop.html#audioop.adpcm2lin) to decode it, but JavaScript doesn't have any out-of-the-box way to process ADPCM like that. The [AudioBuffer](https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer) API does support PCM audio, however it's a rather young and finicky API where implementations still differ quite a bit. That's no biggie though, the HTML5 [`<audio>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) element also supports PCM via the [WAV](https://en.wikipedia.org/wiki/WAV) format! In the end the audio decoding and playing process looks like this: | ||
@@ -60,0 +60,0 @@ * Convert 4-bit ADPCM samples to 16-bit PCM samples. For this I [semi-ported an ACPCM to PCM converter from C to JavaScript](https://github.com/jaames/flipnote.js/blob/master/src/decoder/adpcm.js). |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
1661
82735