8art

8bit design thing with fuckin' javascript array

Usage no npm install needed!

<script type="module">
  import art from 'https://cdn.skypack.dev/8art';
</script>

README

Logo

8art

8bit design thing with fuckin' javascript array

usage


<canvas id="example" width="300" height="300"></canvas>



// from "designs/you.json"
// "#$$$" for transparent color <3

var exampleArr = [
  ["#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#$$$","#$$$","#8bae21","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#8bae21","#$$$","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#cccccc","#$$$","#$$$","#$$$","#cccccc","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#cccccc","#$$$","#$$$","#$$$","#cccccc","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#8bae21","#$$$","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#8bae21","#$$$","#$$$"],
  ["#$$$","#8bae21","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#8bae21","#$$$"],
  ["#$$$","#8bae21","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#8bae21","#$$$"],
  ["#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#8bae21","#8bae21","#8bae21"],
  ["#8bae21","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#8bae21"],
  ["#$$$","#8bae21","#8bae21","#8bae21","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#$$$","#8bae21","#8bae21","#8bae21","#$$$"],
  ["#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#8bae21","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#$$$","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#8bae21","#$$$","#$$$","#$$$","#8bae21","#$$$","#$$$","#$$$"],
  ["#$$$","#$$$","#$$$","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#8bae21","#8bae21","#8bae21","#8bae21","#8bae21","#$$$","#$$$","#$$$"]
];



var example = new $art({
  target  : document.getElementById("example"), // canvas element
  image   : exampleArr, // image arr
  size    : 10, // pixel size
  success : function() { // success callback
    alert("such w0w amaze!");
  }
});

example.draw();

example.resize(5); // yes, u can!

result

Result

future tasks

  • Initial Release
  • Test
  • And more development processes (best part)

contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D