const GRID_SIZE = 40;

const GRID_ROWS = 10;

const GRID_COLS = 7;

const DOT_SIZE = 4;

const LINE_WIDTH = 20;

​

const glyph = [];

​

function setup() {

  createCanvas( GRID_COLS * GRID_SIZE, GRID_ROWS * GRID_SIZE );

  for( let x = 0; x < GRID_COLS; x++ ){

    for( let y = 0; y < GRID_ROWS; y++ ){

      grid.push({

        x: x,

        y: y

      })

    }

  }

  noLoop();

}

​

function draw() {

  background(255);

  // display Grid

  push();

  grid.forEach( p => {

    noStroke();

    fill( 0, 60 );

    circle( GRID_SIZE/2 + p.x * GRID_SIZE, GRID_SIZE/2 + p.y * GRID_SIZE, DOT_SIZE );

  } )

  pop();

​

  // generate Glyph

  let prevPoint = {y:null,x:null};

  let lastDirWasX = random( [true,false] );

  const startPoint = {...random(grid)}

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

    /*

    const point = {...random(grid)}

    if( prevPoint ){

      if( lastDirWasX ){

        point.y = prevPoint.y;

      }else{

        point.x = prevPoint.x;

      }

    }

    */

    let point = {}

    if( prevPoint ){

      point = {...prevPoint}

    }else{

      point = {...startPoint}

    }

    if( lastDirWasX ){

      point.y = floor( random( GRID_ROWS ) );

      /* while( point.y === prevPoint.y | point.y < 0 || point.y > GRID_ROWS ){

        point.y = floor( min( random(GRID_ROWS), random(GRID_ROWS) ) ) * random( [-1,1] )

      } */

      /*point.y = floor( min( random(GRID_ROWS), random(GRID_ROWS) ) ) * random( [-1,1] )

      if( point.y < 0 || point.y > GRID_ROWS ){

        point.y = floor( min( random(GRID_ROWS), random(GRID_ROWS) ) ) * random( [-1,1] )

      }*/

    }else{

      point.x = floor( random( GRID_COLS ) );

      /*  while( point.x === prevPoint.x | point.x < 0 || point.x > GRID_COLS ){

        point.x = floor( min( random(GRID_COLS), random(GRID_COLS) ) ) * random( [-1,1] )

      } */

    }

    let hits_a_line = false;

    // check if a line would be crossed

    // const lastPoint = glyph[glyph.length-1];

    for( let i = 0; i < glyph.length - 3; i++ ){

      const point = glyph[i];

      if( !hits_a_line ){

        hits_a_line = lineLine( glyph[i], glyph[i+1], glyph[i+2], point );

      }

    }

    // if a line would be crossed, check if the other direction would work

    if( hits_a_line ){

      hits_a_line = false;

      if( lastDirWasX ){

​

        point.y = point.y - point.y;

        if( point.y < 0 ){

          point.y = 0;

        }

​

      }else{

​

        point.x = point.x - point.x;

        if( point.x < 0 ){

          point.x = 0;

        }

​

​

      }

      for( let i = 0; i < glyph.length - 3; i++ ){

        const point = glyph[i];

​

        if( !hits_a_line ){

          hits_a_line = lineLine( glyph[i], glyph[i+1], glyph[i+2], point );

        }

      }

    }

    if( !hits_a_line ){

      glyph.push( {...point} )

      lastDirWasX = !lastDirWasX;

      prevPoint = point;

    }

  }

  // draw Glyph

  noFill();

  strokeWeight( LINE_WIDTH );

  strokeCap(PROJECT);

  beginShape();

  for( const i in glyph ){

    const point = glyph[i];

    vertex( GRID_SIZE/2 + point.x * GRID_SIZE, GRID_SIZE/2 + point.y * GRID_SIZE );

  }

  endShape();

​

}

const lineLine = (p1,p2,p3,p4) => {

  const x1 = p1.x;

  const y1 = p1.y;

  const x2 = p2.x;

  const y2 = p2.y;

  const x3 = p3.x;

  const y3 = p3.y;

  const x4 = p4.x;

  const y4 = p4.y;

​

  // calculate the distance to intersection point

  let uA = ((x4-x3)*(y1-y3) - (y4-y3)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));

  let uB = ((x2-x1)*(y1-y3) - (y2-y1)*(x1-x3)) / ((y4-y3)*(x2-x1) - (x4-x3)*(y2-y1));

​

  // if uA and uB are between 0-1, lines are colliding

  if (uA >= 0 && uA <= 1 && uB >= 0 && uB <= 1) {

​

    // optionally, draw a circle where the lines meet

    let intersectionX = x1 + (uA * (x2-x1));

    let intersectionY = y1 + (uA * (y2-y1));

    // fill(255,0,0);

    // noStroke();

    // ellipse(intersectionX,intersectionY, 20,20);

​

    return true;

  }

  return false;

}

​

function mousePressed () {

  glyph.splice(0, glyph.length)

  redraw();

}