MDDN242 Assignment 3: Glyph

.block

license: mit

README.md

PS3 MDDN 242 2018

Color Glyphs - Idea + Problems

Looking at my code I still had some trouble figuring out how to get the random and everything that isn’t the edit to work properly as the lines and circles weren’t drawing in the correct places. I ended up asking a tutor about it to see what the problem was and they said that it was because the values weren’t related the size so everything has be related to the size to work and that I needed to simplify the shift as well. I first started with correcting the drawing values in the rectangles and the circles so that they were all related the size which was easy to do I just had to remove the number in the leg and put size/ insert number here. Figuring out the numbers took longer than I thought as it was so nit-picky. When I checked the random again it still didn’t work but it was closer. So I then went onto the let y and x shifts. I removed the let shift and fraction mess and simplified it. I had no idea what to do at first so I just played around to see what would work and eventually I got it somewhat close. Finding the correct number to divide by took a long time as nothing seemed to work so a suggestion from a peer was to just make it really big or small and see how that works. That seemed to do the trick I made it 2000 and it drew the circles in the correct place. I wanted the circles to go towards the centre however two of then they didn’t but it turned out that my problems was the I had put the minus in the wrong place as pointed out by someone so I fixed it and it work! So far I have the four circles working correctly in random. Now I need to fix the one line that has a mind of its own. Hopefully that is a simple fix. The only thing tht worked was the ring that grows.

glyph.js

/* change default application behavior */
var defaultMode = "random";
var defaultSize = 128;
var defaultDisplay = "glyph"
var defaultEmoji = 100;
var backgroundColor = "hsb(0, 0%, 94%)";

