let strip = [];

let template = [];

let prompt, rsp, histPosition, histString;

let prog = [];

let history = [];

let historyLog = [];

let LUT = [];

let buttons = [];

let vars = [];

​

​

function preload() {

  LUT = loadTable('mac16.csv', 'csv', 'header');

}

​

function setup() {

  createCanvas(350, 350);

  np = 8;

  s = width / 10;

  selected = -1;

  prompt = createInput('');

  prompt.size(6 * s, 20);

  prompt.style('font-size', '16px');

  prompt.style('background', '#ddd');

  prompt.style('border', '0px');

  prompt.input(myInputEvent);

  prompt.position(s / 2, 3 * s);

  histPosition = 0;

  frameRate(5);

  maxPixels = 8;

  err = ">syntax error";

  parse("init");

  // print(LUT);

  buttons.push(new Button("\u25B2", 7.5 * s, 3 * s + 10));

  buttons.push(new Button("\u25BC", 9 * s, 3 * s + 10));

  for (let i = 0; i < 8; i++) {

    template.push(new Pixel(1));

    template[i].y -= (s + 5);

    template[i].index = i;

    template[i].shape = int(random(4));

    template[i].c = color(LUT.getString(int(random(16)), 0));

  }

  // init variables (a..z)

  for (let i = 0; i < 26; i++) vars[i] = 0;

 link = createA('http://p5js.org/', '?');

  link.position(width-10,0);

}

​

​

function draw() {

  background(192);

  displayAll();

  drawLog();

}

​

class Pixel {

  constructor(cat) {

    this.x = 0;

    this.y = 2 * (s + 5);

    this.col = color(0);

    this.cat = cat;

    this.shape = 0;

    this.index = (cat == 0) ? strip.length : template.length;

  }

  display() {

    push();

    translate(((this.cat == 0) ? strip.length - this.index : template.length - this.index) * (s + 5), this.y);

    //rotate(this.alpha);

    rectMode(CENTER);

    fill(0);

    stroke(32);

    rect(0, 0, s, s);

    ellipseMode(CENTER);

    stroke(204);

    fill(this.col);

    if (this.shape == 0)

      ellipse(0, 0, 2 * s / 3, 2 * s / 3);

    else if (this.shape == 1)

      triangle(-s / 3, -s / 3, s / 3, -s / 3, 0, s / 3);

    else if (this.shape == 2) {

      push();

      rotate(PI / 2);

      rect(0, 0, s / 2, s / 2);

      pop();

    } else if (this.shape == 3) {

      push();

      rotate(PI / 4);

      rect(0, 0, s / 2, s / 2);

      pop();

    }

    textAlign(LEFT, TOP);

    textSize(10);

    stroke(255);

    strokeWeight(0.3);

    fill(255);

    text(this.index, s / 2 - textWidth(this.index) - 1, s / 2 - textAscent() - 1);

    pop();

  }

  move(x, y) {

    this.x = x;

    this.y = y;

  }

}

​

class Button {

  constructor(chr, x, y) {

    this.face = chr;

    this.x = x;

    this.y = y;

  }

  display() {

    push();

    translate(this.x, this.y);

    rectMode(CENTER);

    noFill();

    point(0, 0);

    //rect (0,0,s,s);

    fill(0);

    textAlign(CENTER, CENTER);

    text(this.face, 0, 0);

    pop();

​

  }

  isClicked() {

    return (dist(mouseX, mouseY, this.x, this.y) < s / 2);

  }

}

​

function mouseClicked() {

  if (buttons[0].isClicked()) {

    browseHistory(true);

​

  } else if (buttons[1].isClicked()) {

    browseHistory(false);

​

  }

}

​

function displayAll() {

  for (let i = 0; i < template.length; i++) {

    //   template[i].display();

  }

  for (let i = 0; i < strip.length; i++) {

    strip[i].display();

  }

  for (let i = 0; i < buttons.length; i++) {

    buttons[i].display();

  }

}

​

function myInputEvent() {

  //console.log('you are typing: ', this.value());

}

​

function keyTyped() {

  if (keyCode === ENTER) {

    parse(prompt.value());

    prompt.value('');

    histPosition = history.length;

    print ('1');

  } else {

    prompt.value(prompt.value().toLowerCase());

  }

}

