17.1.MDDN242 PS2

.block

license: mit

.purview_helper.js

// note: this file is poorly named - it can generally be ignored.

// helper functions below for supporting blocks/purview

function saveBlocksImages(doZoom) {
  if(doZoom == null) {
    doZoom = false;
  }

  // generate 960x500 preview.jpg of entire canvas
  // TODO: should this be recycled?
  var offscreenCanvas = document.createElement('canvas');
  offscreenCanvas.width = 960;
  offscreenCanvas.height = 500;
  var context = offscreenCanvas.getContext('2d');
  // background is flat white
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 960, 500);
  context.drawImage(this.canvas, 0, 0, 960, 500);
  // save to browser
  var downloadMime = 'image/octet-stream';
  var imageData = offscreenCanvas.toDataURL('image/jpeg');
  imageData = imageData.replace('image/jpeg', downloadMime);
  p5.prototype.downloadFile(imageData, 'preview.jpg', 'jpg');

  // generate 230x120 thumbnail.png centered on mouse
  offscreenCanvas.width = 230;
  offscreenCanvas.height = 120;

  // background is flat white  
  context = offscreenCanvas.getContext('2d');
  context.fillStyle="#FFFFFF";
  context.fillRect(0, 0, 230, 120);

  if(doZoom) {
    // pixelDensity does the right thing on retina displays
    var pd = this._pixelDensity;
    var sx = pd * mouseX - pd * 230/2;
    var sy = pd * mouseY - pd * 120/2;
    var sw = pd * 230;
    var sh = pd * 120;
    // bounds checking - just displace if necessary
    if (sx < 0) {
      sx = 0;
    }
    if (sx > this.canvas.width - sw) {
      sx = this.canvas.width - sw;
    }
    if (sy < 0) {
      sy = 0;
    }
    if (sy > this.canvas.height - sh) {
      sy = this.canvas.height - sh;
    }
    // save to browser
    context.drawImage(this.canvas, sx, sy, sw, sh, 0, 0, 230, 120);
  }
  else {
    // now scaledown
    var full_width = this.canvas.width;
    var full_height = this.canvas.height;
    context.drawImage(this.canvas, 0, 0, full_width, full_height, 0, 0, 230, 120);
  }
  imageData = offscreenCanvas.toDataURL('image/png');
  imageData = imageData.replace('image/png', downloadMime);
  p5.prototype.downloadFile(imageData, 'thumbnail.png', 'png');
}

README.md

PS2 MDDN 242 2017

Color Waves

My project represents color as waves, with red as a faster wavelength and blue as lower, such as it is with the visibly spectrum and as it is how I feel the color is emotionally represented (blue is slow and cold, red is fast and hot). I represent contrast as complexity in the waves, through their amplitude, and brightness influences how much inner light is getting through. All of these paramaters have been mapped in a way that respects how the variables interact (zero contrast means hue will not change anything). This went through many different iterations including animated waves, mirrored waves and having it being made out of dots instead of filled shapes.

I have done more work to make my designs more distinct at smaller sizes, by changing the inner brightness, to make them look better when representing the emoji. I also have got the brightness implying the saturation, as in the final saturation value is multiplied by brightness, so that if the brightness is 0, changing saturation should do nothing. I have used my color splash to show more finely the difference in actual hue. Due to my design choice to make the hues be discrete integers of waves, it looses fidelity between the points. The contrast of the color splash now coincides with the modulus of the distance between wave integers. This is also multiplied by the actual contrast as I wanted to make sure the black areas stayed black. I chose orange as my splash color as it maintains good looking contrast in both the dark and light areas of the image.

Here my my current parameter mapping: saturation: amplitude hue: number of petals (like a flower) brightness: size of smaller versions and inner brightness (and amplitude connected to saturation)

glyph.js

/*
 * val4 is an array of 3 numbers that range from [0,1000]
 * size is the number of pixels for width and height
 * use p5.js to draw a round grawscale glpyh within the bounding box
 */ 
function gray_glyph(values, size) {
  smooth();
  draw_shape(values, size);
}