function Glyph() {
  /*
   * values is an array of 3 numbers: [hue, saturation, lightness]
   *   + hue ranges from 0..360
   *   + saturation ranges from 0..100
   *   + lightness ranges from 0..100
   *
   * size is the number of pixels for width and height
   *
   * use p5.js to draw a round grayscale glyph
   * the glyph should stay within the ellipse [0, 0, width, height]
   * this is a grayscale glyph, so only lightness can be adjusted.
   * the range for lightness is 0..100
   *
   * When setting the lightness of stroke or fill always use either strokeUniform()
   * or fillUniform() calls. Each takes one arguement - the lightness from
   * 0 to 100. Examples:
   *       - fillUniform(50);    // ranges from 0-100
   *       - strokeUniform(100); // white
   */ 
  this.draw = function(values, size) {
    // replace this with your own version

    // map lightness to large circle shade
    let color1 = map(values[2], 0, 100, 0, 100)
    strokeUniform(color1);
    fillUniform(color1)
    let s2 = size/2;
    translate(s2/s2);
    ellipse(s2, s2, size);

    // inner size is set to 30%
    let inner_size = 0.2 + 0.4 * 0.3;
    let s3 = size * inner_size;

    // inner color based on saturation
    let color2 = map(values[1], 0, 200, color1+20, 240)
    fillUniform(color2);
    strokeUniform(color2);

    // hue controls left/right shift
    let shift_frac = (values[0] - 180.0) / 180.0;
    //let shift_frac2 = (values[0]  180.0) / 180.0;
    let max_shift = -size/2000 * (size - s3);
    let max_shift2 = size/2000 * (size - s3);
    let x_shift = shift_frac * max_shift;
    let y_shift = shift_frac * max_shift;
    let y_shift2 = shift_frac * max_shift2;
    //ellipse(s2 + x_shift, s2, s3);  
    
//    let topx = 30;
//    let topy = 30;
//    let topshift = shift_frac * (0.25 * (size - s3));
      
    let topx = -size/2;
    let topy = -size/4.6;
    //let topShift = shift_frac * (0.17 * (size - s3));
    //let topShift = shift_frac * 0.17
      
    let leftx = -size/2;
    let lefty = -size/4.6;
    //let leftShift = shift_frac * (0.17 * (size - s3));
    //let leftShift = shift_frac * 0.17;
      
    let rightx = -size/2;
    let righty = -size/1.28;
    //let rightShift = shift_frac * (180 - (size - s3));
      
    let bottomx = -size/2;
    let bottomy = -size/1.28;
    //let bottomShift = -shift_frac * (255 - (size - s3));
      
    let s5 = size/5;
    let s1 = size/1;
    
    let shrink = map(values[1], 0, 40, 0, s5);
    let shrink2 = map(values[1], 0, 40, 0, -s5);
      
    //let spin = map(values[2], 0, 80, -14.1, PI/2);
    let grow = map(values[2], 0, 100, 0, s1);
    //rotate(spin);

    let rectwidth = size/65;

    let rectx = size/2;
    let recty = size-189.5;
    let rectz = size/1.75;
    let rectv = size/2.45;
    let ringx = size/2;
    let ringy = size/2;
    
    strokeWeight(2); 
    stroke(0, 0, 0);
      
    //topcircle
//    ellipse(160, 40, 30, 30); 
    ellipse(-topx, -topy+y_shift2, s2/7, s2/7);
    //leftcircle
//    ellipse(40, 160, 30, 30);
    ellipse(-lefty+y_shift2, -leftx, s2/7, s2/7);  
    //rightcircle
//    ellipse(280, 160, 30, 30);
    ellipse(-righty+y_shift, -rightx, s2/7, s2/7);
    //bottomcircle
    //ellipse(160, 280, 30, 30);
    ellipse(-bottomx, -bottomy+y_shift, s2/7, s2/7);
      
    noStroke();
    //leftrectanglebottom
    rect(recty, rectx, rectwidth, shrink);
    //leftrectangletop
    rect(recty, rectx, rectwidth, shrink2);
    //rightrectangle
//    rect(180, 0, 10, 320);
    //leftrectanglebottom
    rect(rectz, rectx, rectwidth, shrink);
    //leftrectangletop
    rect(rectz, rectx, rectwidth, shrink2);
    
    //rightrectanglebottom
    rect(rectx, rectz, shrink, rectwidth);
    //rightrectanglebottom
    rect(rectx, rectz, shrink2, rectwidth);
    //rightrectangletop
    rect(rectx, rectv, shrink, rectwidth);
    //rightrectangletop
    rect(rectx, rectv, shrink2, rectwidth);  
    
    //ring
    noFill();
    strokeWeight(3);
    stroke(0, 0, 0);
    ellipse(ringx, ringy, grow, grow);
  }  
}

index.html

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
    <script src="z_hsluv-0.0.3.min.js"  type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="z_purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="z_color_helper.js"></script>
    <script language="javascript" type="text/javascript" src="glyph.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style>
        body   { padding: 0; margin: 0; }
        .inner { position: absolute; }
        #controls {
            font: 300 12px "Helvetica Neue";
            padding: 5;
            margin: 5;
            background: #f0f0f0;
            opacity: 0.0;
            -webkit-transition: opacity 0.2s ease;
            -moz-transition: opacity 0.2s ease;
            -o-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
        }
        #controls:hover { opacity: 0.9; }
    </style>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
        <div class="inner" id="controls" height="500px">
            <table>
                <tr>
                    <td>Hue</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>Saturation</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>Lightness</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td>Mode</td>
                    <td id="selector1Container"></td>
                </tr>
                <tr>
                    <td>Size</td>
                    <td id="selector3Container"></td>
                </tr>
                <tr>
                    <td>Display</td>
                    <td id="selector2Container"></td>
                </tr>
                <tr>
                    <td>Show Guide</td>
                    <td id="checkContainer"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="buttonContainer"></td>
                </tr>
        </div>
    </div>
</table>
</body>

preview.jpg

purview.json

