An online editor to preview games that developped in Blinks systems. Demo
- Live edit C++ code powered by Code Mirror
- Auto compile C++ code into javascript with custom parser
- Each blink tile is running in its own thread using WebWorker
- LED lighting simulates in shader with PixiJS
- Physics engine powered by MatterJS (using custom build with fernandez's decomp library for better convex & concave support)
npm install
to install packagesnpm run build
to build blinks.js librarynpm run dev
to start a local dev server
- Click and drag blinks to re-arrange them.
- Click and drag in an open space to break them.
- You can use console for debugging info
build/blinks.js
core library to handle user interaction and simulation using PixiJS & MatterJSexamples/js/app.js
main js file to run the demoexamples/js/blinks.js
simulates functions of a single blink tileexamples/js/parse.js
custom parser to compile C++ Arduino code into Javascript
build/blinks.js
can be used independently to interact and display blinks, it has its own namespace, and supports multiple instances on a single page
new BLINKS("global"); //with global namespace
resizeCanvas(800, 640);
createBlocks(6)
for (let i = 0; i < 6; i++) {
setColor(i, YELLOW)
setColorOnFace(i, Math.floor(Math.random() * 6), CYAN)
}
Alternatively you can create a custom namespace
const blk = new BLINKS();
blk.resizeCanvas(800, 640);
blk.createBlocks(6)
for (let i = 0; i < 6; i++) {
blk.setColor(i, blk.YELLOW)
blk.setColorOnFace(i, Math.floor(Math.random() * 6), blk.CYAN)
}
It also support multiple instances in one single page
const blk01 = new BLINKS();
blk01.resizeCanvas(400, 300);
blk01.createBlocks(4)
for (let i = 0; i < 4; i++) {
blk01.setColor(i, blk01.YELLOW)
blk01.setColorOnFace(i, Math.floor(Math.random() * 6), blk01.CYAN)
}
const blk02 = new BLINKS();
blk02.resizeCanvas(400, 300);
blk02.createBlocks(4)
for (let i = 0; i < 4; i++) {
blk02.setColors(i, Array.from({ length: 6 }, () => Array.from({ length: 3 }, () => Math.random() > 0.2 ? 0.0 : 1.0)))
}