cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <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>
            
          
!
            
              *, *: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;
}
            
          
!
            
              //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);
  });
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console