{
  "commits": [
    {
      "sha": "1a2f122e124591f32c5e9f22504d4b55adddec41",
      "name": "final"
    },
    {
      "sha": "ceb8682edf8b872b57b11c7caf94f0205f56f0cf",
      "name": "gradient"
    },
    {
      "sha": "4c64b58f7f4977209dffa7420108daf1e87da9c3",
      "name": "random"
    },
    {
      "sha": "5e38d0ab1cc7f4ff4c06e099a70ff7f9aabaee0b",
      "name": "edit"
    },
    {
      "sha": "a63086ba25a20afc7ccda2a620e278331bba43e4",
      "name": "sketch"
    }
  ]
}

sketch.js

if (typeof defaultMode === 'undefined') {
  var defaultMode = "sketch";
}

if (typeof defaultSize === 'undefined') {
  var defaultSize = "128";
}

if (typeof defaultDisplay === 'undefined') {
  var defaultDisplay = "both";
}

if (typeof defaultEmoji === 'undefined') {
  var defaultDisplay = 76;
}

if (typeof backgroundColor === 'undefined') {
  var backgroundColor = "rgb(232, 232, 232)";
}


let canvasWidth = 960;
let canvasHeight = 500;

let glyphSelector;
let modeSelector;
let sizeSelector;
let show_oddball = false;
let oddball_row = 0;
let oddball_col = 0;

let val_sliders = [];
let max_vals = [360, 100, 100];

let curEmoji = defaultEmoji;
let NUM_EMOJI = 872;
let EMOJI_WIDTH = 38;

let lastKeyPressedTime;
let secondsUntilSwapMode = 10;
let secondsPerEmoji = 5;
let isSwappingEmoji = false;
let emojiSwapLerp = 0;
let prevEmoji = 0;
let lastEmojiSwappedTime;

let emojiImg;
let sketchImg;
let curEmojiImg;
let curEmojiPixels;
let curEmojiColors, nextEmojiColors, prevEmojiColors;
function preload() {
  emojiImg = loadImage("twemoji36b_montage.png");
  sketchImg = loadImage("sketch.png");
}

function setup() {
  // create the drawing canvas, save the canvas element
  let main_canvas = createCanvas(canvasWidth, canvasHeight);
  main_canvas.parent('canvasContainer');

  let now = millis();
  lastKeyPressedTime = now;
  lastEmojiSwappedTime = now;

  // create two sliders
  for (i=0; i<3; i++) {
    let slider = createSlider(0, 10*max_vals[i], 10*max_vals[i]/2);
    slider.parent("slider" + (i+1) + "Container")
    slider.changed(sliderUpdated);
    slider.mouseMoved(sliderUpdated);
    slider.touchMoved(sliderUpdated);
    val_sliders.push(slider);
  }

  modeSelector = createSelect();
  modeSelector.option('sketch');
  modeSelector.option('edit');
  modeSelector.option('random');
  modeSelector.option('gradient');
  modeSelector.option('oddball');
  modeSelector.option('image');
  modeSelector.changed(modeChangedEvent);
  modeSelector.value(defaultMode);
  modeSelector.parent('selector1Container');

  glyphSelector = createSelect();
  glyphSelector.option('color');
  glyphSelector.option('glyph');
  glyphSelector.option('both');
  glyphSelector.value(defaultDisplay);
  glyphSelector.parent('selector2Container');

  sizeSelector = createSelect();
  sizeSelector.option('32');
  sizeSelector.option('64');
  sizeSelector.option('128');
  sizeSelector.parent('selector3Container');
  sizeSelector.value(defaultSize);
  sizeSelector.changed(sizeChangedEvent);


  guideCheckbox = createCheckbox('', false);
  guideCheckbox.parent('checkContainer');
  guideCheckbox.changed(guideChangedEvent);

  button = createButton('redo');
  button.mousePressed(buttonPressedEvent);
  button.parent('buttonContainer');

  curEmojiImg = createImage(36, 36);
  // create an array for HSB values: [18][18][3]
  curEmojiPixels = Array(18);
  curEmojiColors = Array(18);
  for(let i=0; i<18; i++) {
    curEmojiPixels[i] = Array(18);
    curEmojiColors[i] = Array(18);
    for(let j=0; j<18; j++) {
      curEmojiPixels[i][j] = Array(3);
    }
  }

  gray_glyph = new Glyph();
  refreshGridData();
  modeChangedEvent();
}

