Glyph generator

// @ts-check

/// <reference path="./node_modules/@types/p5/global.d.ts" />

​

​

const palette = ['#a3c4bc', '#d2a189', '#bfd7b5','#e7efc5','#ffa69e'];

const paletteBgs = ['#413c58', '#483333', '#4C574C'];

var bgColor;

var margin;

​

const cellsX = 15;

const cellsY = 15;

var cellWidth;

var cellHeight;

const cellDivsX = 6;

const cellDivsY = 6;

​

let knots = []; // alphabet

const PARAMS = {

  showAlphabet: false,

  useAlphabet: true,

  letters: 26,

};

​

function setup() {

  let s = min(windowWidth, windowHeight);

  createCanvas(s, s);

  smooth();

  margin = windowWidth/15;

  bgColor = color(255);

  cellWidth = (width-2*margin)/cellsX;

  cellHeight = (height-2*margin)/cellsY;

  noLoop();

  generateAlphabet(PARAMS.letters);

  const pane = new Tweakpane.Pane();

  pane.addInput(PARAMS, 'showAlphabet').on('change', draw);

  pane.addInput(PARAMS, 'useAlphabet').on('change', draw);

  pane.addInput(PARAMS, 'letters', {min: 2, max: 200, step: 1}).on('change', function(ev) {

    generateAlphabet(ev.value);

    draw();

  });

  pane.addButton({

    title: 're-alphabetize'

  }).on('click', () => {

    generateAlphabet(PARAMS.letters); 

    draw();});

}

​

function draw() {

  background(paletteBgs[randi(0, paletteBgs.length)]);

  noFill();

  stroke(palette[randi(0, palette.length)]);

  strokeWeight(cellWidth/30);

  rectMode(CENTER);

  //randomCell();

  rectMode(CORNER)

  if (!PARAMS.showAlphabet) {

    push();

    translate(margin, margin);

    for(let row = 0; row < cellsY; row++) {

      for (let col = 0; col < cellsX; col++) {

        push();

        translate(row*cellHeight, col*cellWidth)

        translate(cellWidth/2, cellHeight/2);

        if(PARAMS.useAlphabet) KnotGlyph(knots[randi(0, knots.length)]);

        else KnotGlyph();

        pop();

      }

    }

    pop();

    drawFrame(margin/2, margin/2, width-margin, height-margin);

  } else {

    let i = 0;

    push();

    translate(margin, margin);

    for (let col = cellsX/2-sqrt(PARAMS.letters)/2; col < cellsX/2+sqrt(PARAMS.letters)/2; col++) {

      for(let row = cellsY/2-sqrt(PARAMS.letters)/2; row <  cellsY/2+sqrt(PARAMS.letters)/2; row++) {

        if(i >= knots.length) break;

        let k = knots[i];

        push();

        translate(row*cellHeight, col*cellWidth)

        translate(cellWidth/2, cellHeight/2);

        KnotGlyph(k);

        pop();

        i++;

      }

    }

    pop();

    drawFrame(margin/2, margin/2, 0, 0);

  }

}

​

​

function generateKnotParams() {

  var rr = [], thetar = [], phir = [];

  rr[0] = min(cellWidth, cellHeight) / 2;

  rr[1] = 1;

  rr[2] = 0;

  thetar[0] = cellWidth / randi(5, 15);

  thetar[1] = randi(2, 10);

  thetar[2] = 0;  // glyph rotation

  phir[0] = cellWidth / randi(2, 8);

  phir[1] = randi(1, 10);

  phir[2] = 0;

  let knotParams = {rr: rr, thetar:thetar, phir: phir};

  return knotParams;

}

​

function KnotGlyph(knotParams = generateKnotParams()) {

  // Knot formula

  let rr = knotParams.rr;

  let thetar = knotParams.thetar;

  let phir = knotParams.phir;

  scale(0.9, 0.9)

  let getPoint = function(t) {

    let r = rr[0] * sin(rr[1] * t) + rr[2];

    let theta = thetar[0] * sin(thetar[1] * t) + thetar[2];

    let phi = phir[0] * sin(phir[1] * t) + phir[2];

    return {

      x: r * cos(phi) * cos(theta),

      y: r * cos(phi) * sin(theta),

      z: r * sin(phi)

    }

  }

  let f;

  // if (chance(50)) f = getPoint;

  // else f = getCinquefoilPoint;

  f = getPoint;

  // Sample points

  let N = 20;

  beginShape();

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

    let p = f(i/N * TAU);

    curveVertex(p.x, p.y, p.z);

  }

  endShape();

}

​

function generateAlphabet(N) {

  knots = [];

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

    knots[i] = generateKnotParams();

  }

}

​

function drawFrame(x, y, w, h) {

  push();

  translate(width/2, height/2);

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

    drawQuarterFrame(x, y, w, h);

    rotate(TAU/4);

  }

  pop();

}

​

function drawQuarterFrame(x, y, w, h) {

  let b = margin/8;

  beginShape();

  vertex(0, -height/2+y);

  vertex(-width/2+x+b, -height/2+y);

  vertex(-width/2+x+b, -height/2+y+2*b);

  vertex(-width/2+x+2*b, -height/2+y+2*b);

  vertex(-width/2+x+2*b, -height/2+y+b);

  vertex(-width/2+x, -height/2+y+b);

  vertex(-width/2+x, y);

  endShape();

}

​

function chance(x) {

  return random(0, 100) < x

}

​

function randi(min, max) {

  return floor(random(min, max));

}

​

function keyPressed() {

  if(key == 's') {

    save("screenshots/" + Date.now() + ".png");

  }

}