30:T457,chart = { const svg = d3.create("svg") .attr("height", p.h) .attr("width", p.w) .attr("style", "border: 1px solid silver") svg.html(` `) svg .append('g') .attr('id', 'wrapper') .attr('stroke', '#420') .attr('stroke-width', '0.5px') .attr('fill', 'none') .selectAll('path') .data( strings ) .join('path') .attr('d', d => d) svg.selectAll('use') .data( [...Array(5).keys()].map(d => d*.8) ) .join('use') .attr('href', '#wrapper') .attr('x', d => d) .attr('y', d => -d) return svg.node() }31:T6fb,strings = { let strings = [] for (let row = 0; row < p.rows; row ++) { let stringPoints = [] for (let col = 0; col < p.cols; col ++) { let pointNumber = p.pointsNumber let randomAngle = timer / 1000 + rnd(col) //Math.PI * 2 * Math.random() if (rnd(row + col * 1000) < 0.5) randomAngle = -randomAngle let letterPoints = [] for (let i = 0; i < pointNumber; i ++) { let x = Math.sin(i * 2 * Math.PI / pointNumber + randomAngle) let y = Math.cos(i * 2 * Math.PI / pointNumber + randomAngle) letterPoints.push([x, y]) } // let letterPoints = [[0, 0], [0, 1], [0, 2], [1, 0], [1, 1], [1, 2], ] let seed = row + col * 1000 letterPoints = shuffle(letterPoints, seed) letterPoints = letterPoints.map(p => p.map(x => x / 2 + 0.5)) let letterWidth = (p.w - p.m.l - p.m.r) / p.cols let letterHeight = (p.h - p.m.t - p.m.b) / p.rows let randomScale = 1 //Math.random() < 0.01 ? 5 : (Math.random() < 0.001 ? 100 : 1) //randomScale = 1 + (Math.sin() / 2 + 0.5) ** 500 randomScale = 1 + 4 * (1/-((1000 * (Math.sin(1000 * rnd(seed) + timer / 10000) *.5 + .5) ** 1000)+1) + 1) let matrixComposer = m.compose( m.translate(p.m.l, p.m.t), m.translate(col * letterWidth, row * letterHeight), m.rotate(p.angle), m.scale(letterWidth * p.letterSizeX, letterHeight * p.letterSizeY), m.scale(1, randomScale), //m.skew(5, 1) ) // console.log(col) letterPoints = letterPoints.map(point => m.applyToPoint(matrixComposer, point)) // letterPoints = stringPoints.push(...letterPoints) } strings.push( pointsToSplinePath(stringPoints, false) ) } return strings }32:[] 2e:{"title":"Asemic writings","cells":[{"id":0,"value":"md`# Asemic writings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"p = {\n return {\n letterSizeX: .5,\n letterSizeY: -.9,\n rows: 8,\n cols: 80,\n pointsNumber: 2,\n angle: Math.PI * -54.9,\n m: {t: 50, r: 50, b: 250, l: 150},\n w: 594,\n h: 841,\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":706,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"timer = {\n while (true) {\n yield + new Date() / 10\n await Promises.tick(10)\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"import {pointsToSplinePath} from \"@illus0r/snippets\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"distanceToCenter = (i, j) => {\n const centerX = p.margin.l / 2 + p.width / 2 - p.margin.r / 2\n const centerY = p.margin.t / 2 + p.height / 2 - p.margin.b / 2\n return Math.sqrt((centerX - i) ** 2 + (centerY - j) ** 2)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"function shuffle(a, seed) {\n for (let i = a.length - 1; i > 0; i--) {\n const j = Math.floor(rnd(seed) * (i + 1));\n [a[i], a[j]] = [a[j], a[i]];\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"rnd(400)","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"rnd = (seed) => d3.randomUniform.source(seedrandom(seed))()()","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"seedrandom = require(\"seedrandom@3/seedrandom.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"Spline = require('https://bundle.run/svg-catmull-rom-spline@0.0.1')","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"m = require('transformation-matrix@2.3.0/build-umd/transformation-matrix.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}