function draw_wave_circle(points, waves, size, amplitude){
  if(waves == 0 || points == 0 || size == 0)
    return;

  var calcAmp = size*amplitude/2;
  var radius = size - calcAmp;

  beginShape();
  for (var i = 0; i < points+2; i++) {
    var rad = radius + Math.cos(waves*TWO_PI*(i/points+0.25))*calcAmp;
    var x = rad*Math.cos(TWO_PI*i/points);
    var y = rad*Math.sin(TWO_PI*i/points);
    curveVertex(x,y);
  }
  endShape(CLOSE);
}

var h = 0;
var s = 1;
var b = 2;

function draw_shape(cur_color, size) {
  // replace this with your own logic
  var half_size = size/2;

  var brightness = cur_color[b]/100; //changes wave amplitude
  var saturation = cur_color[s]/100*brightness; //changes amount of waves //mul by brightness to make it bright implies contrast
  var redness = abs(cur_color[h]-180)/180; // changes wave speed, dot density and rotation speed
  var hue = cur_color[h]/360;

  var amplitudePeriod = 1000/((2*redness +1)/3);

  push();
  translate(half_size, half_size);

  stroke(0.4*255);
  strokeWeight(0.01*size);
  line(0,0, half_size*Math.sin(TWO_PI*hue), -half_size*Math.cos(TWO_PI*hue));
  noStroke();

  var sizes = [0.4, 0.7, 1];
  for (var i = sizes.length - 1; i >= 0; i--) {
    var radius = sizes[i];

    fill(60*(1-radius);

    if(i < sizes.length-1)
      radius = radius*easeOutCubic(saturation);

    //this can be used for animation
    if(false)
      var amplitude = cos(TWO_PI*millis()/amplitudePeriod);
    else
      var amplitude = 1;

    draw_wave_circle(100, round(2+redness*9), half_size*radius, brightness);
  }

  pop();
}

var easeOutCubic = function (t) {
  t--;
  return t*t*t + 1;
};

grayglyph.js

function GrayGlyph() {
  /*
   * values is an array of 3 numbers: [hue, saturation, brightness]
   *   + hue ranges from 0..360
   *   + saturation ranges from 0..100
   *   + brightness ranges from 0..100
   * this matches the default range for p5.js colorMode(HSB) as describe at:
   *   https://p5js.org/reference/#/p5/colorMode
   *
   * size is the number of pixels for width and height
   *
   * use p5.js to draw a round grayscale glpyh
   * the glyph should stay within the bounding box [0, 0, width, height]
   * this is a grayscale glyph, so only brighness can be adjusted.
   * the range for brighness is 0..100
   *
   * the color mode will be HSB, so you can either:
   *    + use a one argument grayscale call; this is easiest. examples:
   *       - fill(50);    // ranges from 0-100
   *       - stroke(100); // white
   *    + use a three arguement HSB call with values but set both H and S to 0. examples:
   *       - fill(0, 0, 51);    // equivalent to above
   *       - stroke(0, 0, 100); //
   */ 
  this.draw = function(values, size) {
    draw_shape(values, size);
  }  
}

//hsb indices
var h = 0;
var s = 1;
var b = 2;

var rednessSplits = 10;
var sizes = [0.4, 0.75, 1];

function draw_shape(cur_color, size, varHue) {
  var half_size = size/2;

  var brightness = cur_color[b]/100; //changes wave amplitude and inside shape color and inside shape size
  var saturation = cur_color[s]/100*brightness; //changes inside shape color and inside shape size
  var redness = abs(cur_color[h]-180)/180; // changes number of waves
  var hue = cur_color[h];

  noStroke();

  push();
  translate(half_size, half_size);

  for (var i = sizes.length - 1; i >= 0; i--) {
    var radius = sizes[i];
    
    //calculate inside colors based on the sizes (lower radius, lower brightness)
    var fillBrightness = 20+80*(1-(radius-sizes[0])/(1-sizes[0]))*brightness;
    
    //color will be picked hue, amount of redness * saturation saturation (only if hue exists), brightness is brightness of the particular level of wave
    fill(varHue, (varHue != null)*100*(redness%(1/rednessSplits))*rednessSplits*saturation, fillBrightness);

    //draw of largest size should not be effected by brightness
    if(i < sizes.length-1)
      radius = radius*brightness;

    //between 2 and 12 waves, amplitude of max 0.5 of radius
    draw_wave_circle(size*3, 2+floor(redness*rednessSplits), half_size*radius, 0.5*easeOutCubic(saturation));
  }
  
  pop();
}

var easeOutCubic = function (t) {
  t--;
  return t*t*t + 1;
};

//init variables outside for speed
var x;
var y;
var calcAmp;
var radius;
var last_point;
var rad;

//written in a way that waves can be a float number and it will mirror at the bottom
function draw_wave_circle(points, waves, size, amplitude){
  //amplitude in pixels
  calcAmp = size*amplitude/2;
  //actual radius with wave peak at edge
  radius = size - calcAmp;

  //start bezier
  beginShape();
  for (var i = 0; i < points; i++) {
    //reflection code in case it is animated later. Currently works but would do same thing if removed
    //exists in case I want to animate through a mirror at the bottom instead of jumping between discrete vals
    if(i%points < (points)/2){
      rad = radius + Math.cos(waves*TWO_PI*i/points)*calcAmp;
    }else
      rad = radius + Math.cos(waves*TWO_PI*(points-i)/points)*calcAmp;

    //calculate point on circle
    x = rad*Math.sin(TWO_PI*i/points);
    y = -rad*Math.cos(TWO_PI*i/points);

    if(i == 0)
      //first point of bezier is a vertex
      vertex(x,y);
    else
      //add to curve
      quadraticVertex(last_point[0], last_point[1], x,y);

    //save last point
    last_point = [x,y];
  }
  //draw shape
  endShape();
}

index.html

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="grayglyph.js"></script>
    <script language="javascript" type="text/javascript" src="spotglyph.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>brightness</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>
                        <hr>
                    </td>
                </tr>
                <tr>
                    <td>Mode</td>
                    <td id="selector1Container"></td>
                </tr>
                <tr>
                    <td>Glyph</td>
                    <td id="selector2Container"></td>
                </tr>
                <tr>
                    <td>Size</td>
                    <td id="selector3Container"></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": "13b093cbf9ca07656edde96c522c8f0154668f19",
      "name": "sketch"
    },
    {
      "sha": "f7cf5aa4d4856c205ab449cfe77994f267569722",
      "name": "interpolate"
    },
    {
      "sha": "d64229921c12db7daabb118ff96dbb232c8b2b0d",
      "name": "glyph_system"
    },
    {
      "sha": "ace968a8219c93412e2a64f23555db4ec718536b",
      "name": "glyph_object"
    },
    {
      "sha": "76fa51286a8b7af153a8db956d64dabcaac9a90b",
      "name": "spot_color"
    },
    {
      "sha": "615ba12fb7eafa99cbbf82a5ae3a005231a84ca8",
      "name": "final"
    }
  ]
}

