Dimensional Glyph

.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

PS4 MDDN 342 2016

Final Version of Glyphs Assignment

Glyph4 : Runic Letters

I have always found Nordic runes interresting. Mathematically they always looked like dots connected by lines. For the glyph4 I felt it a perfect opportunity to create random Nordic letters. As the constraints I had to work with was to keep all detail inside the circle, I looked at how to find the largest square inside a circle and came up with a formula that stated that the edge of the square will always be radius divided by the square root of 2. That allowed me to make the neccesary calculations in the code to break the square up into 4 equal squares and then have the program choose a random coordinate in each of those 4 sqaures for the points. Then it was just a matter of connecting the dots to make the Runic Letters. One other thing I had to consider was that the sliders only had values from 0-100. If I wanted to work with the full color spectrum I had to take 255/100*slidervalue. This gave me the related value if the slider was 0-255.

Slider 1) Controls how many times a random point is chosen Slider 2) Controls the size of the points Slider 3) Controls the strokeweight of the lines Slider 4) Controls the color of the lines and dots

I feel this Glyph came out looking quite good. It seemed that most generations of the random and gradient came out looking a little squashed in but I dont think I offset my values too much. Either way, none of the values go beyond the boundaries of the circle so I call it a succcess.

Glyph8 : Overlapping Waveform

For this Glyph I wanted to create a pseudo waveform that would have both a high and low "frequency" on two bars. It took me a long time to carefully offset each value based on the 0,0 location, but it worked well in the end. To create the 5 bars on either side of the location of the midpoint of the high and low locations, dictated by the inputs, turned out to be quite tricky. I calculated how much space was left to the left and right of each dot and then used a for loop to figure out how wide each bar would be. The height of each bar grew gradually smaller constantly, but as the point is moved, the width variable of the decay changes based on how much space is left and right of the point. To make sure I would get no overlap on the edges of the cube and no 0 values I made sure to, if the point is placed on the edge of the cube, to offset it by half the points diameter. This allowed for there always to be 5 bars on either side, even if they are very squashed.

Once I figured out all the math for this I added in a lerpColor that would be dictated by the remaining two values. I constrained them to always give colors within a certain range just so that it does not look too crazy. I also lowered the opacity of various elements to create a more artistic look to the generations. All in all, I am happy with how this came out.

Slider 1) Controls length of top bar Slider 2) Controls length of bottom bar Slider 3) Controls top bar high wave mid point Slider 4) Controls top bar low wave mid point Slider 5) Controls bottom bar high wave mid point Slider 6) Controls bottom bar low wave mid point Slider 7) Controls high wave color range Slider 8) Controls low wave color range

glyph.js

/*
 * val4 is an array of 4 numbers that range from [0,100]
 * size is the number of pixels for width and height
 * use p5.js to draw a round grawscale glpyh within the bounding box
 */ 


 /* MY EDITS 

in Glyph4 : 
values[0] = How many times random is run on each point withing the constraints
values[1] = Size of the dots
values[2] = Size of the strokes
values[3] = Color balance of the strokes and dots


Size/2 = r. 

Using the new formula that y (height of the square) is y=r/SQRT(2)
and therefore : (s2/sqrt(2)/2) to find half of that

 */
