Skip to content

Instantly share code, notes, and snippets.

@andrewwatson

andrewwatson/rgbExport.js

Last active February 28, 2018 18:31
Show Gist options
  • Save andrewwatson/edc9e73d0c015fb583d2308fa3413300 to your computer and use it in GitHub Desktop.
Save andrewwatson/edc9e73d0c015fb583d2308fa3413300 to your computer and use it in GitHub Desktop.
Download ZIP
bookmarklet that exports a piskel and logs the C code to the console
Raw
rgbExport.js
javascript:(function(){
var rgbToCHex = function (r, g, b, a) {
var hexStr = '0x';
hexStr += ('00' + r.toString(16)).substr(-2);
hexStr += ('00' + g.toString(16)).substr(-2);
hexStr += ('00' + b.toString(16)).substr(-2);
return hexStr;
};
var export_to_unit8_t = function () {
var HTML_NEW_LINE = '
';
var width = pskl.app.piskelController.getWidth();
var height = pskl.app.piskelController.getHeight();
var frameCount = pskl.app.piskelController.getFrameCount();
var piskelName = pskl.app.piskelController.getPiskel().getDescriptor().name.toLowerCase().replace(/ /g,"_");
var ucPiskelName = piskelName.toUpperCase();
var frameStr = '#include <stdint.h>\n\n';
frameStr += '#define ' + ucPiskelName + '_FRAME_COUNT ' + frameCount + '\n';
frameStr += '#define ' + ucPiskelName + '_FRAME_WIDTH ' + width + '\n';
frameStr += '#define ' + ucPiskelName + '_FRAME_HEIGHT ' + height + '\n\n';
frameStr += '/* Piskel data for \"' + piskelName + '\" */\n\n';
frameStr += 'static const uint32_t ' + piskelName;
frameStr += '_data[' + frameCount + '][' + width * height + '] = {\n';
for (var i = 0 ; i < frameCount ; i++) {
var render = pskl.app.piskelController.renderFrameAt(i, true);
var context = render.getContext('2d');
var imgd = context.getImageData(0, 0, width, height);
var pix = imgd.data;
frameStr += '{\n';
for (var j = 0; j < pix.length; j += 4) {
frameStr += rgbToCHex(pix[j], pix[j + 1], pix[j + 2], pix[j + 3]);
if (j != pix.length - 4) {
frameStr += ', ';
}
if (((j + 4) % (width * 4)) === 0) {
frameStr += '\n';
}
}
if (i != (frameCount - 1)) {
frameStr += '},\n';
} else {
frameStr += '}\n';
}
}
frameStr += '};\n';
console.log(frameStr);
window.open('data:text/html,<!DOCTYPE html><body>' + frameStr + '</body>');
};
export_to_unit8_t();
})();
Raw
yellow_wave.c
#include <stdint.h>
#define YELLOW_WAVE_FRAME_COUNT 17
#define YELLOW_WAVE_FRAME_WIDTH 4
#define YELLOW_WAVE_FRAME_HEIGHT 4
/* Piskel data for "Yellow Wave" */
static const uint32_t yellow_wave_data[17][16] = {
{
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000
},
{
0xffff00, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000
},
{
0xffff3a, 0xffff00, 0x000000, 0x000000,
0xffff00, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000
},
{
0xffff3a, 0xffff3a, 0xffff00, 0x000000,
0xffff3a, 0xffff00, 0x000000, 0x000000,
0xffff00, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000
},
{
0xfdfda8, 0xfdfda8, 0xffff3a, 0xffff00,
0xfdfda8, 0xffff3a, 0xffff00, 0x000000,
0xffff3a, 0xffff00, 0x000000, 0x000000,
0xffff00, 0x000000, 0x000000, 0x000000
},
{
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xffff3a,
0xfdfda8, 0xfdfda8, 0xffff3a, 0xffff3a,
0xfdfda8, 0xffff3a, 0xffff3a, 0xffff00,
0xffff3a, 0xffff3a, 0xffff00, 0x000000
},
{
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xffff3a,
0xfdfda8, 0xfdfda8, 0xffff3a, 0xffff3a,
0xfdfda8, 0xffff3a, 0xffff3a, 0xffff00
},
{
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xffff3a,
0xfdfda8, 0xfdfda8, 0xffff3a, 0xffff00
},
{
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xffff00
},
{
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8
},
{
0x000000, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8
},
{
0x000000, 0x000000, 0xfdfda8, 0xfdfda8,
0x000000, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8
},
{
0x000000, 0x000000, 0x000000, 0xfdfda8,
0x000000, 0x000000, 0xfdfda8, 0xfdfda8,
0x000000, 0xfdfda8, 0xfdfda8, 0xfdfda8,
0xfdfda8, 0xfdfda8, 0xfdfda8, 0xfdfda8
},
{
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0xfdfda8,
0x000000, 0x000000, 0xfdfda8, 0xfdfda8,
0x000000, 0xfdfda8, 0xfdfda8, 0xfdfda8
},
{
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0xfdfda8,
0x000000, 0x000000, 0xfdfda8, 0xfdfda8
},
{
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0xfdfda8
},
{
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000,
0x000000, 0x000000, 0x000000, 0x000000
}
};
@andrewwatson
Copy link
Author

actually... you have to add a .replace(' ','_') to the name but other than that it's fine ;)

@jonedavis
Copy link

this is awesome 😎

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment