Over the last few days I've been mentoring web dev at HS.HACT.IO, inspiring a group of younger kids to get into tech as creators. One of the other mentors showed us a site he previously put together, DogeDraw. After playing around with it for a little, I decided it was a little too manual, so started hacking away in the JS console to make it more fun.
A little while (and far too long typing out pixel art as code) later, and we have nyaan hacks! You can clear a section of the screen with a solid block of colour, or better yet, stamp out some pixel art nyaan cat across the page!
https://gist.github.com/0xdevalias/e8bb28726a37854606ad
Paste these functions into the js console on https://dogedraw.firebaseapp.com and run them to nyaan nyaan nyaan..
Developed at http://hs.hact.io 2015!!
function clearScreen(w, h, color) {
var pixelDataRef = new Firebase('https://dogedraw.firebaseio.com/pixels');
for (var i = 0; i < h; i++) {
for (var j = 0; j < w; j++) {
pixelDataRef.child(j + ":" + i).set(color);
}
}
}
function nyaan(startX, startY) {
function rpt(value, times) {
var arr = [];
for (rpti = 0; rpti < times; rpti++) {
arr[rpti] = value;
}
return arr;
}
function cc(arr) {
var joined = [];
for (cci = 0; cci < arr.length; cci++) {
joined = joined.concat(arr[cci]);
}
return joined;
}
var nyaanHax = new Firebase('https://dogedraw.firebaseio.com/pixels');
var w = "fff" // white
var bl = "00f" // blue
var k = "000" // black
var r = "f00" // red
var gy = "333" // grey
var gr = "0f0" // green
var y1 = "FFFFE0" // pale yellow
var y2 = "FFFF00" // yellow
var o = "FF4500" // orange
var p1 = "FFC0CB" // pink
var p2 = "9370DB" //purple
var p3 = "800080" // dark purple
var nyaan = []
nyaan[0] = rpt(w, 38)
nyaan[1] = cc([rpt(w, 3), rpt(r, 6), rpt(w, 7), rpt(k, 14), rpt(w, 8)])
nyaan[2] = cc([[w], rpt(r, 14), [k], rpt(y1, 14), [k], rpt(w, 7)])
nyaan[3] = cc([[w], rpt(r, 3), rpt(o, 5), rpt(r, 5), [k, y1, y1], rpt(p1, 4), [p2, p1, p1, p2], rpt(p1, 3), rpt(y1, 3), [k], rpt(w, 6)])
nyaan[4] = cc([[w], rpt(o, 13), [k, y1], rpt(p1, 2), [p2], rpt(p1, 4), [k, k], rpt(p1, 5), [y1, k, w, k, k], rpt(w, 3)])
nyaan[5] = cc([[w], rpt(o, 3), rpt(y2, 4), rpt(k, 4), rpt(o, 2), [k, y1], rpt(p1, 6), [k, gy, gy, k], [p1, p1, p2, p1, y1, k, k, gy, gy, k], rpt(w, 2)])
nyaan[6] = cc([[w], rpt(y2, 6), [k, gy, gy, gy], rpt(k, 4), [y1], rpt(p1, 6), [k, gy, gy, gy, k], rpt(p1, 3), [y1, k, gy, gy, gy, k], rpt(w, 2)])
nyaan[7] = cc([[w], rpt(y2, 3), rpt(gr, 3), [k, k], rpt(gy, 5), [k, y1], rpt(p1, 3), [p2], rpt(p1, 2), [k], rpt(gy, 4), rpt(k, 4), rpt(gy, 4), [k], rpt(w, 2)])
nyaan[8] = cc([[w], rpt(gr, 8), rpt(k, 4), [gy, k, y1], rpt(p1, 6), [k], rpt(gy, 12), [k], rpt(w, 2)])
nyaan[9] = cc([[w], rpt(gr, 3), rpt(bl, 8), rpt(k, 3), [y1], rpt(p1, 4), [p2, k], rpt(gy, 3), [w, k], rpt(gy, 5), [w, k, gy, gy, k, w]])
nyaan[10] = cc([[w], rpt(bl, 13), [k, y1, p1, p2], rpt(p1, 3), [k], rpt(gy, 3), [k, k], rpt(gy, 3), [k, gy, k, k, gy, gy, k, w]])
nyaan[11] = cc([[w], rpt(bl, 3), rpt(p3, 5), rpt(bl, 5), [k, y1], rpt(p1, 3), [p2, p1, k, gy, p1 ,p1], rpt(gy, 9), [p1, p1, k, w]])
nyaan[12] = cc([[w], rpt(p3, 12), [k, k, y1, y1, p1, p2, p1, p1, k, gy, p1, p1, gy, k, gy, gy, k, gy, gy, k, gy, p1, p1, k, w]])
nyaan[13] = cc([[w], rpt(p3, 3), rpt(w, 5), rpt(p3, 2), rpt(k, 4), rpt(y1, 3), rpt(p1, 4), [k], rpt(gy, 3), rpt(k, 7), rpt(gy, 2), [k, w, w]])
nyaan[14] = cc([rpt(w, 10), [k, gy, gy, gy, k, k], rpt(y1, 7), [k], rpt(gy, 10), [k], rpt(w, 3)])
nyaan[15] = cc([rpt(w, 10), [k, gy, gy, k, w], rpt(k, 19), rpt(w, 4)])
nyaan[16] = cc([rpt(w, 10), rpt(k, 3), rpt(w, 3), [k, gy, gy, k, w, w, w, k, gy, gy, k, w, k, gy, gy, k], rpt(w, 6)])
nyaan[17] = cc([rpt(w, 17), rpt(k, 3), rpt(w, 4), rpt(k, 3), rpt(w, 2), rpt(k, 3), rpt(w, 6)])
nyaan[18] = rpt(w, 38)
for (var i = 0; i < nyaan.length; i++) {
for (var j = 0; j < nyaan[i].length; j++) {
nyaanHax.child(parseInt(startX+j) + ":" + parseInt(startY+i)).set(nyaan[i][j]);
}
}
return "I drew a cat!"
}
```</pre></noscript><script src="https://gist.github.com/e8bb28726a37854606ad.js"> </script>