sketch.html

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_helper.js"></script>
    <script language="javascript" type="text/javascript" src="sketch2.js"></script>
</head>
<body style="background-color:white">
    <div class="outer">
        <div class="inner">
            <div id="canvasContainer"></div>
        </div>
    </div>
</table>
</body>

sketch.js

var canvasWidth = 960;
var canvasHeight = 500;

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

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

var curEmoji = 76;
var NUM_EMOJI = 872;
var EMOJI_WIDTH = 38;

var lastKeyPressedTime;
var secondsUntilSwapMode = 5;
var secondsPerEmoji = 4;
var isSwappingEmoji = false;
var emojiSwapLerp = 0;
var prevEmoji = 0;
var lastEmojiSwappedTime;

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

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

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

  // create two sliders
  for (i=0; i<3; i++) {
    var 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('drive');
  modeSelector.option('gradient');
  modeSelector.option('random_grid');
  modeSelector.option('oddball');
  modeSelector.option('image');
  modeSelector.changed(modeChangedEvent);
  modeSelector.value('image');
  modeSelector.parent('selector1Container');

  glyphSelector = createSelect();
  glyphSelector.option('show_color');
  glyphSelector.option('gray');
  glyphSelector.option('spot');
  glyphSelector.changed(modeChangedEvent);
  glyphSelector.value('spot');
  glyphSelector.parent('selector2Container');

  sizeSelector = createSelect();
  sizeSelector.option('32');
  sizeSelector.option('64');
  sizeSelector.option('128');
  sizeSelector.option('256');
  sizeSelector.parent('selector3Container');
  sizeSelector.value('32');
  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(var i=0; i<18; i++) {
    curEmojiPixels[i] = Array(18);
    curEmojiColors[i] = Array(18);
    for(var j=0; j<18; j++) {
      curEmojiPixels[i][j] = Array(3);
    }
  }

  gray_glyph = new GrayGlyph();
  spot_glyph = new SpotGlyph();
  colorMode(HSB);
  refreshGridData();
  modeChangedEvent();
}