function sliderUpdated() {
    redraw();
}

function mouseClicked() {
  if (mouseX > width/4) {
    refreshGridData();
  }
  redraw();
}

function dataInterpolate(data1, data2, val) {
  let d = new Array(3);
  for(let i=0; i<3; i++) {
    d[i] = lerp(data1[i], data2[i], val);
  }
  return d;
}

let numGridRows;
let numGridCols;
let gridValues; // row, col order
let gridOffsetX, gridOffsetY;
let gridSpacingX, gridSpacingY;
// Generate data for putting glyphs in a grid

function clamp(num, min, max) {
  return Math.min(Math.max(num, min), max);
}

function refreshGridData() {
  let mode = modeSelector.value();
  let glyphSize = parseInt(sizeSelector.value(), 10);

  if (mode == "image") {
    if(glyphSize == 32) {
      numGridCols = 18;
      numGridRows = 17;
      gridOffsetX = 320;
      gridSpacingX = 31;
      gridOffsetY = 2;
      gridSpacingY = 29;
    }
    else if(glyphSize == 64) {
      numGridCols = 10;
      numGridRows = 9;
      gridOffsetX = 280;
      gridSpacingX = 66;
      gridOffsetY = -18;
      gridSpacingY = 59;
    }
    else if(glyphSize == 128) {
      numGridCols = 6;
      numGridRows = 5;
      gridOffsetX = 164;
      gridSpacingX = 132;
      gridOffsetY = -50;
      gridSpacingY = 118;
    }
    else if(glyphSize == 256) {
      numGridCols = 3;
      numGridRows = 3;
      gridOffsetX = 172;
      gridSpacingX = 262;
      gridOffsetY = -100;
      gridSpacingY = 234;
    }
  }
  else if(glyphSize == 128) {
    numGridCols = 6;
    numGridRows = 3;
    gridOffsetX = 38;
    gridSpacingX = 156;
    gridOffsetY = 32;
    gridSpacingY = 166;
  }
  else if(glyphSize == 256) {
    numGridCols = 3;
    numGridRows = 1;
    gridOffsetX = 20;
    gridSpacingX = 320;
    gridOffsetY = 100;
    gridSpacingY = 500;
  }
  else if(glyphSize == 64) {
    numGridCols = 12;
    numGridRows = 6;
    gridOffsetX = 15;
    gridSpacingX = 78;
    gridOffsetY = 15;
    gridSpacingY = 81;
  }
  else if(glyphSize == 32) {
    numGridCols = 21;
    numGridRows = 11;
    gridOffsetX = 22;
    gridSpacingX = 44;
    gridOffsetY = 22;
    gridSpacingY = 42;
  }
  gridValues = new Array(numGridRows);
  for (let i=0; i<numGridRows; i++) {
    gridValues[i] = new Array(numGridCols);
    for (let j=0; j<numGridCols; j++) {
      gridValues[i][j] = new Array(8);
    }
  }
  if (mode == "gradient" || mode == 'oddball') {
    let top_left = Array(3);
    let top_right = Array(3);
    let bottom_left = Array(3);
    let bottom_right = Array(3);
    for (let k=0; k<3; k++) {
      top_left[k] = random(max_vals[k]);
      top_right[k] = random(max_vals[k]);
      bottom_left[k] = random(max_vals[k]);
      bottom_right[k] = random(max_vals[k]);
    }
    for (let i=0; i<numGridRows; i++) {
      let frac_down = 0;
      if(numGridRows != 1) {
        frac_down = i / (numGridRows - 1.0);
      }
      d_left = dataInterpolate(top_left, bottom_left, frac_down);
      d_right = dataInterpolate(top_right, bottom_right, frac_down);
      for (let j=0; j<numGridCols; j++) {
        let frac_over = 0;
        if(numGridCols != 0) {
          frac_over = j / (numGridCols - 1.0);
        }
        gridValues[i][j] = dataInterpolate(d_left, d_right, frac_over);
      }
    }
    if (mode == 'oddball') {
      // replace an entry at random
      oddball_row = Math.floor(random(numGridRows))
      oddball_col = Math.floor(random(numGridCols))
      for (let k=0; k<3; k++) {
        gridValues[oddball_row][oddball_col][k] = random(max_vals[k]);
      }
    }
  }
  else if(mode == "image") {
    for (let i=0; i<numGridRows; i++) {
      for (let j=0; j<numGridCols; j++) {
        for (let k=0; k<3; k++) {
          gridValues[i][j][k] = curEmojiPixels[i][j][k];
        }
      }
    }
  }
  else {
    for (let i=0; i<numGridRows; i++) {
      for (let j=0; j<numGridCols; j++) {
        for (let k=0; k<3; k++) {
          gridValues[i][j][k] = random(max_vals[k]);
        }
      }
    }
  }
}