​

function browseHistory(up) {

  if (up) {

    histPosition--;

    histPosition = max(0, histPosition);

    prompt.value(history[histPosition]);

  } else {

    histPosition++;

    histPosition = min(histPosition, history.length);

    if (histPosition < history.length)

      prompt.value(history[histPosition]);

    else

      prompt.value('');

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    browseHistory(true);

  } else if (keyCode === DOWN_ARROW) {

    browseHistory(false);

​

  }

}

​

function parse(cmd) {

  cmd = cmd.toLowerCase();

  cmd = cmd.trim();

  if (cmd == "") return;

  history.push(cmd);

  historyLog.push(cmd);

  c = cmd.split(" ");

  c = cleanup(c);

  if (c[0] == "all") {

    if (c.length == 2)

      all(LUT.getString(constrain(int(c[1]), 0, 15), 1));

    else if (c.length == 4)

      all(color(c[1], c[2], c[3]));

    else historyLog.push(">syntax: all value | R G B");

  } else if (c[0] == "color") {

    if (c.length == 3)

      strip[c[1]].col = (

        color(

          LUT.getString(

            constrain(int(c[2]), 0, 15), 0

          )

        )

      );

    else if (c.length == 5)

      strip[c[1]].col = (color(int(c[2]), int(c[3]), int(c[4])));

    else if (c.length == 2)

      historyLog.push("> " + strip[c[1]].col.levels.slice(0, 3).toString());

    else {

      historyLog.push(">syntax: color id [value | R G B]");

      for (let i = 0; i < LUT.getRowCount() / 2; i++)

        historyLog.push("" + 2 * i + ":" + LUT.getString(2 * i, 1) + "|" + (2 * i + 1) + ":" + LUT.getString(2 * i + 1, 1) + "|");

    }

  } else if (c[0] == "shape") {

    if (c.length == 3)

      strip[c[1]].shape = int(c[2]);

    else historyLog.push(">syntax: shape id 0..3");

  } else if (c[0] == "add") {

    if (c.length == 2) {

      for (let i = 0; i < c[1]; i++)

        if (strip.length < maxPixels)

          strip.push(new Pixel(0));

    } else historyLog.push(">syntax: add n");

​

  } else if (c[0] == "init") {

    strip = [];

    strip.push(new Pixel(0));

    history = ["help"];

    historyLog = [];

    historyLog.push(">ok");

  } else if (c[0] == "clear") {

    history = [];

    historyLog = [];

  } else if (c[0] == "help") {

    historyLog.push(">init add color shape all clear help");

  } else if (c[0] == "loop") {

  } else if (c[0] == "rec") {

    recording = true;

    prog[0] = history.length;;

  } else if (c[0] == "stop") {

    recording = false;

    prog[1] = history.length-1;

  } else if (c[0] == "list") {

    for (let i = prog[0]; i < prog[1]; i++)

        historyLog.push(history[i]);

  } else if (c[0] == "delay") {

      if (c.length == 2) delay = int(c[1]);

      else historyLog.push(">delay is "+delay+" ms");

  } else if ((c[0].length==1)&&(c[0].charCodeAt(0)>=97)&&(c[0].charCodeAt(0)<=122)) {

      if (c.length == 2) vars[c[0].charCodeAt(0)-97] = int(c[1]);

      else historyLog.push(">value of "+c[0]+" is "+vars[c[0].charCodeAt(0)-97]);

  }

}

​

function cleanup(array) {

  for (let i = array.length - 1; i >= 0; i--) {

    array[i] = array[i].trim();

    if (array[i] == "") array.splice(i, 1);

  }

  return array;

}

​

function all(v) {

  for (let i = 0; i < strip.length; i++) {

    strip[i].col = v;

  }

}

​

function drawLog() {

  push();

  translate(s / 2, 4 * s, width - s);

  rectMode(CORNER);

  fill(204);

  noStroke();

  rect(0, 0, width - s, height - 4 * s - 10);

  histString = "";

  for (let i = max(0, historyLog.length - 11); i < historyLog.length; i++) {

    histString += historyLog[i] + "\n";

  }

  fill(0);

  textAlign(LEFT, TOP);

  textFont('Courier New');

  textSize(14);

  text(histString, 0, 0);

  pop();

}