function glyph4(values, size) {

  var lineX = [];
  var lineY = []; 
  var dotSize;
  var dotColor;
  var lineColor;
  var dotSize;
  var lineSize;


  // Setting base Ellipse
  var s2 = size/2;   // rad of circle for calculation
  fill(50);
  ellipse(s2, s2, size);


  // Set Dot and Line color based on values[3]
  dotColor = values[3]*2.55;
  fill(dotColor);
  lineColor = dotColor/2;
  stroke(lineColor);

  // set Dot and Line size based on values[1] and values[2]
  dotSize = values[1]/10;
  if(dotSize<4){
    dotSize = 4;
  }
  lineSize = values[2]/20;
  if(lineSize<2){
    lineSize = 2;
  }
  strokeWeight(lineSize);

  // Point values for top left corner
  for(var i = 0; i<values[0]+1; i++){
    lineX[0] = Math.random((s2-(s2/sqrt(2)/2),s2));
    lineY[0] = Math.random((s2-(s2/sqrt(2)/2),s2));
  }

  // Point values for top right corner
  for(var i = 0; i<values[0]+1; i++){
    lineX[1] = Math.random((s2+(s2/sqrt(2)/2),s2));
    lineY[1] = Math.random((s2-(s2/sqrt(2)/2),s2));
  }

  // Point values for the bottom left corner
  for(var i = 0; i<values[0]+1; i++){
    lineX[2] = Math.random((s2-(s2/sqrt(2)/2),s2));
    lineY[2] = Math.random((s2+(s2/sqrt(2)/2),s2));
  }

  // Point values for the bottom right corner
  for(var i = 0; i<values[0]+1; i++){
    lineX[3] = Math.random((s2+(s2/sqrt(2)/2),s2));
    lineY[3] = Math.random((s2+(s2/sqrt(2)/2),s2));
  }

  
  //Sizing the coordinates for the dots
  // This was where the issues was. I originally did not add s2/2 and this caused the offset
  // to not be in the right place. 
  for(var j = 0; j<4; j++){
    lineX[j] = lineX[j]*s2+(s2/2);
    lineY[j] = lineY[j]*s2+(s2/2);
  }


  // Drawing each dot
  for(var k = 0; k<4; k++){
    ellipse(lineX[k],lineY[k],dotSize,dotSize);
  }
  // Drawing each line
  for(var l = 0; l<3; l++){
    line(lineX[l],lineY[l],lineX[l+1],lineY[l+1]);
  }

  /* testing stuff
  ellipse(0,0,dotSize,dotSize); // origin dot location 
  println("1 : "+lineX[0]+","+lineY[0]); // coordinates 
  println("2 : "+lineX[1]+","+lineY[1]);
  println("3 : "+lineX[2]+","+lineY[2]);
  println("4 : "+lineX[3]+","+lineY[3]);
  */


  /*
  var color1 = map(values[0], 0, 100, 10, 70)
  stroke(color1);
  fill(color1)
  var s2 = size/2;
  ellipse(s2, s2, size);

  var inner_size = 0.2 + 0.4 * values[2] / 100.0;
  var s3 = size * inner_size;

  var color2 = map(values[1], 0, 100, color1+20, 240)
  fill(color2);
  stroke(color2);

  var shift_frac = (values[3] - 50.0) / 50.0;
  var max_shift = 0.5 * (size - s3);
  var x_shift = shift_frac * max_shift;
  ellipse(s2 + x_shift, s2, s3);  
  */
}

/*
 * val8 is an array of 8 numbers that range from [0,100]
 * size is the number of pixels for width and height
 * use p5.js to draw a square color glpyh within the bounding box
 */