function sizeChangedEvent() {
  let mode = modeSelector.value();
  if (mode != 'edit') {
    refreshGridData();
  }
  redraw();
}

function guideChangedEvent() {
  show_oddball = guideCheckbox.checked();
  redraw();
}

function modeChangedEvent() {
  let mode = modeSelector.value();

  // enable/disable sliders
  if (mode === 'edit') {
    // disable the button
    // button.attribute('disabled','');

    // enable the size selector
    sizeSelector.removeAttribute('disabled');

    // enable the first four sliders
    for(let i=0; i<3; i++) {
      val_sliders[i].removeAttribute('disabled');  
    }
  }
  else {
    // enable the button
    // button.removeAttribute('disabled');

    // disable the sliders
    for(let i=0; i<3; i++) {
      val_sliders[i].attribute('disabled','');
    }

    // enable the size selector
    // sizeSelector.removeAttribute('disabled');

    // refresh data
    refreshGridData();
  }
  if (mode === "image") {
    // get current emoji image
    let offsetX = 36 * (curEmoji % 38);
    let offsetY = 36 * Math.floor(curEmoji / 38);

    let squareOffsets = [ [0,0], [0,1], [1,1], [1, 0] ];
    curEmojiImg.copy(emojiImg, offsetX, offsetY, 36, 36, 0, 0, 36, 36);
    curEmojiImg.loadPixels();
    for(let i=0; i<17; i++) {
      // i is y
      let maxX = 18;
      let offsetX = 0;
      if (i%2 == 1) {
        maxX = 17;
        offsetX = 1;
      }
      for(let j=0; j<maxX; j++) {
        // j is x
        let sumColor = [0, 0, 0];
        for(let k=0; k<4; k++) {
          // k is summing over 4 adacent pixels
          let curColor = curEmojiImg.get(j*2 + squareOffsets[k][0] + offsetX, 1 + i*2 + squareOffsets[k][1]);
          for(let l=0; l<3; l++) {
            sumColor[l] += curColor[l] / 4.0;
          }
        }
        let curColor = color(sumColor);
        curEmojiColors[i][j] = curColor;
        let rgba = curColor._array;
        let rgb = [ rgba[0], rgba[1], rgba[2] ];
        let hscol = hsluv.rgbToHsluv(rgb);
        curEmojiPixels[i][j][0] = hscol[0];
        curEmojiPixels[i][j][1] = hscol[1];
        curEmojiPixels[i][j][2] = hscol[2];
      }
    }
    // refresh data
    refreshGridData();
  }

  redraw();
}

function buttonPressedEvent() {
  refreshGridData();
  redraw();
}

// function fillHsluv(h, s, l) {
//   var rgb = hsluv.hsluvToRgb([h, s, l]);
//   fill(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
// }

function ColorGlyph() {
  this.draw = function(values, size) {
    let rgb = hsluv.hsluvToRgb(values);
    fillHsluv(values[0], values[1], values[2]);
    // print(values);
    // fill(rgb[0]*255, rgb[1]*255, rgb[2]*255);
    stroke(0);
    let s2 = size/2;
    ellipse(s2, s2, size);
  }
}
let color_glyph = new ColorGlyph();

