A Powerful gif module for p5.js
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.
- 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.
A better gif experience for digital artists.
- 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.
- 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| 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 |
- Telegram for nightly updating
- Blog for digestion
- API of whether to insert aria label when playing/stoping/pausing the gif.
- API of reading description & subtitle by voiceover throughout playing.
TBD
| 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 |
| 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! |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