function glyph8(values, size) {

  /* My Edits 

  in Glyph8

  Slider 1) Length of top bar
  Slider 2) Length of bottom bar
  Slider 3) Loc of top Bar higher wave
  Slider 4) Loc of bottom Bar Higher wave
  Slider 5) Loc of top bar lower wave
  Slider 6) Loc of bottom bar lower wave
  Slider 7) Color Balance top bar
  Slider 8) Color Balance bottom bar

  */

  var rodTopX;
  var rodTopY;
  var rodBotX;
  var rodBotY;
  var dotTopX;
  var dotBotX;
  // variables for holding the x coords of the top and bottom dots
  var highDotTopX;
  var highDotBotX;
  var lowDotTopX;
  var lowDotBotX;
  // max top and bottom dot x locations
  var maxDotTop;
  var maxDotBot;
  // Variables to check how much space to left and right of each dot. 
  var spaceLeft;
  var spaceRight;

  // Color arrays
  var topColArr = [];
  var botColArr = [];

  // Setting up lerpColors for Top Bars (keeping it cosntrained to the blue spectrum) Has 100 opacity so bars underneath shine through
  fromTop = color(values[6],values[6]+25,values[6]+50,100);
  toTop = color(values[6]+50,values[6]+75,values[6]+100,100);
  interTopA = lerpColor(fromTop, toTop, .25);
  interTopB = lerpColor(fromTop, toTop, .50);
  interTopC = lerpColor(fromTop, toTop, .75);
  topColArr[1] = fromTop;
  topColArr[2] = interTopA;
  topColArr[3] = interTopB;
  topColArr[4] = interTopC;
  topColArr[5] = toTop;

  // Setting up lerpColors for Bottom Bars (keeping it constrained from neon green to purple)
  fromBot = color(values[7],values[7]*2,values[7]/2);
  toBot = color(values[7],values[7]/2,values[7]*2);
  interBotA = lerpColor(fromBot, toBot, .25);
  interBotB = lerpColor(fromBot, toBot, .50);
  interBotC = lerpColor(fromBot, toBot, .75);
  botColArr[1] = fromBot;
  botColArr[2] = interBotA;
  botColArr[3] = interBotB;
  botColArr[4] = interBotC;
  botColArr[5] = toBot;

  noStroke();
  fill(192,192,192);
  rect(0,0,size,size);

  rodTopX = 0;
  rodTopY = (size/6)*2;
  rodBotX = 0;
  rodBotY = (size/6)*4;

  fill(50,50,50,50);

  // Check to see that rod top and bottom does not have a less than adequate value for the dots to appear on
  if(values[0]<(size/8)){
    values[0] = size/8;
  }if(values[1]<(size/8)){
    values[1] = size/8;
  }

  // Draws the top and bottom bar
  rect(rodTopX,rodTopY,(size/100)*values[0],size/8);
  rect(rodBotX,rodBotY,(size/100)*values[1],size/8);

  // Sets the location of the upper wave dot on the top and bottom bar
  maxDotTop = (size/100)*values[0];
  maxDotBot = (size/100)*values[1];


  // Setting top rod high wave dot location 
  highDotTopX = (size/100)*values[2]+((size/8)/2);
  if(highDotTopX<0){
    highDotTopX = 0;
  }
  if(highDotTopX>maxDotTop){
    highDotTopX = maxDotTop-((size/8)/2);
  }
  // Setting up bottom rod high wave dot location
  highDotBotX = (size/100)*values[3]+((size/8)/2);
  if(highDotBotX<0){
    highDotBotX = 0;
  }
  if(highDotBotX>maxDotBot){
    highDotBotX = maxDotBot-((size/8)/2);
  }
  // Setting the top rod low wave dot location
  lowDotTopX = (size/100)*values[4]+((size/8)/2);
  if(lowDotTopX<0){
    lowDotTopX = 0;
  }
  if(lowDotTopX>maxDotTop){
    lowDotTopX = maxDotTop-((size/8)/2);
  }
  // Setting the bottom rod low wave dot location
  lowDotBotX = (size/100)*values[5]+((size/8)/2);
  if(lowDotBotX<0){
    lowDotBotX = 0;
  }
  if(lowDotBotX>maxDotBot){
    lowDotBotX = maxDotBot-((size/8)/2);
  }


  // Drawing the center rods that represent the middle of the top waves
  rect(highDotTopX-((size/8)/2),rodTopY-((size/6)*2),size/8,(size/6)*2);
  rect(highDotBotX-((size/8)/2),rodBotY-((size/6)*2),size/8,(size/6)*2);
  // Drawing the center rods that represent the middle fo the low waves
  rect(lowDotTopX-((size/8)/2),rodTopY,size/8,(size/6)*2);
  rect(lowDotBotX-((size/8)/2),rodBotY,size/8,(size/6)*2);

  fill(100,100,100,100);
  // Drawing both the top and bottom rod high wave origin dots
  ellipse(highDotTopX,rodTopY,size/8,size/8);
  ellipse(highDotBotX,rodBotY,size/8,size/8);
  // Drawing both the top and bottom rod low wave origin dots
  ellipse(lowDotTopX,rodTopY+((size/8)/2),size/8,size/8);
  ellipse(lowDotBotX,rodBotY+((size/8)/2),size/8,size/8);

  // Drawing the radiating bars for the Top Low wave
  spaceLeft = 0+lowDotTopX;
  spaceRight = size-lowDotTopX;

  for(var i = 5; i>0; i--){
    fill(botColArr[i]);
    rect(lowDotTopX-((spaceLeft/5)*i),0+((size/6)*2)+(size/8),spaceLeft/5,(((size/6)*2)/5)*(6-i));
    rect(lowDotTopX+((spaceRight/5)*i)-(spaceRight/5),0+((size/6)*2)+(size/8),spaceRight/5,(((size/6)*2)/5)*(6-i));
  }

  // Drawing the radiating bars for the Bottom Low wave
  spaceLeft = 0+lowDotBotX;
  spaceRight = size-lowDotBotX;

  for(var i = 5; i>0; i--){
    fill(botColArr[i]);
    rect(lowDotBotX-((spaceLeft/5)*i),0+((size/6)*4)+(size/8),spaceLeft/5,(((size/6))/5)*(6-i));
    rect(lowDotBotX+((spaceRight/5)*i)-(spaceRight/5),0+((size/6)*4)+(size/8),spaceRight/5,(((size/6))/5)*(6-i));
  }


  // Drawing the radiating bars for Top High wave
  spaceLeft = 0+highDotTopX;
  spaceRight = size-highDotTopX;

  for(var i = 5; i>0; i--){
    fill(topColArr[i]);
    rect(highDotTopX-((spaceLeft/5)*(6-i)),0+((size/6)*2)-((((size/6)*2)/5)*i),spaceLeft/5,(((size/6)*2)/5)*i);
    rect(highDotTopX+((spaceRight/5)*(5-i)),0+((size/6)*2)-((((size/6)*2)/5)*i),spaceRight/5,(((size/6)*2)/5)*i);
  }

  // Drawing the radiating bars for the Bottom High wave
  spaceLeft = 0+highDotBotX;
  spaceRight = size-highDotBotX;

  for(var i = 5; i>0; i--){
    fill(topColArr[i]);
    rect(highDotBotX-((spaceLeft/5)*(6-i)),0+((size/6)*4)-((((size/6)*2)/5)*i),spaceLeft/5,(((size/6)*2)/5)*i);
    rect(highDotBotX+((spaceRight/5)*(5-i)),0+((size/6)*4)-((((size/6)*2)/5)*i),spaceRight/5,(((size/6)*2)/5)*i);
  }


  /*
  var red = [255, 0, 0];
  var green = [0, 255, 0];
  var blue = [0, 0, 255];
  var white = [255, 255, 255];
  var colors = [red, green, blue, white, red, green, blue, white];
  stroke(0);
  fill(0);
  rect(0, 0, size, size);
  for(var i=0; i<8; i++) {
    stroke(colors[i]);
    fill(colors[i]);
    offsety = i * size / 8;
    offsetx = (size * values[i]) / 100;
    rect(0, offsety, offsetx, size);
  }

  */

}