function highlightGlyph(glyphSize) {
  let halfSize = glyphSize / 2.0;
  stroke(0, 0, 255, 128);
  noFill();
  strokeWeight(4);
  ellipse(halfSize, halfSize, glyphSize+4);
  fill(0);
  strokeWeight(1);
}

function getGyphObject() {
  return gray_glyph;
}

function drawGlyph(glyphValues, glyphSize) {
  let shawdowShift = glyphSize / 5.0;
  let glyphMode = glyphSelector.value();
   if(glyphMode != "glyph") {
    translate(-shawdowShift, -shawdowShift);
    color_glyph.draw(glyphValues, glyphSize);
    translate(shawdowShift, shawdowShift);
  }
  if(glyphMode != "color") {
    gray_glyph.draw(glyphValues, glyphSize);
  }
}

function drawDriveMode() {
  let glyphSize = 320;
  let halfSize = glyphSize / 2;

  background(backgroundColor);
  let middle_x = canvasWidth / 2;
  let middle_y = canvasHeight / 2;
  middle_x = middle_x + glyphSize / 10.0;
  middle_y = middle_y + glyphSize / 10.0;
  let val = [0,0,0];
  for(i=0; i<3; i++) {
    val[i] = val_sliders[i].value() / 10.0;
  }

  resetMatrix();
  translate(middle_x - halfSize, middle_y - halfSize);
  drawGlyph(val, glyphSize);

  if (show_oddball) {
    resetMatrix();
    translate(middle_x - halfSize, middle_y - halfSize);
    highlightGlyph(glyphSize)
  }

  // resetMatrix();
  // translate(middle_x + halfSize + 32, middle_y - halfSize);
  // color_glyph.draw(val, glyphSize);
}

function drawGridMode() {
  let mode = modeSelector.value();

  let glyphSize = parseInt(sizeSelector.value(), 10);
  background(backgroundColor);
  if (show_oddball &&  mode == 'oddball') {
    resetMatrix();
    translate(gridOffsetX + oddball_col * gridSpacingX, gridOffsetY + oddball_row * gridSpacingY);
    highlightGlyph(glyphSize)
  }
  let hexOffset = (mode == "image");
  for (let i=0; i<numGridRows; i++) {
    let tweakedNumGridCols = numGridCols;
    let offsetX = 0;
    if (hexOffset && i%2 == 1) {
      offsetX = gridSpacingX / 2;
      tweakedNumGridCols = numGridCols - 1;
    }
    for (let j=0; j<tweakedNumGridCols; j++) {
      resetMatrix();
      translate(gridOffsetX + j * gridSpacingX + offsetX, gridOffsetY + i * gridSpacingY);
      drawGlyph(gridValues[i][j], glyphSize);
      resetMatrix();
    }
  }
}

function colorCopyArray(c) {
  d = Array(18);
  for(let i=0; i<18; i++) {
    d[i] = Array(18);
    for(let j=0; j<18; j++) {
      d[i][j] = c[i][j];
    }
  }
  return d;
}