function sliderUpdated() {
    redraw();
}

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

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

var numGridRows;
var numGridCols;
var gridValues; // row, col order
var gridOffsetX, gridOffsetY;
var 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() {
  var mode = modeSelector.value();
  var 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 = 7;
    numGridRows = 3;
    gridOffsetX = 10;
    gridSpacingX = 136;
    gridOffsetY = 20;
    gridSpacingY = 166;
  }
  else if(glyphSize == 256) {
    numGridCols = 3;
    numGridRows = 1;
    gridOffsetX = 20;
    gridSpacingX = 320;
    gridOffsetY = 100;
    gridSpacingY = 500;
  }
  else if(glyphSize == 64) {
    numGridCols = 14;
    numGridRows = 7;
    gridOffsetX = 3;
    gridSpacingX = 68;
    gridOffsetY = 6;
    gridSpacingY = 71;
  }
  else if(glyphSize == 32) {
    numGridCols = 24;
    numGridRows = 13;
    gridOffsetX = 4;
    gridSpacingX = 40;
    gridOffsetY = 4;
    gridSpacingY = 38;
  }
  gridValues = new Array(numGridRows);
  for (var i=0; i<numGridRows; i++) {
    gridValues[i] = new Array(numGridCols);
    for (var j=0; j<numGridCols; j++) {
      gridValues[i][j] = new Array(8);
    }
  }
  if (mode == "gradient" || mode == 'oddball') {
    var top_left = Array(3);
    var top_right = Array(3);
    var bottom_left = Array(3);
    var bottom_right = Array(3);
    for (var 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 (var i=0; i<numGridRows; i++) {
      if(numGridRows == 1) {
        var frac_down = 0;
      }
      else {
        var 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 (var j=0; j<numGridCols; j++) {
        if(numGridCols == 0) {
          var frac_over = 0;
        }
        else {
          var 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 (var k=0; k<3; k++) {
        gridValues[oddball_row][oddball_col][k] = random(max_vals[k]);
      }
    }
  }
  else if(mode == "image") {
    for (var i=0; i<numGridRows; i++) {
      for (var j=0; j<numGridCols; j++) {
        for (var k=0; k<3; k++) {
          gridValues[i][j][k] = curEmojiPixels[i][j][k];
        }
      }
    }
  }
  else {
    for (var i=0; i<numGridRows; i++) {
      for (var j=0; j<numGridCols; j++) {
        for (var k=0; k<3; k++) {
          gridValues[i][j][k] = random(max_vals[k]);
        }
      }
    }
  }
}

function sizeChangedEvent() {
  var mode = modeSelector.value();
  if (mode != "drive") {
    refreshGridData();
  }
  redraw();
}

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

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

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

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

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

    // disable the sliders
    for(var 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
    var offsetX = 36 * (curEmoji % 38);
    var offsetY = 36 * Math.floor(curEmoji / 38);

    var squareOffsets = [ [0,0], [0,1], [1,1], [1, 0] ];
    curEmojiImg.copy(emojiImg, offsetX, offsetY, 36, 36, 0, 0, 36, 36);
    curEmojiImg.loadPixels();
    colorMode(RGB);
    for(var i=0; i<17; i++) {
      // i is y
      var maxX = 18;
      var offsetX = 0;
      if (i%2 == 1) {
        maxX = 17;
        offsetX = 1;
      }
      for(var j=0; j<maxX; j++) {
        // j is x
        var sumColor = [0, 0, 0];
        for(var k=0; k<4; k++) {
          // k is summing over 4 adacent pixels
          var curColor = curEmojiImg.get(j*2 + squareOffsets[k][0] + offsetX, 1 + i*2 + squareOffsets[k][1]);
          for(var l=0; l<3; l++) {
            sumColor[l] += curColor[l] / 4.0;
          }
        }
        var curColor = color(sumColor);
        curEmojiColors[i][j] = curColor;
        curEmojiPixels[i][j][0] = curColor._getHue();
        curEmojiPixels[i][j][1] = curColor._getSaturation();
        curEmojiPixels[i][j][2] = curColor._getBrightness();
      }
    }
    colorMode(HSB);

    // refresh data
    refreshGridData();
  }

  redraw();
}

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

var colorBack = "rgb(232, 232, 232)"
var colorFront = "rgb(192, 192, 255)"

function ColorGlyph() {
  this.draw = function(values, size) {
    fill(values[0], values[1], values[2]);
    stroke(0);
    var s2 = size/2;
    ellipse(s2, s2, size);
  }
}
var color_glyph = new ColorGlyph();

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

function getGyphObject() {
  var glyphMode = glyphSelector.value();
  var glyph_obj = color_glyph;

  if(glyphMode == "gray")
    glyph_obj = gray_glyph;
  else if(glyphMode == "spot")
    glyph_obj = spot_glyph;

  return(glyph_obj);
}

function drawDriveMode() {
  var glyph_obj = getGyphObject();
  var glyphSize = parseInt(sizeSelector.value(), 10);
  var halfSize = glyphSize / 2;

  background(colorBack);
  var halfSize = glyphSize / 2;
  var middle_x = canvasWidth / 2;
  var middle_y = canvasHeight / 2;
  var 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);
  glyph_obj.draw(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() {
  var mode = modeSelector.value();
  var glyph_obj = getGyphObject();

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

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

function checkImageUpdate() {
  var 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;
      }
      colorMode(RGB);
      if(now - lastEmojiSwappedTime < 1000) {
        isSwappingEmoji = true;
        emojiSwapLerp = (now - lastEmojiSwappedTime) / 1000.0;
        console.log(emojiSwapLerp);
        //colormode to rgb as they are stored as RGB and the change from RGB to HSB inside lerpColor introduces an error margin
        colorMode(RGB);
        // print("LERP: " + emojiSwapLerp);
        for (var i=0; i<numGridRows; i++) {
          for (var j=0; j<numGridCols; j++) {
            // var curColor = lerpColor(prevEmojiColors[i][j], nextEmojiColors[i][j], emojiSwapLerp);
            var 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();
            }
          }
        }
        colorMode(HSB);
        refreshGridData();
      }
      else {
        for (var i=0; i<numGridRows; i++) {
          for (var j=0; j<numGridCols; j++) {
            var 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();
      }
      colorMode(HSB);
    }
  }
}

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

  checkImageUpdate();

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

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
  else if (key == ' ') {
    refreshGridData();
    redraw();
  }
  else if (key == 'f') {
    var curGlyph = glyphSelector.value()
    if(curGlyph == "show_color") {
      glyphSelector.value('gray');
    }
    else if(curGlyph == "gray") {
      glyphSelector.value('spot');
    }
    else if(curGlyph == "spot") {
      glyphSelector.value('show_color');
    }
    redraw();
  }
  else if (key == 's') {
    var 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 == '4') {
    sizeSelector.value('256');
    sizeChangedEvent()
  }
  else if (key == 'd') {
    modeSelector.value('drive');
    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();
}

sketch2.js

var canvasWidth = 960;
var canvasHeight = 500;

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

  colorMode(HSL, 100);  // Use HSB with scale of 0-100
  // this means draw will only be called once
  //noLoop();
}


function draw_wave_circle(points, waves, radius, amplitude, mod){
	var calcAmp = radius*amplitude;
	beginShape();
	for (var i = 0; i < points+2; i++) {
		var rad = radius + Math.cos(waves*TWO_PI*(i/points))*calcAmp;
		var x = rad*Math.cos(TWO_PI*(i/points+mod));
		var y = rad*Math.sin(TWO_PI*(i/points+mod));
		curveVertex(x,y);
	}
	endShape(CLOSE);
}

var startTimes = [];

function draw_shape(column, row, size, cur_color, enabled) {
  // replace this with your own logic
  var half_size = size/2;

  if(!startTimes[column])
  	startTimes[column] = [];
  if(!startTimes[column][row] && enabled)
  	startTimes[column][row] = millis();

  var deltaTime = millis() - startTimes[column][row];

  // defaults
  strokeWeight(1.5);
  stroke(0, 0, 15)
  var rect_width = 60;

  var value = brightness(cur_color); //changes wave amplitude
  var contrast = saturation(cur_color); //changes amount of waves //should be dot density
  var redness = abs(hue(cur_color)-50)/50; // changes wave speed, dot density and rotation speed

  var amplitudePeriod = 1000/((2*redness +1)/3);

  if(startTimes[column][row] && amplitudePeriod < deltaTime)
  	if(enabled)
  		startTimes[column][row] = millis()+(deltaTime%amplitudePeriod);
  	else
  		startTimes[column][row] = false;

  push();
  translate(half_size, half_size);

  var sizes = [0.2, 0.55, 1];
  for (var i = sizes.length - 1; i >= 0; i--) {
  	fill(60*sizes[i]);

  	if(startTimes[column][row])
  		var amplitude = cos(TWO_PI*deltaTime/amplitudePeriod);
  	else
  		var amplitude = 1;

  	draw_wave_circle(50, round(10*contrast/100), half_size*sizes[i]*0.7, amplitude*0.3*value/100, millis()/10000*redness);
  }
  pop();
}

// some examples of how to specify a base color
//var my_color = "#d24632"
 //var my_color = "rgb(245, 225, 50)"
//var my_color = "rgb(20%, 47%, 67%)"
var my_color = "hsb(0, 80%, 70%)"

var shapes_should_draw = true;

// draw five colors and then five glyphs
function draw () {
  var size=120;
  var xsteps = 5;
  var xdiff = (width - xsteps * size) / xsteps;
  var xstep = size + xdiff;
  var ysteps = 3;
  var ydiff = (height - ysteps * size) / ysteps;
  var ystep = size + ydiff;

  var bg_color = color("#ffffdc");
  var base_color = color(my_color);
  var base_hue = hue(base_color);
  var base_sat = saturation(base_color);
  var base_lgt = lightness(base_color);

  background(bg_color);
  noStroke();

  for (var x=0; x<xsteps; x++) {
    for (var y=0; y<ysteps; y++) {
      var cur_color = base_color;

      if (y == 0) {
        // hue
        var cur_hue = (85 + base_hue + 100 * x / xsteps) % 100;
        cur_color = color(cur_hue, base_sat, base_lgt);
      }
      else if (y == 1) {
        // saturation
        var cur_sat = (5 + 90 * x / xsteps);
        cur_color = color(base_hue, cur_sat, base_lgt);
      }
      else if (y == 2) {
        // lightness
        var cur_lgt = (5 + 90 * x / xsteps);
        cur_color = color(base_hue, base_sat, cur_lgt);
      }

      fill(cur_color);
      noStroke();
      rect(xdiff/2 + xstep * x - 10, ydiff/2 + ystep * y - 10, size, size);

      strokeWeight(2);
      stroke(0);
      fill(bg_color);
      var curx = xdiff/2 + xstep * x + 10;
      var cury = ydiff/2 + ystep * y + 10;
      rect(curx, cury, size, size);

      if (shapes_should_draw) {
        push();
        translate(curx, cury);
        draw_shape(x, y, size, cur_color, dist(mouseX, mouseY, curx+size/2, cury+size/2) < size/2);
        pop();
      }
    }
  }
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
}

spotglyph.js

function SpotGlyph() {
  this.spot_hue = 30;
  //50 yellow

  /*
   * values is an array of 3 numbers: [hue, saturation, brightness]
   *   + hue ranges from 0..360
   *   + saturation ranges from 0..100
   *   + brightness ranges from 0..100
   * this matches the default range for p5.js colorMode(HSB) as describe at:
   *   https://p5js.org/reference/#/p5/colorMode
   *
   * size is the number of pixels for width and height
   *
   * use p5.js to draw a round grayscale glpyh
   * the glyph should stay within the bounding box [0, 0, width, height]
   *
   * this glyph can utilize changes in brightness and saturation, but only
   * using the spot_hue set above. So:
   *
   *    + hue will always be set to spot_hue (a value from 0-360)
   *    + saturation can vary from 0-100
   *    + brighness can vary from 0-100
   *
   * examples:
   *    - fill(this.spot_hue, 25, 50);     // desaturated. middle brightness.
   *    - stroke(this.spot_hue, 100, 100); // fully saturated and maximum brightness
   */
  this.draw = function(values, size) {
    //call function in grayglyph.js
    draw_shape(values, size, this.spot_hue);
  }
}

thumbnail.png

twemoji36b_montage.png