index.html

<head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/addons/p5.dom.js"></script>
    <script language="javascript" type="text/javascript" src=".purview_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.1;
            -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>1</td>
                    <td id="slider1Container"></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td id="slider2Container"></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td id="slider3Container"></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td id="slider4Container"></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td id="slider5Container"></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td id="slider6Container"></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td id="slider7Container"></td>
                </tr>
                <tr>
                    <td>8</td>
                    <td id="slider8Container"></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></td>
                    <td id="buttonContainer"></td>
                </tr>
        </div>
    </div>
</table>
</body>

preview.jpg

sketch.js

var canvasWidth = 960;
var canvasHeight = 500;

var glyphSelector;
var modeSelector;
var sizeSelector;


function preload(){

}

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

  // create two sliders
  for (i=0; i<8; i++) {
    var slider = createSlider(0, 100, 50);
    slider.parent("slider" + (i+1) + "Container")
    slider.changed(sliderUpdated);
    slider.mouseMoved(sliderUpdated);
    slider.touchMoved(sliderUpdated);
    val_sliders.push(slider);
  }

  modeSelector = createSelect();
  modeSelector.option('gradient');
  modeSelector.option('analogy');
  modeSelector.option('drive');
  modeSelector.option('random_grid');
  modeSelector.changed(modeChangedEvent);
  modeSelector.value('gradient');
  modeSelector.parent('selector1Container');

  glyphSelector = createSelect();
  glyphSelector.option('glyph4');
  glyphSelector.option('glyph8');
  glyphSelector.changed(modeChangedEvent);
  glyphSelector.parent('selector2Container');

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

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

  noLoop();
  refreshGridData();
  modeChangedEvent();
}

