Dogedraw, now with more Nyaan!

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!

# Dogedraw, now with more Nyaan!

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/alias1/e8bb28726a37854606ad.js"> </script>