Sample of a fun renderer. We made these in my Grade 6 art class and I've always enjoyed them.
What I didn't realize at the time is they make an interesting graph. Assuming you have two domains of equal size, you can start at the top/left and work your way around the entire outer boundary counting off tick marks. Given a set of X/Y coordinates, you can map the intersection of any two domains.
It looks cool, but I'm not sure it communicates anything meaningfully.
| 'use strict'; | |
| class Point extends Array{ | |
| constructor(x,y,ord){ | |
| super(); | |
| if(Array.isArray(x)){ | |
| ord = x[2]; | |
| y = x[1]; | |
| x = x[0]; | |
| } | |
| if(!ord){ | |
| ord = 0; | |
| } | |
| this.precision = 10**15; | |
| this.push(0); | |
| this.push(0); | |
| this.push(0); | |
| this.x = x; | |
| this.y = y; | |
| this.ord = ord; | |
| } | |
| set x(val){ | |
| val = parseFloat(val); | |
| val = val * this.precision; | |
| val = Math.round(val); | |
| val = val/this.precision; | |
| if(val === 0) val = 0; | |
| this[0] = val; | |
| } | |
| get x(){ | |
| return this[0]; | |
| } | |
| set y(val){ | |
| val = parseFloat(val); | |
| val = val * this.precision; | |
| val = Math.round(val); | |
| val = val/this.precision; | |
| this[1] = val; | |
| } | |
| get y(){ | |
| return this[1]; | |
| } | |
| set ord(val){ | |
| val = Math.floor(parseFloat(val)); | |
| if(val === 0) val = 0; | |
| this[2] = val; | |
| } | |
| get ord(){ | |
| return this[2]; | |
| } | |
| } | |
| class Segment{ | |
| constructor(segment){ | |
| this.segment = segment.map(function(d){ | |
| if(typeof d !== Point){ | |
| d = new Point(d); | |
| } | |
| return d; | |
| }); | |
| this.privates = {}; | |
| } | |
| get a(){ | |
| if(!this.privates.a){ | |
| this.privates.a = this.segment[0].y - this.segment[1].y; | |
| } | |
| return this.privates.a; | |
| } | |
| get b(){ | |
| if(!this.privates.b){ | |
| this.privates.b = this.segment[1].x - this.segment[0].x; | |
| } | |
| return this.privates.b; | |
| } | |
| get c(){ | |
| if(!this.privates.c){ | |
| this.privates.c = this.a * this.segment[0].x + this.b * this.segment[0].y; | |
| } | |
| return this.privates.c; | |
| } | |
| get theta(){ | |
| if(!this.privates.theta){ | |
| this.privates.theta = 1/Math.tan(this.a/this.b); | |
| } | |
| return this.privates.theta; | |
| } | |
| get midPoint(){ | |
| if(!this._midpoint){ | |
| this._midpoint = new Point( | |
| (this.segment[0].x + this.segment[1].x)/2, | |
| (this.segment[0].y + this.segment[1].y)/2 | |
| ); | |
| } | |
| return this._midpoint; | |
| } | |
| solveY(x){ | |
| let y = (this.a*x + this.c)/this.b; | |
| let line = [x,y]; | |
| return line; | |
| } | |
| solveX(y){ | |
| let x = (this.b * y + this.c) / this.a; | |
| let line = [x,y]; | |
| return line; | |
| } | |
| findIntercept(line2){ | |
| /** | |
| * http://zonalandeducation.com/mmts/intersections/intersectionOfTwoLines1/intersectionOfTwoLines1.html | |
| */ | |
| let line1 = this; | |
| let det = line1.a*line2.b - line2.a*line1.b; | |
| // If the lines are parrallel, then they will never intercept | |
| if(det === 0) return null; | |
| let intercept = [ | |
| (line2.b*line1.c - line1.b*line2.c)/det, | |
| (line2.a*line1.c - line1.a*line2.c)/det, | |
| ]; | |
| // invert the Y axis | |
| intercept[1] *= -1; | |
| intercept = new Point(intercept); | |
| // Because we are workign with line segments, it is possible | |
| // that that the intercept point falls outside the bounds of | |
| // the segment. If the intercept is outside the bounds, of the | |
| // segemnts, there is no intercept | |
| function isRangeValid(segment, intercept, axis){ | |
| let range = [ | |
| segment[0][axis], | |
| segment[1][axis], | |
| ] | |
| .sort(numericCompare) | |
| ; | |
| let isValid = (range[0] <= intercept[axis] && range[1] >= intercept[axis]); | |
| return isValid; | |
| } | |
| if(!isRangeValid(line1.segment, intercept, X)) return null; | |
| if(!isRangeValid(line1.segment, intercept, Y)) return null; | |
| if(!isRangeValid(line2.segment, intercept, X)) return null; | |
| if(!isRangeValid(line2.segment, intercept, Y)) return null; | |
| // if we have made it this far, we have found an intercept | |
| return intercept; | |
| } | |
| } | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="./PsycheCheckers.js"></script> | |
| <script type="text/javascript" src="./RenderPsycheCheckers.js"></script> | |
| <script type="text/javascript" src="./utils.js"></script> | |
| <script type="text/javascript" src="./Geometry.js"></script> | |
| <style> | |
| svg{ | |
| position:absolute; | |
| height:100%; | |
| width:100%; | |
| } | |
| svg#debug{ | |
| display:none; | |
| } | |
| main{ | |
| position: relative; | |
| height:480px; | |
| width:100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <svg></svg> | |
| <svg id='debug'> | |
| <line id='X' stroke='black' /> | |
| <line id='lastX' stroke='black' /> | |
| <line id='oldCut' stroke-width="2" stroke="orange" /> | |
| <line id='cut' stroke-width="2" stroke="red" /> | |
| <circle id='intercept1' r='5' stroke='black' fill='yellow' /> | |
| <circle id='intercept2' r='5' stroke='black' fill='white' /> | |
| <circle id='intercept3' r='5' stroke='black' fill='green' /> | |
| <circle id='intercept4' r='5' stroke='black' fill='blue' /> | |
| </svg> | |
| </main> | |
| <script> | |
| 'use strict'; | |
| /* global PsycheCheckers, global RenderPsycheCheckers*/ | |
| function redraw(renderer){ | |
| let ratio = renderer.rect.height / renderer.rect.width; | |
| if(renderer.psyche.ratio === ratio) return false; | |
| renderer.psyche.ratio = ratio; | |
| if(DEBUGMODE) document.querySelector('#debug').style.display = 'block'; | |
| renderer.drawPlanes(function(d,x,y){ | |
| let colour = ['STEELBLUE','PALEVIOLETRED']; | |
| let plane = JSON.parse(d['data-plane']); | |
| colour = colour[plane.intersection[1]%colour.length]; | |
| colour = { | |
| 'stroke':colour, | |
| 'fill':colour, | |
| }; | |
| return colour; | |
| }); | |
| document.querySelector('#debug').style.display = 'none'; | |
| //renderer.drawLines({'stroke':'white'}); | |
| return true; | |
| } | |
| function main(){ | |
| let svg = document.querySelector('svg'); | |
| let checkers = new PsycheCheckers(); | |
| let renderer = new RenderPsycheCheckers(svg,checkers); | |
| window.addEventListener('resize',function(){ | |
| redraw(renderer); | |
| }); | |
| redraw(renderer); | |
| } | |
| main(); | |
| </script> | |
| </body> | |
| </html> |
| 'use strict'; | |
| class PsycheCheckers{ | |
| constructor(opts){ | |
| if(!opts) opts = {}; | |
| opts = JSON.clone(opts); | |
| if(!Array.isArray(opts.seedPoints)){ | |
| /* | |
| seedPoints = [ | |
| [Math.random(), Math.random()], | |
| [Math.random(), Math.random()], | |
| ]; | |
| */ | |
| opts.seedPoints = [ | |
| [0.25, 1/3], | |
| [0.75, 2/3], | |
| ]; | |
| } | |
| if(isNaN(opts.ticks)){ | |
| opts.ticks = 250; | |
| } | |
| opts.ticks = Math.round(opts.ticks); | |
| if(opts.ticks < 4) opts.ticks = 4; | |
| if(isNaN(opts.ratio)){ | |
| opts.ratio = 480/640; | |
| } | |
| opts.ticks = parseInt(opts.ticks,10); | |
| this.dirtyEvent(); | |
| this.opts = opts; | |
| this.innerPoints = JSON.clone(opts.seedPoints); | |
| this.ratio = opts.ratio; | |
| } | |
| get ratio(){ | |
| return this._ratio; | |
| } | |
| set ratio(newRatio){ | |
| if(isNaN(newRatio)) return; | |
| if(isNaN(this._ratio)) this._ratio = 0; | |
| newRatio = +newRatio; | |
| if(this._ratio === newRatio) return; | |
| this.dirtyEvent(); | |
| this._ratio = newRatio; | |
| } | |
| get outerPoints(){ | |
| if(this._outerPoints) return this._outerPoints; | |
| let p = []; | |
| let half = Math.ceil(this.opts.ticks / 2); | |
| let vertical = Math.round(half * this.ratio/(this.ratio + 1)); | |
| let horizontal = half - vertical; | |
| let dist = 0; | |
| dist = 1/horizontal; | |
| let tickCount = 0; | |
| for(let x=0; x < 1; x += dist){ | |
| p.push([x ,0 ,tickCount ]); | |
| p.push([1-x ,1 ,tickCount+half ]); | |
| tickCount ++; | |
| } | |
| dist = 1/vertical; | |
| for(let y=0; y < 1 ; y += dist){ | |
| p.push([0 , 1-y , tickCount+half ]); | |
| p.push([1 , y , tickCount ]); | |
| tickCount ++; | |
| } | |
| p.sort(function(a,b){ | |
| let diff = a[2] - b[2]; | |
| return diff; | |
| }); | |
| this._outerPoints = p; | |
| return this._outerPoints; | |
| } | |
| get lines(){ | |
| if(this._lines) return this._lines; | |
| let outer = this.outerPoints; | |
| this._lines = this.innerPoints.map(function(i){ | |
| let lines = outer | |
| .map(function(o){ | |
| return [i,o]; | |
| }); | |
| return lines; | |
| }); | |
| return this._lines; | |
| } | |
| /** | |
| * List of all planes formed on draw area | |
| * | |
| * | |
| */ | |
| get planes(){ | |
| if(this._planes) return this._planes; | |
| let x = this.lines[0]; | |
| let y = this.lines[1]; | |
| function basePlaneParser(x,xpos){ | |
| let direction = -1; | |
| let testLine = new Segment([ | |
| innerPoint, | |
| outerPoints[lastX.segment[1][2]] | |
| ]); | |
| moveLine('#cut',testLine.segment); | |
| if(testLine.findIntercept(x) && testLine.findIntercept(lastX)){ | |
| direction = -1; | |
| } | |
| else{ | |
| direction = +1; | |
| } | |
| let oldCutLine = [x.segment[1],lastX.segment[1]]; | |
| let radialPoint = Array(2).fill(lastX.segment[0]); | |
| let newCutLine = null; | |
| let o = x.segment[1][2]; | |
| if(direction < 0){ | |
| o=(direction+o)%outerPoints.length; | |
| } | |
| let ypos = -1; | |
| for(; newCutLine !== radialPoint; o=(o+direction)%outerPoints.length){ | |
| ypos ++; | |
| if(o < 0){ | |
| o += outerPoints.length; | |
| } | |
| testLine = new Segment([ | |
| innerPoint, | |
| outerPoints[o] | |
| ]); | |
| moveLine('#oldCut',oldCutLine); | |
| moveLine('#cut',testLine.segment); | |
| newCutLine = [ | |
| testLine.findIntercept(x), | |
| testLine.findIntercept(lastX) | |
| ]; | |
| if(newCutLine[0] === null || newCutLine[1] === null){ | |
| newCutLine = radialPoint; | |
| } | |
| let plane = [ | |
| oldCutLine[0], | |
| oldCutLine[1], | |
| newCutLine[1], | |
| newCutLine[0], | |
| oldCutLine[0], | |
| ]; | |
| plane = plane.reduce(function(a,d){ | |
| d = JSON.stringify(d); | |
| if(a[0] !== d){ | |
| a.unshift(d); | |
| } | |
| return a; | |
| },[]) | |
| .map(function(d){ | |
| return JSON.parse(d); | |
| }); | |
| document.querySelectorAll('#debug > circle').forEach(function(d,i){ | |
| moveCircle(d,plane[i]); | |
| }); | |
| plane = { | |
| position:[xpos,o], | |
| intersection:[xpos,ypos], | |
| segments:plane, | |
| }; | |
| planes.push(plane); | |
| oldCutLine = newCutLine; | |
| } | |
| } | |
| // Because we are working in pairs of lines, we need to get two lines | |
| // for every cycle. The easiest way to acheive this is to just remember | |
| // the last line we used as we get the next. Unfortunately, that means | |
| // we need to do something special either the first or last item in | |
| // the list. | |
| // | |
| // In this case, we get the first item in the list and initialize our | |
| // trailing item tracker. Then we move it to the end of the list to be | |
| // reprocessed there. | |
| x = x.map(function(x){return new Segment(x)}); | |
| let firstX = x[x.length-1]; | |
| y = y.map(function(y){return new Segment(y)}); | |
| let firstY = y[y.length-1]; | |
| function specialPlaneParser(line1,line2,xpos){ | |
| let lastY = firstY; | |
| let A = line1; | |
| let B = line2; | |
| y.forEach(function(y,i){ | |
| moveLine("#oldCut",lastY.segment); | |
| moveLine("#cut",y.segment); | |
| moveLine("#X",B.segment); | |
| moveLine("#lastX",A.segment); | |
| // Sometimes, after many hours of attempting something clever | |
| // I give up, and apply brute force | |
| let plane =[]; | |
| let didAIntercept = false; | |
| let didBIntercept = false; | |
| let inter = y.findIntercept(A); | |
| if(inter){ | |
| didAIntercept = true; | |
| plane.push(inter); | |
| } | |
| else{ | |
| inter = y.findIntercept(B); | |
| if(inter){ | |
| didBIntercept = true; | |
| plane.push(inter); | |
| } | |
| } | |
| plane.push(innerPoints[1]); | |
| inter = lastY.findIntercept(A); | |
| if(inter){ | |
| didAIntercept = true; | |
| plane.push(inter); | |
| } | |
| else{ | |
| inter = lastY.findIntercept(B); | |
| if(inter){ | |
| didBIntercept = true; | |
| plane.push(inter); | |
| } | |
| } | |
| if(didAIntercept && didBIntercept){ | |
| let isouter = plane.reduce(function(a,segment){ | |
| a.push(segment[0]); | |
| a.push(segment[1]); | |
| return a; | |
| },[]) | |
| .some(function(axis){ | |
| let bool = (axis === 0 || axis === 1); | |
| return bool; | |
| }) | |
| ; | |
| if(!isouter){ | |
| plane.push(innerPoints[0]); | |
| } | |
| else{ | |
| if(isInsideTriangle(plane,innerPoints[0])){ | |
| plane = []; | |
| } | |
| } | |
| } | |
| plane = plane.filter(function(d){return d !== null;}); | |
| Array.from(document.querySelectorAll('circle')).forEach(function(d){ | |
| d.setAttribute('opacity',0); | |
| }); | |
| plane.forEach(function(p,i){ | |
| let circle = document.querySelector('#intercept'+(i+1)); | |
| moveCircle(circle,p); | |
| }); | |
| lastY = y; | |
| plane = { | |
| position:[xpos,i], | |
| intersection:[xpos,i], | |
| segments:plane, | |
| }; | |
| planes.push(plane); | |
| }); | |
| } | |
| let innerPoints = this.innerPoints; | |
| let innerPoint = this.innerPoints[1]; | |
| let outerPoints = this.outerPoints; | |
| function isInsideTriangle(triangle, point){ | |
| triangle = JSON.clone(triangle); | |
| triangle.push(triangle[0]); | |
| let segments = []; | |
| for(let i = 0; i<3; i ++){ | |
| segments.push(new Segment([ | |
| new Point(triangle[i]), | |
| new Point(triangle[i+1]) | |
| ])); | |
| } | |
| point = new Point(point); | |
| moveLine('#lastX',segments[0].segment); | |
| moveLine('#X',segments[1].segment); | |
| moveLine('#oldCut',segments[2].segment); | |
| let isOutside = segments.some((segment,i)=>{ | |
| let validation = new Segment([ | |
| segment.midPoint, | |
| point | |
| ]); | |
| moveLine('#cut',validation.segment); | |
| let isInside = segments.every(function(edge){ | |
| if(edge === segment){ | |
| return true; | |
| } | |
| if(validation.findIntercept(edge)){ | |
| return false; | |
| } | |
| return true; | |
| }); | |
| return !isInside; | |
| }); | |
| return !isOutside; | |
| } | |
| let lastX = firstX; | |
| let planes = []; | |
| x.forEach(function(x,xpos){ | |
| moveLine('#lastX',lastX.segment); | |
| moveLine('#X',x.segment); | |
| let triangle = lastX.segment.slice(0); | |
| triangle.push(x.segment[1]); | |
| if(isInsideTriangle(triangle, innerPoints[1])){ | |
| specialPlaneParser(x,lastX); | |
| } | |
| else{ | |
| basePlaneParser(x,xpos); | |
| } | |
| lastX = x; | |
| }) | |
| ; | |
| this._planes = planes.filter(function(plane){ | |
| return plane.segments.length > 2; | |
| }); | |
| return this._planes; | |
| } | |
| dirtyEvent(){ | |
| this._ratio = 1; | |
| this._outerPoints = null; | |
| this._lines = null; | |
| } | |
| } | |
| 'use strict'; | |
| class RenderPsycheCheckers{ | |
| constructor(svg, checkers){ | |
| this.svg = svg; | |
| this.psyche = checkers; | |
| } | |
| get rect(){ | |
| return this.svg.getClientRects()[0]; | |
| } | |
| get dataLines(){ | |
| let width = this.rect.width; | |
| let height = this.rect.height; | |
| let data = this.psyche.lines | |
| .reduce(function(a,d){ | |
| return a.concat(d); | |
| },[]) | |
| .map(function(d){ | |
| d = JSON.clone(d); | |
| d[0][0] *= width; | |
| d[0][1] *= height; | |
| d[1][0] *= width; | |
| d[1][1] *= height; | |
| return d; | |
| }) | |
| ; | |
| return data; | |
| } | |
| get dataPlanes(){ | |
| let width = this.rect.width; | |
| let height = this.rect.height; | |
| let data = this.psyche.planes | |
| .map(function(plane){ | |
| plane = JSON.clone(plane); | |
| plane.segments = plane.segments.map(function(points){ | |
| return new Point([ | |
| Math.round(points[X] * width), | |
| Math.round(points[Y] * height), | |
| ]); | |
| }); | |
| return plane; | |
| }) | |
| ; | |
| return data; | |
| } | |
| drawLines(attributes){ | |
| let data = this.dataLines; | |
| let lines = Array.from(this.svg.querySelectorAll('line')); | |
| while(lines.length < data.length){ | |
| lines.unshift(document.createElementNS("http://www.w3.org/2000/svg","line")); | |
| this.svg.appendChild(lines[0]); | |
| } | |
| while(lines.length > data.length){ | |
| let line = lines.pop(); | |
| line.parentNode.removeChild(line); | |
| } | |
| lines.forEach(function(line,l){ | |
| let d = data[l]; | |
| line.setAttribute('x1',d[0][0]); | |
| line.setAttribute('y1',d[0][1]); | |
| line.setAttribute('x2',d[1][0]); | |
| line.setAttribute('y2',d[1][1]); | |
| Object.entries(attributes).forEach(function(attr){ | |
| line.setAttribute(attr[0],attr[1]); | |
| }); | |
| }); | |
| } | |
| drawPlanes(attributes){ | |
| attributes = attributes || function(){ return {} }; | |
| let data = this.dataPlanes; | |
| let planes = Array.from(this.svg.querySelectorAll('path')); | |
| while(planes.length < data.length){ | |
| planes.unshift(document.createElementNS("http://www.w3.org/2000/svg","path")); | |
| this.svg.appendChild(planes[0]); | |
| } | |
| while(planes.length > data.length){ | |
| let quad = planes.pop(); | |
| quad.parentNode.removeChild(quad); | |
| } | |
| planes.forEach(function(quad,l){ | |
| setTimeout(function(){ | |
| let plane = data[l]; | |
| let d = "M " + plane.segments.map(function(d){ | |
| d = d.slice(0,2).join(','); | |
| return d; | |
| }).join(' L '); | |
| quad.setAttribute('d',d); | |
| quad['data-plane'] = JSON.stringify(plane); | |
| Object.entries(attributes(quad,l,0)).forEach(function(attr){ | |
| quad.setAttribute(attr[0],attr[1]); | |
| }); | |
| },Math.random()*20); | |
| }); | |
| } | |
| } |
| 'use strict'; | |
| const X = 0; | |
| const Y = 1; | |
| const DEBUGMODE = false; | |
| JSON.clone = JSON.clone || function(o){ | |
| let obj = JSON.stringify(o); | |
| if(typeof obj === 'undefined'){ | |
| return undefined; | |
| } | |
| obj = JSON.parse(obj); | |
| return obj; | |
| }; | |
| function numericCompare(a,b){ | |
| a = parseFloat(a); | |
| b = parseFloat(b); | |
| let delta = a-b; | |
| return delta; | |
| } | |
| function moveLine(id,points){ | |
| if(!DEBUGMODE) return; | |
| let svg = document.querySelector(id); | |
| let rect = svg.parentNode.getClientRects()[0]; | |
| if(!rect) return; | |
| svg.setAttribute('x1',points[0][X]* rect.width); | |
| svg.setAttribute('y1',points[0][Y]* rect.height); | |
| svg.setAttribute('x2',points[1][X]* rect.width); | |
| svg.setAttribute('y2',points[1][Y]* rect.height); | |
| } | |
| function moveCircle(svg,points){ | |
| if(!DEBUGMODE) return; | |
| let rect = svg.parentNode.getClientRects()[0]; | |
| if(!rect || !points) return; | |
| svg.setAttribute('cx',points[X]* rect.width); | |
| svg.setAttribute('cy',points[Y]* rect.height); | |
| svg.setAttribute('opacity',1); | |
| } | |
