32x32 Pixel Art Creator

In this example below you will see how to do a 32x32 Pixel Art Creator with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by SirDaev, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SirDaev ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>32x32 Pixel Art Creator</title>
  <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="debug"></div>
<div class="header">
  <div class="header-inner">
    <h1 class="title">32x32 Pixel Art Creator</h1>
  </div>
</div>
<div class="wrapper">
  <div class="col col-1">
    <h2>Color Picker</h2>
    <h3>1. Choose a Color</h3>
    <div class="choices">
      <div class="choice-wrap">
        <input type="range" id="red" min="0" value="0" max="255" step="1" />
        <div class="choice choice-red">R:<br /><span id="comp-0">0</span></div>
      </div>
      <div class="choice-wrap">
        <input type="range" id="green" min="0" value="0" max="255" step="1" />
        <div class="choice choice-green">G:<br /><span id="comp-1">0</span></div>
      </div>
      <div class="choice-wrap">
        <input type="range" id="blue" min="0" value="0" max="255" step="1" />
        <div class="choice choice-blue">B:<br /><span id="comp-2">0</span></div>
      </div>
    </div>
    <div id="choice-color"></div>
    <h3>2. Set to Palette</h3>
    <div class="colors">
      <span class="color c1" id="set-1"><p>1</p></span>
      <span class="color c2" id="set-2"><p>2</p></span>
      <span class="color c3" id="set-3"><p>3</p></span>
      <span class="color c4" id="set-4"><p>4</p></span>
      <span class="color c5" id="set-5"><p>5</p></span>
    </div>
    <h2>Presets</h2>
    <div class="presets">
      <span class="preset" id="clear-preset">Clear the Grid</span>
      <span class="preset" id="link-preset">Link</span>
      <span class="preset" id="megaman-preset">Megaman</span>
      <span class="preset" id="heis-preset">Heisenberg</span>
    </div>
  </div>
  <div class="col col-2">
    <h2>Color Palette</h2>
    <h3>Click to Select</h3>
    <div class="colors">
      <span class="color c1" id="pal-1"><p>1</p></span>
      <span class="color c2" id="pal-2"><p>2</p></span>
      <span class="color c3" id="pal-3"><p>3</p></span>
      <span class="color c4" id="pal-4"><p>4</p></span>
      <span class="color c5" id="pal-5"><p>5</p></span>
      <span class="color c6">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/eraser.png" />
      </span>
    </div>
    <h2>Art Preview</h2>
    <div id="preview"></div>
    <h3>Hover Color:</h3>
    <p class="data" id="hover-color">&nbsp;</p>
    <h3>Pixel Number:</h3>
    <p class="data" id="pixel-no">&nbsp;</p>
  </div>
  <div class="col col-3">
      <div id="grid"></div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/pixel-presets.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SirDaev/32x32-pixel-art-creator-jWzppP */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  background-color: #455059;
  font-size: 14px;
  padding-top: 90px;
  font-family: Sintony, sans-serif;
}

.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: rgba(0,0,0,.2);
  box-shadow: 0 4px 4px -2px rgba(0,0,0,.4)
}

.header-inner {
  padding-top: 10px;
  width: 900px;
  height: 100%;
  margin: 0 auto;
}

.header-inner h1.title {
  font-family: Quicksand;
  font-size: 3em;
  font-weight: 400;
  color: #aaa;
  margin-bottom: 10px;
  text-align: center;
}

.wrapper {
  margin: 0 auto;
  width: 900px;
}

.col {
  float: left;
  height: 500px;
  padding: 8px;
}

.col h2 {
  font-weight: 400;
  font-size: 1.5em;
  text-align: center;
  color: #aaa;
  background-color: rgba(0,0,0,.2);
  border-radius: 2px;
  margin-bottom: 0.5em;
  padding: 4px;
  box-shadow: 0 4px 4px -2px rgba(0,0,0,.4)
}

.col h3 {
  font-weight: 400;
  font-size: 1.1em;
  margin-bottom: 0.3em;
}

.col-1 {
  width: 20%;
}

.col-1 .presets {
  text-align: center;
  margin-bottom: 1em;
  cursor: pointer;
}

.col-1 .presets span.preset {
  display: inline-block;
  background-color: #333;
  color: #aaa;
  font-size: 1.1em;
  padding: 5px 7px;
  margin: 0 4px 6px 0;
  border-radius: 2px;
}

.col-1 .choices {
  overflow: auto;
  margin-bottom: 0.5em;
}

.col-1 .choices .choice-wrap {
  overflow: auto;
  margin-bottom: 0.2em;
}

.col-1 .choices .choice {
  float: left;
  width: 29px;
  height: 29px;
  font-size: .8em;
  margin-left: 6px;
  background-color: rgba(0,0,0,0.05);
  overflow: hidden;
}

