City sketch built with the pixel editor.

A Pixel Art Editor (Built with Vue.js)

I was perusing Instagram this morning and I came across some pixel art. I thought it looked pretty cool, and thought I’d like to draw some of my own. But I was bored, and I’m a web developer, so I thought I’d just build my own web based pixel editor.

Why Vue?

I used Vue because that is the frontend framework I use at work, and I was too lazy to remember how to set up React. This could have just as easily been built with React as well.

Setting It Up

Really this took 4 components.

1. Vue-Color so that you can choose colors.
   So yeah, just run: npm install vue-color
2. a container, so that I could line up the canvas and the color picker next to each other.
3. Art: I named it this, but it’s really just an art board for your pixel drawings.
4. Pixel: These are the pixels you color to make your fun artwork.

The Code

The container:

/** Container.vue **/
<template>
    <div class="container">
    <div style="float:left; width:800px">
        <Art :colors="colors" />
    </div>
    <div style="float: right; width:300px; margin-top:200px">
        <chrome-picker v-model="colors" />
    </div>
    
    </div>
</template>
<script>
import Art from './Art.vue';
import { Chrome } from 'vue-color'
export default {
data(){
        return {
            colors: []
        }
    },
methods: {
        changeColor(){
            console.log('Change color');
            this.coloring = colors.hex;
        }
    },
components: {
        Art,
        'chrome-picker': Chrome
    }
}
</script>

Art.vue

/** Art.vue **/
<template>
<div>
   <br>
   <hr>
   <div id="art">
       <div v-for="n in 950">
         <Pixel :coloring="color" />
       </div>
   </div>
   <br>
   <hr>
   <br>
 </div>
</template>
<style scoped>
 #art{
  width: 762px;
  height: 502px;
  border: 1px solid #000;
 }
</style>
<script>
import Pixel from './Pixel.vue';
export default {
        mounted() {
            console.log('Art');
        },
computed: {
         color(){
          return this.colors.hex;
         }
        },
props: [
         'colors'
        ],
components: {
         Pixel
        }
    }
</script>

Pixle.vue

<template>
<div class="pixel" v-bind:style="{background: activeBackground}" @click="changeColor">
 </div>
</template>
<style scoped>   
    div.pixel{
        /*border: 1px solid #000;*/
        height: 20px;
        width: 20px;
        float: left;
    }
</style>
<script>
    export default {
        mounted() {
            console.log('Pixel');
        },
data(){
            return {
                activeBackground: '#ffffff'
            }
        },
methods: {
            changeColor(){
                if(this.activeBackground == this.coloring){
                    this.activeBackground = '#ffffff'
                }else{
                    this.activeBackground = this.coloring;
                }
                
            }
        },
props: [
         'coloring'
        ]
    }
</script>

app.js to hold it all together.

window.Vue = require('vue');
Vue.component('container', require('./components/Container.vue'));
const app = new Vue({
    el: '#app'
});

Final Product

http://andyhartnett.com/coloring.html

Go draw some pixel art! (I don’t know why I named it coloring…)