function sliderUpdated() {
    redraw();
}

function mouseClicked() {
  analogyCycleStep = (analogyCycleStep + 1) % 3;
  if(analogyCycleStep == 0) {
    refreshAnalogyData();
  }
  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

var numAnalogyChoices = 5;
var analogyValues = new Array(4);
var analogyChoices = new Array(numAnalogyChoices);
var analogyAnswer;
var analogyCycleStep;

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

function refreshAnalogyData() {
  for (var i=0; i<4; i++) {
    analogyValues[i] = new Array(8);
  }
  for (var i=0; i<3; i++) {
    for (var j=0; j<8; j++) {
      analogyValues[i][j] = random(100);
    }
  }
  for (var j=0; j<8; j++) {
    analogyValues[3][j] = clamp(analogyValues[1][j] - analogyValues[0][j] + analogyValues[2][j], 0, 100);
    // handle overflow
    analogyValues[1][j] = clamp(analogyValues[3][j] - analogyValues[2][j] + analogyValues[0][j], 0, 100);
  }
  analogyAnswer = Math.floor(random(numAnalogyChoices))
  for (var i=0; i<numAnalogyChoices; i++) {
    analogyChoices[i] = new Array(8);
    for (var j=0; j<8; j++) {
      if (i == analogyAnswer) {
        analogyChoices[i][j] = analogyValues[3][j];
      }
      else {
        analogyChoices[i][j] = random(100);
      }
    }
  }
  analogyCycleStep = 0;
}

function refreshGridData() {
  var glyphSize = parseInt(sizeSelector.value(), 10);

  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;
  }
  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);
    }
  }
  var mode = modeSelector.value();
  if (mode == "gradient") {
    var top_left = Array(8);
    var top_right = Array(8);
    var bottom_left = Array(8);
    var bottom_right = Array(8);
    for (var k=0; k<8; k++) {
      top_left[k] = random(100);
      top_right[k] = random(100);
      bottom_left[k] = random(100);
      bottom_right[k] = random(100);
    }
    for (var i=0; i<numGridRows; i++) {
      if(numGridRows == 0) {
        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);
      }
    }
  }
  else {
    for (var i=0; i<numGridRows; i++) {
      for (var j=0; j<numGridCols; j++) {
        for (var k=0; k<8; k++) {
          gridValues[i][j][k] = random(100);
        }
      }
    }
  }
  refreshAnalogyData();
}

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

function modeChangedEvent() {
  var mode = modeSelector.value();
  var glyph = glyphSelector.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(i=0; i<4; i++) {
      val_sliders[i].removeAttribute('disabled');  
    }
    if(glyph === "glyph4") {
      for(i=4; i<8; i++) {
        val_sliders[i].attribute('disabled','');
      }
    }
    else {
      for(i=4; i<8; i++) {
        val_sliders[i].removeAttribute('disabled');  
      }
    }
  }
  else {
    // enable the button
    button.removeAttribute('disabled');

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

    if (mode == "analogy") {
      // enable the size selector
      sizeSelector.attribute('disabled','');
    }
    else {
      // enable the size selector
      sizeSelector.removeAttribute('disabled');
    }

    // refresh data
    refreshGridData();
  }
  redraw();
}