function checkImageUpdate() {
  let mode = modeSelector.value();

  isSwappingEmoji = false;
  if (mode == "image") {
    now = millis();
    if(lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) {
      // key not pressed recently
      if(lastEmojiSwappedTime + 1000 * secondsPerEmoji < now) {
        prevEmoji = curEmoji;
        prevEmojiColors = colorCopyArray(curEmojiColors);
        // no swaps recently
        updateEmoji(1);
        nextEmojiColors = colorCopyArray(curEmojiColors);
        lastEmojiSwappedTime = now;
      }
      if(now - lastEmojiSwappedTime < 1000) {
        isSwappingEmoji = true;
        emojiSwapLerp = (now - lastEmojiSwappedTime) / 1000.0;
        // print("LERP: " + emojiSwapLerp);
        for (let i=0; i<numGridRows; i++) {
          for (let j=0; j<numGridCols; j++) {
            // let curColor = lerpColor(prevEmojiColors[i][j], nextEmojiColors[i][j], emojiSwapLerp);
            let curColor = prevEmojiColors[i][j];
            if (curColor) {
              curColor = lerpColor(prevEmojiColors[i][j], nextEmojiColors[i][j], emojiSwapLerp);
              curEmojiPixels[i][j][0] = curColor._getHue();
              curEmojiPixels[i][j][1] = curColor._getSaturation();
              curEmojiPixels[i][j][2] = curColor._getBrightness();
            }
          }
        }
        refreshGridData();
      }
      else {
        for (let i=0; i<numGridRows; i++) {
          for (let j=0; j<numGridCols; j++) {
            let curColor = nextEmojiColors[i][j];
            if (curColor) {
              curEmojiPixels[i][j][0] = curColor._getHue();
              curEmojiPixels[i][j][1] = curColor._getSaturation();
              curEmojiPixels[i][j][2] = curColor._getBrightness();
            }
          }
        }
        refreshGridData();
      }
    }
  }
}

let is_drawing = false;
function draw () {
  if (is_drawing) {
    return;
  }
  is_drawing = true;
  let mode = modeSelector.value();

  if (mode == "sketch") {
    image(sketchImg, 0, 0, width, height);
    is_drawing = false;
    return;
  }

  checkImageUpdate();

  if (mode == 'edit') {
    drawDriveMode();
  }
  else {
    drawGridMode();
  }
  resetMatrix();
  if (mode == "image") {
    image(curEmojiImg, 96, height-32-36);
  }
  is_drawing = false;
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
  else if (key == ' ') {
    refreshGridData();
    redraw();
  }
  else if (key == 'd') {
    let curGlyph = glyphSelector.value()
    if(curGlyph == "color") {
      glyphSelector.value('glyph');
    }
    else if(curGlyph == "glyph") {
      glyphSelector.value('both');
    }
    else if(curGlyph == "both") {
      glyphSelector.value('color');
    }
    redraw();
  }
  else if (key == 'c') {
    let old_value = guideCheckbox.checked();
    guideCheckbox.checked(!old_value);
    guideChangedEvent();
  }
  else if (key == '1') {
    sizeSelector.value('32');
    sizeChangedEvent()
  }
  else if (key == '2') {
    sizeSelector.value('64');
    sizeChangedEvent()
  }
  else if (key == '3') {
    sizeSelector.value('128');
    sizeChangedEvent()
  }
  else if (key == 's') {
    modeSelector.value('sketch');
    modeChangedEvent()
  }
  else if (key == 'e') {
    modeSelector.value('edit');
    modeChangedEvent()
  }
  else if (key == 'g') {
    modeSelector.value('gradient');
    modeChangedEvent()
  }
  else if (key == 'r') {
    modeSelector.value('random');
    modeChangedEvent()
  }
  else if (key == 'o') {
    modeSelector.value('oddball');
    modeChangedEvent()
  }
  else if (key == 'i') {
    modeSelector.value('image');
    modeChangedEvent()
  }
}

function updateEmoji(offset) {
    curEmoji = (curEmoji + NUM_EMOJI + offset) % NUM_EMOJI;
    modeChangedEvent()
}

function keyPressed() {
  lastKeyPressedTime = millis();

  if (keyCode == LEFT_ARROW) {
    updateEmoji(-1);
  }
  else if (keyCode == RIGHT_ARROW) {
    updateEmoji(1);
  }
  else if (keyCode == UP_ARROW) {
    updateEmoji(-38);
  }
  else if (keyCode == DOWN_ARROW) {
    updateEmoji(38);
  }
}

function mouseMoved() {
  lastKeyPressedTime = millis();
}

function mouseDragged() {
  lastKeyPressedTime = millis();
}

sketch.png

thumbnail.png

twemoji36b_montage.png

z_color_helper.js

z_hsluv-0.0.3.min.js

z_purview_helper.js