let w = 900, h = 900; let s = 10; let grid = 54; let g = 200; let pal = ['#ECAA9C','#B1D1C6', '#2E5B8B', '#F2CA60', '#d4c7a3', '#DE7830', '#513C2C', '#1F3858', '#C9292E', '#bfb8a3']; let chars = "b123456789kshaftzmn#%<"; let chs; // ref: https://stackoverflow.com/questions/3943772/how-do-i-shuffle-the-characters-in-a-string-in-javascript String.prototype.shuffle = function () { var a = this.split(""), n = a.length; for(var i = n - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var tmp = a[i]; a[i] = a[j]; a[j] = tmp; } return a.join(""); } function mousePressed() { redraw(); } let arr = [grid+3][grid+3]; function setup() { createCanvas(w, h); noLoop(); smooth(); colorMode(HSB, 360, 100, 100, 100); strokeCap(SQUARE); textAlign(CENTER, CENTER); arr = [grid+3]; for(let i = 0; i < grid+3; i++) { arr[i] = [grid+3]; } } function draw() { for(let i = 0; i < grid+3; i++) { for(let j = 0; j < grid+3; j++) { arr[i][j] = false; // まだ何も書かれていない } } background(220); rectMode(CORNER); shuffle(pal, true); chs = chars.shuffle(); noiseSeed(random(100)); drawGrids(); push(); translate(s*4, s*4+s/2); var nx, ny, cc, cd; var ss = s*2; for(let i = 1; i < grid-1; i++) { ny = i * ss*0.75; for(let j = 1; j < grid-1; j++) { var iInt = int(i); var jInt = int(j); nx = j * ss*0.75; push(); translate(nx, ny); cc = getColor(nx, ny); cd = getColor(-nx, ny); ch = getChar(nx, ny); fill(0,0,0,100); var ts = ss; // まだ書き込まれていない if(arr[j][i] == false && arr[j+1][i] == false) { if(random() < 0.05 && j < grid-2　&& i < grid-2) { ts *= 2; drawPattern(ch, cc, ts, 36, 0, 0, cd); var jp1 = int(j+1); var jp2 = int(j+2); var ip1 = int(i+1); var ip2 = int(i+2); arr[j][i] = true; arr[jp1][i] = true; // arr[jp2][i] = true; arr[j][ip1] = true; // arr[j][ip2] = true; // arr[jp1][ip2] = true; arr[jp2][ip1] = true; arr[jp1][ip1] = true; // arr[jp2][ip2] = true; } else { drawPattern(ch, cc, ts, 18, 0, 0, cd); arr[j][i] = true; } } pop(); } } pop(); drawFrame(); } // ------------------------------------- // // ------------------------------------- // // ------------------------------------- // function drawPattern(ch, cc, d, ll, ofx, ofy, cd) { push(); translate(ofx + d/2, ofy+d/2); // noFill(); // stroke(cc); // rect(-d/2, -d/2, d); if(random() < 0.6) { rotate(random(-PI/2, +PI/2)); } noFill(); stroke(cc); strokeWeight(1); textSize(ll+3); text(ch, -d/3, -d/3, d, d); fill(cc); noStroke(); stroke(220); strokeJoin(ROUND); strokeWeight(0); textSize(ll); text(ch, -d/2, -d/2, d, d); pop(); } function drawGrids() { stroke(0,0,10,100); strokeWeight(1.5); noFill(); var tx = int(w / s); var ty = int(h / s); for(let i = 0; i < ty; i++) { cy = i * s; for(let j = 0; j < tx; j++) { cx = j * s; point(cx, cy); } } } function drawFrame() { rectMode(CENTER); noStroke(); fill(220); rect(s*2-1, h/2, s*4, h); rect(w-s*2+1, h/2, s*4, h); rect(w/2, s*2-1, w, s*4); rect(w/2, h-s*2+1, w, s*4); } function getColor() { shuffle(pal, true); var cc = random(); var l = pal.length; if(cc < 1/l) { return pal[0]; } else if (cc < 2/l) { return pal[1]; } else if (cc < 3/l) { return pal[2]; } else if (cc < 4/l) { return pal[3]; } else if (cc < 5/l) { return pal[4]; } else if (cc < 6/l) { return pal[5]; } else if (cc < 7/l) { return pal[6]; } else if (cc < 8/l) { return pal[7]; } else if (cc < 9/l) { return pal[8]; } else { return pal[9]; } } function getColor(x, y) { var cc = noise(x/g, y/g); var l = pal.length; // shuffle(pal, true); if(cc < 1/l) { return pal[0]; } else if (cc < 2/l) { return pal[1]; } else if (cc < 3/l) { return pal[2]; } else if (cc < 4/l) { return pal[3]; } else if (cc < 5/l) { return pal[4]; } else if (cc < 6/l) { return pal[5]; } else if (cc < 7/l) { return pal[6]; } else if (cc < 8/l) { return pal[7]; } else if (cc < 9/l) { return pal[8]; } else { return pal[9]; } } function getChar() { shuffle(chs, true); var type = random(); if(type < 0.1) { return chs[0]; } else if (type < 0.2) { return chs[1]; } else if (type < 0.3) { return chs[2]; } else if (type < 0.4) { return chs[3]; } else if (type < 0.5) { return chs[4]; } else if (type < 0.6) { return chs[5]; } else if (type < 0.7) { return chs[6]; } else if (type < 0.8) { return chs[7]; } else if (type < 0.9) { return chs[8]; } else { return chs[9]; } } function getChar(x, y) { var type = noise(x/g, y/g); if(type < 0.1) { return chs[0]; } else if (type < 0.2) { return chs[1]; } else if (type < 0.3) { return chs[2]; } else if (type < 0.4) { return chs[3]; } else if (type < 0.5) { return chs[4]; } else if (type < 0.6) { return chs[5]; } else if (type < 0.7) { return chs[6]; } else if (type < 0.8) { return chs[7]; } else if (type < 0.9) { return chs[8]; } else { return chs[9]; } }

My Sketch 20221123