input[type=range] {
  float: left;
  display: block;
  margin: 4px 0;
  width: 128px;
}

#choice-color {
  width: 100%;
  height: 40px;
  background-color: rgb(0,0,0);
  margin-bottom: 0.5em;
}

.col-1 .colors, .col-2 .colors {
  text-align: center;
  margin-bottom: 1em;
  cursor: pointer;
}

.col-1 .colors {
  text-align: left;
  margin-left: 11px;
}

.col-1 .colors .color p, .col-2 .colors .color p {
  text-align: center;
  margin-top: 3px;
  font-size: 2em;
  color: rgba(0,0,0,0.3);
}

.col-1 .colors span.color, .col-2 .colors span.color {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  margin: 0 3px 3px 0;
  border: 2px solid #333;
  border-radius: 2px;
  overflow: hidden;
}

.col-2 .colors span.color.c6 img {
  display: block;
  width: 100%;
  height: auto;
}

.col-2 .colors span.color.active {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/checkmark.png');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: left top;
}

.col-2 {
  width: 20%;
}

.data {
  padding-left: 12px;
  margin-bottom: 12px;
}

#grid {
  width: 100%;
  text-align: center;
  line-height: 13px;
  cursor: pointer;
}

#grid span {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 1px;
}

#grid span:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.05);
  content: '';
}

#grid span:hover:before {
  background-color: rgba(0,0,0,.2);
}
  
.col-3 {
  width: 60%;
}

#preview {
  margin: 0 auto 12px auto;
  width: 160px;
  height: 160px;
  background-color: rgba(0,0,0,.05);
}

#preview span {
  position: relative;
  display: block;
  float: left;
  width: 5px;
  height: 5px;
}

#debug {
  position: fixed;
  bottom: 5px;
  left: 5px;
}

/*Downloaded from https://www.codeseek.co/SirDaev/32x32-pixel-art-creator-jWzppP */
//Preset pixel arrays are preloaded in the <head>

var activeColor,
    numOfPixels = 32*32,
    colorComponents = ["red","green","blue"],
    defaultColors = ["rgb(216,101,101)",
                     "rgb(216,153,101)",
                     "rgb(60,130,130)",
                     "rgb(80,173,80)",
                     "rgb(40,40,40)"];

//Clear the grid and preview areas
var clearViews = function() {
  $("#grid span").css("background-color","rgba(0,0,0,0)");
  $("#preview span").css("background-color","rgba(0,0,0,0)");
}

//Activate a palette color
var makeActive = function(c) {
    $("span.color").removeClass("active");
    c.addClass("active");
    activeColor = c.css("background-color");
}

//Color a pixel
var colorAPixel = function(g) {
    g.css("background-color",activeColor);
    var pixel = g.attr('class');
    $("#preview span."+pixel).css("background-color",activeColor);
}

//Create the grid and preview
var views = function() {
  for (i=1;i<=numOfPixels;i++){
    $("#grid").append("<span class='" + i + "'></span>");
    $("#preview").append("<span class='" + i + "'></span>");
  }
}

//Set the default palette colors
var setDefaultColors = function() {
  for (i=1;i<6;i++) {
    $(".col-2 .colors span.color.c"+i).css("background-color",defaultColors[i-1]);
  }
}

//Set a color choice to the palette
var setToPalette = function(s) {
  var d = s.substr(s.length - 1);
  $("#pal-"+d).css("background-color",$("#choice-color").css("background-color"));
}

//Show the hover color if not blank/transparent
//"rgba(0, 0, 0, 0)" for Chrome
//"transparent" for IE and FF
var hoverText = function(h) {
  if (h.css("background-color") != "rgba(0, 0, 0, 0)" &&
      h.css("background-color") != "transparent") {
      $("#hover-color").html(h.css("background-color"));
    }
}

//Clear the hover color
var hoverTextClear = function() {
  $("#hover-color").html("&nbsp;");
}

//Show the number (class) of the pixel
var pixelText = function(p) {
  $("#pixel-no").html(p.attr("class"));
}

//Clear the number of th pixel
var pixelTextClear = function(p) {
  $("#pixel-no").html("&nbsp;");
}

//Surely I can condense these next 3 preset functions.

//Draw the Link preset
var drawLink = function() {
    //Fill the green pixels
    for(i=1;i<=presetLink1.length;i++) {
      $("."+presetLink1[i-1]).css("background-color",presetLinkC[0]);
    }
    //Fill the tan pixels
    for(i=1;i<=presetLink2.length;i++) {
      $("."+presetLink2[i-1]).css("background-color",presetLinkC[1]);
    }
    //Fill the brown pixels
    for(i=1;i<=presetLink3.length;i++) {
      $("."+presetLink3[i-1]).css("background-color",presetLinkC[2]);
    }
}

