let char = [

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,1,-1,-1,-1,-1,1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,-1,-1,1,-1,-1,-1,1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,1,1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,1,1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,-1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,-1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,-1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,-1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,-1,-1,-1,-1,-1,1,-1,-1,1,1,1,-1,-1,1,-1,-1,1,-1,-1,-1,-1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,1,-1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1],

[-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,1,1,1,1,-1,-1,-1,-1,-1,-1,-1,-1,-1]

];

​

let numbers =[

[1,2,9,2,2,5,5,5],

[8,8,1,9,9,9,1],

[8,8,9,2,5,7,4],

[4,1,6,5,3,2,6,4],

[4,6,6,5,5,7,4],

[6,4,1,9,4,6,2],

[7,1,7,3,1,8,2,5],

[1,8,1,7,4,3,7,7]

];

​

​

​

function setup(){

    createCanvas(450,600);

    colorMode(HSB);

  background(250,25,85);

​

    let hSpace = (height-10)/numbers.length;

​

​

    for(i in numbers){

        let wSpace = (width-10)/numbers[i].length;

        let y = 10+i*hSpace;

        for(e in numbers[i]){

            let x = 10+e*wSpace;

            //rect(x,y,wSpace,hSpace);

            gridChar(x,y,wSpace,hSpace,numbers[i][e]);

        }

        dottedLine(5,y+hSpace-5,width,y+hSpace-5,20);

    }

    dottedLine(5,5,width,5,20);

    dottedLine(5,5,5,height,20);

}

​

​

function gridChar(X,Y,W,H,CHAR){

    let hDiv = 8;

    let wDiv = 8;

    let ang = floor(random(9,16));

    let hSpace = H/hDiv;

    let wSpace = W/wDiv;

    let colorSeed = random(0,360);

    let colorSpace = 360/ang;

​

    strokeWeight(wSpace*0.8);

    for(v=0;v<wDiv;v++){

        for(b=0;b<hDiv;b++){

            let f = b*hDiv+v;

            stroke((f%ang)*colorSpace,80,100);

            let x = X+b*wSpace;

            let y = Y+v*hSpace;

​

            point(x,y);

            if(char[CHAR][f]>0){

                push();

                    strokeWeight(wSpace*0.5);

                    stroke(0);

                    point(x,y);

                pop();

            }

        }

        dottedLine(X+W-4,Y,X+W-4,Y+H-5,20);

    }

}

​

function dottedLine(X1,Y1,X2,Y2,FILL){

    let xDiff = X2-X1;

    let yDiff = Y2-Y1;

    let dist = sqrt(pow(xDiff,2)+pow(yDiff,2));

    let size = 4;

    let num = dist/size;

    let xStep = xDiff/num;

    let yStep = yDiff/num;

​

    push();

    strokeWeight(size*0.5);

    stroke(FILL);

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

        let xx = i*xStep+X1;

        let yy = i*yStep+Y1;

        point(xx,yy);

    }

    pop();

}

​