proposal.md

p5.gif

Outline

• p5.gif
  • Outline
  • Project Title
  • Team Members
  • Define the problem.
  • Address Greater Landscape
  • Deliverables
  • Implementation
  • Timeline
  • Documentation
  • Accessibility
  • Mentoring
  • More about you - Jinzhong Yu (NHibiki) - Wenhe Li
  • References

Project Title

P5.GIF

This is a library to process GIF on top of p5.js. It can help artists easily handling GIF related operations. eg. making GIFs, splitting frames, etc.

Team Members

• Wenhe Li
• Jinzhong Yu

Define the problem.

• GIF is a commonly used format to circulate in the web. While p5.js right now doesn't support any direct API related with GIF. We are thinking such a GIF library will be a huge help in terms of interenet experience.
• Compared with video, the GIF format can be a better way to present the project. We want to give an API that allow artists to capture their project and export it as gif during runtime.

Address Greater Landscape

A better gif experience for digital artists.

Deliverables

• A constructor to typically load GIF, wrapping by a GIF Class.
• A set of methods to process GIF:
  • Splitting Frames.
  • Recombination of Frames / Files.
  • Extracting Images from Files.
• Any other APIs to construct GIFs.

Implementation

• Implement an extended library for p5.js named p5.gif.
• A general constructor for GIF loading.

let gifConfig = {
    width: 300,
    height: 300,
    quality: 1,
    scale: 1,
    interval: 100,
    ...
};

/* initialize gif instance */
let gif1 = p5GIF.loadGIF( gifUrl || image[], gifConfig{} );

/* modify gif */
gif1.resize(400, 400);
gif1.download([name]);

/* gif properties */
gif1.rawData                            // -> P5Image []
gif1.{...config}                        // config

/* split frame */
gif1.frames[0];                         // -> p5Image {0}
gif1.setFrame(0, frame)                 // -> gif1
gif1.insertFrames(0, frame[], *lambda); // -> gif1
gif1.range(0, 10);                      // -> p5GIF

/* general effects */
gif1.range(5, 10).grayscale(0.7);       // do grayscale on frame [5, 10)

/* display gif */
gif1.display(0, 0);

/* Addons API */
let cap = p5Gif.capture({
    top: 0, 
    left: 0, 
    width: CANVAS_WIDTH, 
    height: CANVAS_HEIGHT,
    framerate: 10
})                                      // -> Capture Instance

cap.start().stopAfter({ second: 3 });   // 1
cap.start().stopAfter({ frame: 180 });  // 2

cap.start();
setTimeout(cap.stop.bind(cap), 3000);   // 3

cap.start();
setTimeout(cap.pause.bind(cap), 1000);
setTimeout(cap.resume.bind(cap), 2000);
setTimeout(cap.stop.bind(cap), 3000);   // 4

cap.save();                             // -> p5GIF

Timeline

Week	Wenhe	Jinzhong
1	1️⃣ Set up Circle CI 2⃣️ Set up Eslinter 3⃣️ Design p5Gif object’s interface	1️⃣ Config grunt build file 2️⃣ Complete static class interface 3️⃣ Setup symlinks with p5
2	1️⃣ Implement gif general effects 2️⃣ Implement gif split function	1️⃣ Implement git loader 2️⃣ Implement gif display
3	1️⃣ Connect with p5 library	1️⃣ Implement Capture function
4	1️⃣ Test for functions related with p5Gif object interface and implementation 2⃣️ Document & Notations for p5Gif object implementation	1️⃣ Unit Test of library static functions 2️⃣ Document and Notate funcions of static methods
5	1️⃣ Library homepage design & implement	1️⃣ Example codes for p5gif library

Documentation

• Telegram for nightly updating
• Blog for digestion

Accessibility

• API of whether to insert aria label when playing/stoping/pausing the gif.
• API of reading description & subtitle by voiceover throughout playing.

Mentoring

TBD

More about you

Jinzhong Yu (NHibiki)

KEY	VALUE
Interests && Experience	[ "Creating interesting stuff for sharing", "Building fun libraries or tools for public use" ]
Contributed?	[ Hexo {}, EveriToken {} ]
Barriers || Concerns	null
Github	NHibiki
Blog	Blog
Portfolio	Portfolio

Wenhe Li

KEY	VALUE
Interests && Experience	["Full-stack", "Hacker", "IoT", "Processing & P5.js", "Kinect & Leap motion", "Human Computer Interface"]
Contributed?	[ Not yet ]
Barriers || Concerns	"What I should do in the Open Source World"
Github	WenheLi
Blog	Blog
Portfolio	Under Develop!

References

• p5.js
• gif.js
• p5.js libraries
• p5.gif.js