//Draw the Megaman preset
var drawMegaman = function() {
    //Fill the white pixels
    for(i=1;i<=presetMegaman1.length;i++) {
      $("."+presetMegaman1[i-1]).css("background-color",presetMegamanC[0]);
    }
    //Fill the tan pixels
    for(i=1;i<=presetMegaman2.length;i++) {
      $("."+presetMegaman2[i-1]).css("background-color",presetMegamanC[1]);
    }
    //Fill the lite blue pixels
    for(i=1;i<=presetMegaman3.length;i++) {
      $("."+presetMegaman3[i-1]).css("background-color",presetMegamanC[2]);
    }
    //Fill the dark blue pixels
    for(i=1;i<=presetMegaman4.length;i++) {
      $("."+presetMegaman4[i-1]).css("background-color",presetMegamanC[3]);
    }
    //Fill the black pixels
    for(i=1;i<=presetMegaman5.length;i++) {
      $("."+presetMegaman5[i-1]).css("background-color",presetMegamanC[4]);
    }
}

//Draw the Megaman preset
var drawHeis = function() {
  
    //Fill the black pixels
    for(i=1;i<=presetHeis1.length;i++) {
      $("."+presetHeis1[i-1]).css("background-color",presetHeisC[0]);
    }
    //Fill the tan pixels
    for(i=1;i<=presetHeis2.length;i++) {
      $("."+presetHeis2[i-1]).css("background-color",presetHeisC[1]);
    }
    //Fill the brown pixels
    for(i=1;i<=presetHeis3.length;i++) {
      $("."+presetHeis3[i-1]).css("background-color",presetHeisC[2]);
    }
    //Fill the purple pixels
    for(i=1;i<=presetHeis4.length;i++) {
      $("."+presetHeis4[i-1]).css("background-color",presetHeisC[3]);
    }
    //Fill the gray pixels
    for(i=1;i<=presetHeis5.length;i++) {
      $("."+presetHeis5[i-1]).css("background-color",presetHeisC[4]);
    }
    //Fill the white pixels
    for(i=1;i<=presetHeis6.length;i++) {
      $("."+presetHeis6[i-1]).css("background-color",presetHeisC[5]);
    }
}

//When the page is ready...
$(document).ready(function() {
  
  views();
  
  setDefaultColors();
  
  //This next function looks messy and I want to clean it up.
  
  //When a slider is moved...
  $("input[type=range]").on("change mousemove", function() {
    var r = $(this).get(0).id;
    var c = $("#choice-color").css('background-color');
    var x;
    if (r==colorComponents[0]) {
      x=0;
    } else if (r==colorComponents[1]) {
      x=1;
    } else if (r==colorComponents[2]) {
      x=2;
    }
    //Put the R, G, and B values into an array
    var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');
    //Update the array with the new component value
    rgb[x] = $("#"+r).val();
     //$(".col-1 .choices .choice span").text(rgb[x]);
    $("#comp-"+x).text(rgb[x]);
    //Update the chosen color with the new component value
    $("#choice-color").css("background-color","rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")");
  });
  
  //Activate a palette color
  $("span.color").click(function() {
    makeActive($(this));
  })
  
  //Color a pixel
  $("#grid span").click(function() {
    colorAPixel($(this));
  })
  
  //When the 'Clear the Grid' preset is chosen...
  $("#clear-preset").click(function() {
    clearViews();
  });
  
  //When the 'Link' preset is chosen...
  $("#link-preset").click(function() {
    clearViews();
    drawLink();
  });
  
  //When the 'Megaman' preset is chosen...
  $("#megaman-preset").click(function() {
    clearViews();
    drawMegaman();
  });
  
  //When the 'Heisenberg' preset is chosen...
  $("#heis-preset").click(function() {
    clearViews();
    drawHeis();
  });
  
  //Hmm, how can I make these next 8 mouse functions dry?
  
  //Display a color code when a pixel is hovered
  $("#grid span").mouseenter(function() {
    hoverText($(this));
  });
  $("#grid span").mouseleave(function() {
    hoverTextClear();
  });
  $("#preview span").mouseenter(function() {
    hoverText($(this));
  });
  $("#preview span").mouseleave(function() {
    hoverTextClear();
  });
  
  //Display the pixel number when a pixel is hovered
  $("#grid span").mouseenter(function() {
    pixelText($(this));
  });
  $("#grid span").mouseleave(function() {
    pixelTextClear();
  });
  $("#preview span").mouseenter(function() {
    pixelText($(this));
  });
  $("#preview span").mouseleave(function() {
    pixelTextClear();
  });
  
  //Set a color choice to the palette
  $(".col-1 .colors span.color").click(function() {
    setToPalette($(this).get(0).id);
  });
});

Comments