function buttonPressedEvent() {
  analogyCycleStep = 0;
  refreshGridData();
  redraw();
}

var colorBack = [128, 128, 128];
var colorFront = [200, 200, 200];

function drawDriveMode() {
  var glyph_is_glyph4 = true;
  if(glyphSelector.value() === "glyph8")
    glyph_is_glyph4 = false;

  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;
  resetMatrix();
  translate(middle_x - halfSize, middle_y - halfSize);
  var val = [0,0,0,0,0,0,0,0];
  for(i=0; i<8; i++) {
    val[i] = val_sliders[i].value();
  }
  stroke(128, 128, 192);
  noFill();
  if(glyph_is_glyph4) {
    ellipse(halfSize, halfSize, glyphSize+2);
    glyph4(val, glyphSize)
  }
  else {
    rect(-1, -1, glyphSize+2, glyphSize+2);
    glyph8(val, glyphSize)    
  }
}

function drawGridMode() {
  var glyph_fn = glyph4;
  if(glyphSelector.value() === "glyph8")
    glyph_fn = glyph8;

  var glyphSize = parseInt(sizeSelector.value(), 10);
  background(colorBack);
  for (var i=0; i<numGridRows; i++) {
    for (var j=0; j<numGridCols; j++) {
      resetMatrix();
      translate(gridOffsetX + j * gridSpacingX, gridOffsetY + i * gridSpacingY);
      for (var k=0; k<8; k++) {
        glyph_fn(gridValues[i][j], glyphSize);
      }
    }
  }
}

var analogyOffsetX = 350;
var analogyOffsetY = 40;
var analogySpacingX = 160;
var analogySpacingY = 160;
var analogyChoiceOffsetX = 260;
var analogyChoiceOffsetY = 380;
var analogyChoiceSpacingX = 100;

function drawAnalogy() {
  background(colorBack);

  var glyph_fn = glyph4;
  if(glyphSelector.value() === "glyph8")
    glyph_fn = glyph8;

  resetMatrix();
  translate(analogyOffsetX + 0 * analogySpacingX, analogyOffsetY + 0 * analogySpacingY);
  glyph_fn(analogyValues[0], 128);
  resetMatrix();
  translate(analogyOffsetX + 1 * analogySpacingX, analogyOffsetY + 0 * analogySpacingY);
  glyph_fn(analogyValues[1], 128);
  resetMatrix();
  translate(analogyOffsetX + 0 * analogySpacingX, analogyOffsetY + 1 * analogySpacingY);
  glyph_fn(analogyValues[2], 128);
  resetMatrix();
  translate(analogyOffsetX + 1 * analogySpacingX, analogyOffsetY + 1 * analogySpacingY);
  if(analogyCycleStep == 2) {
    glyph_fn(analogyValues[3], 128);
  }
  else {
    stroke(64, 64, 192);
    noFill();
    if(glyph_fn === glyph4) {
      ellipse(64, 64, 128+2);
    }
    else {
      rect(-1, -1, 128+2, 128+2);
    }
  }

  if(analogyCycleStep != 0) {
    for(var i=0; i<numAnalogyChoices; i++) {
      resetMatrix();
      translate(analogyChoiceOffsetX + i * analogyChoiceSpacingX, analogyChoiceOffsetY);
      if(analogyCycleStep == 2 && analogyAnswer == i) {
        stroke(64, 64, 192);
        fill(64, 64, 192);
        rect(-6, -6, 64+12, 64+12);
      }
      glyph_fn(analogyChoices[i], 64);
    }
  }
}

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

  if (mode == "drive") {
    drawDriveMode();
  }
  else if (mode == "analogy") {
    drawAnalogy();
  }
  else {
    drawGridMode();
  }



}

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

thumbnail.png