31:T588,{ restart; const [w, h] = [600, 400]; const rShort = 50; const p0 = [w / 2, 100]; const p0a = [w / 2, 100 + rShort]; const deltaT = 0.05; const equals = (a, b) => Math.abs(a - b) <= 0.005; const accel = (theta, thetaDot) => -mu * thetaDot - (g / (0.02 * l)) * Math.sin(theta); let t = 0; let theta = radians(theta0); let thetaDot = thetaDot0; let thetaDoubleDot = accel(theta, thetaDot); let first = true; const r = new Renderer(w, h).textSize(14); while (first || !equals(thetaDoubleDot, 0) || !equals(thetaDot, 0)) { first = false; t += deltaT; thetaDoubleDot = accel(theta, thetaDot); thetaDot += thetaDoubleDot * deltaT; theta += thetaDot * deltaT; console.log(theta) const p1 = [p0[0] + l * Math.sin(theta), p0[1] + l * Math.cos(theta)]; const p2 = [ p0[0] + rShort * Math.sin(theta / 2.5), p0[1] + rShort * Math.cos(theta / 2.5) ]; r.clear() .stroke("black") .fill("rgb(220,150,120)") .line([p0, p1]) .stroke("rgba(0,0,0,0.5)") .line([p0, p0a]) .ellipse(...p1, 15) .stroke() .fill("rgba(0,0,0,0.5)") .textAlign("left") .text(`time t=${Math.round(t)}`, 2, 20) .textAlign("middle") .fill( `rgba(0,0,0,${Math.abs(theta) < 0.5 ? Math.abs(Math.sin(theta)) : 0.5})` ) .text("θ", ...p2); yield Promises.delay(30, r.render()); } }32:T50f,function addRelief(r) { const [nRows, nCols] = [pGrid().length, pGrid()[0].length]; const pxScale = d3 .scaleLinear() .domain([0, pGrid()[0].length - 1]) .range([-tau - pi, tau + pi]) r.push().stroke(); const pyScale = d3 .scaleLinear() .domain([0, pGrid().length - 1]) .range([-5, 5]) const aSc = d3.scaleLinear().domain([0, 8]).range([0, 1]); const sinAlt = Math.sin(radians(35)); const cosAlt = Math.cos(radians(35)); const azim = radians(315); for (let row = 0; row < nRows; row++) { for (let col = 0; col < nCols; col++) { const [vel, accel] = pGrid()[row][col]; const slope = halfPi - Math.atan(Math.sqrt(vel * vel + accel * accel)); const aspect = Math.atan2(accel, vel) + halfPi; const reflect = (255 * (Math.max( 0, sinAlt * Math.sin(slope) + cosAlt * Math.cos(slope / 1) * Math.cos(azim - aspect) ) + 1)) / 2; r.fill(`rgba(${reflect},${reflect},${0.2 + reflect},0.15)`).polygon([ [pxScale(col - 0.5), pyScale(row - 0.5)], [pxScale(col - 0.5), pyScale(row + 0.5)], [pxScale(col + 0.5), pyScale(row + 0.5)], [pxScale(col + 0.5), pyScale(row - 0.5)] ]); } } return r.pop(); }33:Tdbd5,function Renderer(w = 640, h = 100, r = "canvas") { // Renderer state // ------------------------------------------------------------- let ctx, offscreenCanvas, transGroup, rType, rc, keyDownFn, keyUpFn; const TO_RADIANS = Math.PI / 180; const TO_DEGREES = 180 / Math.PI; // Screen transformations are stored in a 3x3 homogenous matrix. Class to represent // matrices adapted from https://observablehq.com/@nstrayer/simple-matrices by Nick Strayer. // ------------------------------------------------------------- class Matrix { constructor(dims, fill = 0) { this.nrow = dims[0]; this.ncol = dims[1]; this.size = this.nrow * this.ncol; const vec_fill = fill.length > 1; if (vec_fill && fill.length !== this.nrow * this.ncol) { throw `Expecting a fill vector of length ${this.size} but got a vector of length ${fill.length}`; } this.vals = Array.from( vec_fill ? fill : [...new Array(this.nrow * this.ncol)].map((d) => fill) ); } mPos(i, j) { return this.ncol * i + j; } // Given a row and col fill the place with a value. If inplace is false, will create a new matrix. set(i, j, val, inplace = true) { if (inplace) { this.vals[this.mPos(i, j)] = val; } else { const newMat = new Matrix([this.nrow, this.ncol], [...this.vals]); newMat.set(i, j, val); return newMat; } } get(i, j) { return this.vals[this.mPos(i, j)]; } row(i) { const row_res = new Array(this.ncol); for (let j = 0; j < this.ncol; j++) row_res[j] = this.get(i, j); return row_res; } col(j) { const col_res = new Array(this.nrow); for (let i = 0; i < this.nrow; i++) col_res[i] = this.get(i, j); return col_res; } cpy() { return new Matrix([this.nrow, this.ncol], [...this.vals]); } } // Generate a unique global ID for this renderer. const uid = () => { const randomLetter = () => String.fromCharCode(97 + Math.floor(Math.random() * 26)); const p8 = (s) => { const p = (Math.random().toString(16) + "000000000").substr(2, 8); return s ? "-" + p.substr(0, 4) + "-" + p.substr(4, 4) : randomLetter() + p.substr(0, 7); }; return p8() + p8(true) + p8(true) + p8(); }; // Initialise the context as either SVG or Canvas. // ------------------------------------------------------------- switch (r.toLowerCase()) { case "svg": case "roughsvg": ctx = DOM.svg(w, h); d3.select(ctx).attr("id", uid()); if (r.toLowerCase() === "roughsvg") { rType = "roughsvg"; rc = rough.svg(ctx); } else { rType = "svg"; } transGroup = (m) => d3 .select(ctx) .append("g") .attr("transform", `matrix(${transParams(m).join(" ")})`); break; case "canvas": case "roughcanvas": ctx = DOM.context2d(w, h); d3.select(ctx.canvas).attr("id", uid()); if (r.toLowerCase() === "roughcanvas") { rType = "roughcanvas"; rc = rough.canvas(ctx.canvas); } else { rType = "canvas"; } break; default: rType = r; ctx = DOM.context2d(w, h); ctx.textAlign = "center"; ctx.fillText("Unknown drawing context: " + r, w / 2, h / 2); } // Initialise state of this renderer. // ------------------------------------------------------------- let fillClr = "black"; let strokeClr = "black"; let strokeW = 1; let pointR = 1.5; let fnt = "Source Serif Pro"; let fntSize = 10; let txtAlign = "start"; let txtBaseline = "bottom"; let dToScreen = null; // Data to screen transform. let screenToD = null; // Screen to data transform for interpreting interaction coordinates. let reflectY = false; let width = w; let height = h; let mapProj = d3.geoEqualEarth(); let geoBorder = 0; let mTrans = mIdentity(); let clipPath = undefined; let stackHash = makeid(8); let stateStack = []; let roughStyle = {}; // Pushing and popping state // ------------------------------------------------------------- // Stores a copy of the current drawing and transformation settings. this.push = function () { stateStack.push({ fill: fillClr, stroke: strokeClr, strokeW: strokeW, pointR: pointR, font: fnt, fontSize: fntSize, textAlign: txtAlign, textBaseline: txtBaseline, reflectY: reflectY, dToScreen: dToScreen, width: width, height: height, mapProj: mapProj, geoBorder: geoBorder, mTrans: mCopy(mTrans), clipPath: clipPath, stackHash: stackHash, roughStyle: roughStyle }); stackHash = makeid(8); // Create a new unique hash every time we push. For creating stack-specific SVG elements. return this; }; // Restores the last pushed copy of the drawing and transformation settings. this.pop = function () { if (stateStack.length > 0) { const state = stateStack.pop(); fillClr = state.fill; strokeClr = state.stroke; strokeW = state.strokeW; pointR = state.pointR; fnt = state.font; fntSize = state.fontSize; txtAlign = state.textAlign; txtBaseline = state.textBaseline; reflectY = state.reflectY; dToScreen = state.dToScreen; width = state.width; height = state.height; mapProj = state.mapProj; geoBorder = state.geoBorder; mTrans = mCopy(state.mTrans); clipPath = state.clipPath; stackHash = state.stackHash; roughStyle = state.roughStyle; } return this; }; // Transform methods // ------------------------------------------------------------- // Set the geometric transform function. This should be a function that takes // a coordinate pair array in data space and returns a pair in screen space. // Can optionally provide an inverse transform if decoding of screen position required. this.setTransform = function (trans, invTrans) { dToScreen = trans; screenToD = invTrans ? invTrans : (p) => p; return this; }; // Set the geometric transform by two independent scaling functions for x and y. this.setScales = function (xSc, ySc) { dToScreen = ([a, b]) => reflectY ? [xSc(a), ySc.range()[0] + ySc.range()[1] - ySc(b)] : [xSc(a), ySc(b)]; screenToD = ([x, y]) => reflectY ? [xSc.invert(x), ySc.domain()[0] + ySc.domain()[1] - ySc.invert(y)] : [xSc.invert(x), ySc.invert(y)]; return this; }; // Sets the geometric transform function to one that fits the given set // of coordinates to the current display area with optional padding. this.fit = function ( coords = [ [-1, -1], [1, 1] ], padding = 0 ) { const [aMin, aMax] = d3.extent(coords, (p) => p[0]); const [bMin, bMax] = d3.extent(coords, (p) => p[1]); const scaleFactor = Math.min( (width - 2 * padding) / (aMax - aMin), (height - 2 * padding) / (bMax - bMin) ); dToScreen = ([a, b]) => reflectY ? [ padding + scaleFactor * (a - aMin), height - (padding + scaleFactor * (b - bMin)) ] : [ padding + scaleFactor * (a - aMin), padding + scaleFactor * (b - bMin) ]; screenToD = ([x, y]) => reflectY ? [ (x - padding) / scaleFactor + aMin, (height - y - padding) / scaleFactor + bMin ] : [ (x - padding) / scaleFactor + aMin, (y - padding) / scaleFactor + bMin ]; return this; }; // Flips the y-axis for moving between origin bottom-left and top-left // coordinate systems. this.flipY = function (flip = true) { reflectY = flip; if (screenToD === null && flip) { dToScreen = ([x, y]) => [x, height - y]; screenToD = ([x, y]) => [x, height - y]; } return this; }; // Set the map projection transform for geo features. this.setProjection = function (proj, border = 0) { mapProj = proj; geoBorder = border; dToScreen = ([lng, lat]) => mapProj([lng, lat]); screenToD = ([x, y]) => mapProj.invert([x, y]); return this; }; // Set the default rough styling. Has no effect on non-sketchy renderers. this.setRoughStyle = function (rStyle) { roughStyle = rStyle; return this; }; // Translate screen coordinates by the given tx and ty values this.translate = function (tx, ty) { if (tx === undefined) { // Report current translation parameters return mTrans.col(2).slice(0, 2); } if (ty === undefined) { ty = 0; // tx is valid but no ty } mTrans = mMult(mTrans, new Matrix([3, 3], [1, 0, tx, 0, 1, ty, 0, 0, 1])); return this; }; // Scale screen coordinates by the given x and y factors this.scale = function (sx, sy) { if (sx === undefined) { // Report current scaling parameters. const [a, b] = mTrans.row(0).slice(0, 2); const [c, d] = mTrans.row(1).slice(0.2); return [ Math.sign(a) * Math.sqrt(a * a + b * b), Math.sign(d) * Math.sqrt(c * c + d * d) ]; } if (sy === undefined) { sy = sx; // Only sx provided so set sy to be the same. } mTrans = mMult(mTrans, new Matrix([3, 3], [sx, 0, 0, 0, sy, 0, 0, 0, 1])); return this; }; // Rotate screen coordinates by the given angle this.rotate = function (angle) { if (angle === undefined) { const [a, b] = mTrans.row(0).slice(0, 2); return Math.atan2(-b, a) * TO_DEGREES; } const cosA = Math.cos(angle * TO_RADIANS); const sinA = Math.sin(angle * TO_RADIANS); mTrans = mMult( mTrans, new Matrix([3, 3], [cosA, -sinA, 0, sinA, cosA, 0, 0, 0, 1]) ); return this; }; // Converts data to screen coordinates this.dataToScreen = function (d) { const s = dToScreen ? dToScreen(d) : d; return mMult(mTrans, new Matrix([3, 1], [...s.flat(), 1])) .col(0) .slice(0, 2); }; // Converts screen coordinates to data. this.screenToData = function (p) { const p2 = mMult(affineInverse(mTrans), new Matrix([3, 1], [...p, 1])) .col(0) .slice(0, 2); return screenToD ? screenToD(p2) : p2; }; // TODO: Do we need this method? // Possibly for screen transform use cases such as mouse-centred zooming. this.getScreenTrans = function () { return mTrans; }; // TODO: Do we need this method? // Possibly for screen transform use cases such as mouse-centred zooming. this.getInvScreenTrans = function () { return affineInverse(mTrans); }; // TODO: Do we need to keep this public? // Provide the untransformed screen coordinates of the given screen position. this.screenAt = (p) => mMult(affineInverse(mTrans), new Matrix([3, 1], [...p, 1])) .col(0) .slice(0, 2); // Drawing methods // ------------------------------------------------------------- // Draw the given points this.points = function (coords) { const tCoords = dToScreen ? coords.map(dToScreen) : coords; switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? if (rType === "roughsvg") { transCtx.each(function () { tCoords.forEach((c) => { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .node() .appendChild(rc.circle(...c, 2 * pointR, setRoughStyles())); }); }); } else { transCtx .selectAll() .data(tCoords) .enter() .append("circle") .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .attr("fill", fillClr) .attr("stroke", strokeClr) .attr("stroke-width", strokeW) .attr("r", pointR) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { tCoords.forEach((c) => rc.circle(...c, 2 * pointR, setRoughStyles())); } else { tCoords.forEach((c) => { ctx.beginPath(); ctx.arc(...c, pointR, 0, 6.283); ctx.closePath(); setCanvasStyles(); }); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Draw a line joining the given point coordinates this.line = function (coords) { if (arrayDepth(coords) > 2) { return this.lines(coords); } const tCoords = dToScreen ? coords.map(dToScreen) : coords; switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? const path = `M${tCoords.join("L")}`; if (rType === "roughsvg") { transCtx.each(function () { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .node() .appendChild(rc.path(path, setRoughStyles("none"))); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("path") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW) .attr("fill", "none") .attr("d", path); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { const path = `M${tCoords.join("L")}`; rc.path(path, setRoughStyles("none")); } else { ctx.beginPath(); tCoords.forEach((c) => ctx.lineTo(...c)); setCanvasStyles("nofill"); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Draw multiple lines each joining the given point coordinates this.lines = function (lineCoords) { lineCoords.forEach((coords) => this.line(coords)); return this; }; // Draw Bezier curves joining the given point coordinates and control points // Coords are anchor,ctrl1,ctrl2,pt,[[ctrl1,ctrl2,pt]...] this.bezier = function (coords) { const tCoords = dToScreen ? coords.map(dToScreen) : coords; if (tCoords.length < 4) { return this; } switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? const path = `M${tCoords[0][0]},${tCoords[0][1]} C${tCoords .slice(1) .join()}`; if (rType === "roughsvg") { transCtx.each(function () { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .node() .appendChild(rc.path(path, setRoughStyles())); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("path") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW) .attr("fill", isValid(fillClr) ? fillClr : "none") .attr("d", path); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { const path = `M${tCoords[0][0]},${tCoords[0][1]} C${tCoords .slice(1) .join()}`; rc.path(path, setRoughStyles()); } else { const bezCoords = chunk(tCoords.slice(1), 3); ctx.beginPath(); ctx.moveTo(...tCoords[0]); bezCoords.forEach((bc) => ctx.bezierCurveTo(...bc.flat())); setCanvasStyles(); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Draw draw a Bezier curve through the given set of points. Can optionally control the // the smoothing of the curve with second parameter (0=no smoothing). this.bezierLine = function (coords, smoothing = 0.2) { const line = (pointA, pointB) => { const lengthX = pointB[0] - pointA[0]; const lengthY = pointB[1] - pointA[1]; return { length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)), angle: Math.atan2(lengthY, lengthX) }; }; const ctrPt = (lineCalc, smooth) => (current, previous, next, reverse) => { const p = previous || current; const n = next || current; const l = lineCalc(p, n); const angle = l.angle + (reverse ? Math.PI : 0); const length = l.length * smooth; const x = current[0] + Math.cos(angle) * length; const y = current[1] + Math.sin(angle) * length; return [x, y]; }; const bezierCommand = (ctrPt) => (point, i, a) => { const [cpsX, cpsY] = ctrPt(a[i - 1], a[i - 2], point); const [cpeX, cpeY] = ctrPt(point, a[i - 1], a[i + 1], true); return [[cpsX, cpsY], [cpeX, cpeY], point]; }; const controlPointCalc = ctrPt(line, smoothing); const bezierCommandCalc = bezierCommand(controlPointCalc); const smoothedPath = (points, command) => points.reduce( (acc, point, i, a) => i === 0 ? [point] : acc.concat(command(point, i, a)), [] ); return this.bezier(smoothedPath(coords, bezierCommandCalc)); }; // Draw a polygon from the given point coordinates this.polygon = function (coords) { if (arrayDepth(coords) > 2) { return this.multiPolygon(coords); } const tCoords = dToScreen ? coords.map(dToScreen) : coords; switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? const path = `M${tCoords.join("L")}Z`; if (rType === "roughsvg") { transCtx.each(function () { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level .node() .appendChild(rc.path(path, setRoughStyles())); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("path") .attr("fill", isValid(fillClr) ? fillClr : "none") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW) .attr("d", path); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { const path = `M${tCoords.join("L")}Z`; rc.path(path, setRoughStyles()); } else { ctx.beginPath(); tCoords.forEach((c) => ctx.lineTo(...c)); ctx.closePath(); setCanvasStyles(); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Draw a multi polygon comprising one or more rings this.multiPolygon = function (rings) { // Synonym for backwards compatibility. return this.polygons(rings); }; this.polygons = function (rings) { const tRings = dToScreen ? rings.map((coords) => coords.map(dToScreen)) : rings; switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? let path = ""; tRings.forEach((tCoords) => { path = path.concat(`M${tCoords.join("L")}Z`); }); if (rType === "roughsvg") { transCtx.each(function () { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .node() .appendChild(rc.path(path, setRoughStyles())); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("path") .attr("fill", isValid(fillClr) ? fillClr : "none") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW) .attr("d", path); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { let path = ""; tRings.forEach((tCoords) => { path = path.concat(`M${tCoords.join("L")}Z`); }); rc.path(path, setRoughStyles()); } else { ctx.beginPath(); tRings.forEach((tCoords) => { ctx.moveTo(...tCoords[0]); close(tCoords).forEach((c) => ctx.lineTo(...c)); }); ctx.closePath(); setCanvasStyles(); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Specify a geographic feature or features to draw. this.geoShape = function (geo, prop = null, clrFn = null, geoExtent = null) { const project = (features) => mapProj.fitExtent( [ [geoBorder, geoBorder], [w - geoBorder, h - geoBorder] ], geoExtent ? geoExtent : features ); const features = geo.features ? geo.features : [geo]; switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? if (rType === "roughsvg") { const mapPath = d3.geoPath().projection(project(geo)); transCtx.each(function () { features.forEach((feat) => d3 .select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .node() .appendChild( rc.path( mapPath(feat), setRoughStyles( clrFn ? clrFn(resolve(feat, prop)) : isValid(fillClr) ? fillClr : "none" ) ) ) ); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .selectAll("path") .data(features) .join("path") .attr( "fill", prop ? (d) => clrFn ? clrFn(resolve(d, prop)) : isValid(fillClr) ? fillClr : "none" : isValid(fillClr) ? fillClr : "none" ) .attr("stroke", strokeClr) .attr("stroke-width", strokeW) .attr("d", d3.geoPath(project(geo))); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { const mapPath = d3.geoPath().projection(project(geo)); features.forEach((feat) => rc.path( mapPath(feat), setRoughStyles( clrFn ? clrFn(resolve(feat, prop)) : isValid(fillClr) ? fillClr : "none" ) ) ); } else { const geoPath = d3.geoPath(project(geo), ctx); features.forEach((feat) => { ctx.beginPath(); geoPath(feat); setCanvasStyles( clrFn ? clrFn(resolve(feat, prop)) : isValid(fillClr) ? fillClr : "none" ); }); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; this.ellipse = function (x = 0, y = 0, rx = 1, ry = rx) { const [[tx, ty], [tRx, tRy]] = dToScreen ? [ [x, y], [x + rx, y + ry] ].map(dToScreen) : [ [x, y], [x + rx, y + ry] ]; const dx = Math.abs(tRx - tx); const dy = Math.abs(tRy - ty); switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? if (rType === "roughsvg") { transCtx.each(function () { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .node() .appendChild( rc.ellipse(tx, ty, dx * 2, dy * 2, setRoughStyles()) ); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("ellipse") .attr("cx", tx) .attr("cy", ty) .attr("rx", dx) .attr("ry", dy) .attr("fill", isValid(fillClr) ? fillClr : "none") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { rc.ellipse(tx, ty, dx * 2, dy * 2, setRoughStyles()); } else { ctx.beginPath(); ctx.ellipse(tx, ty, dx, dy, 0, 0, 2 * Math.PI); setCanvasStyles(); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; this.arc = function (x = 0, y = 0, rx = 1, ry = rx, a0 = 0, a1 = 90) { const [stAngle, enAngle] = [a0 % 360, a1 % 360]; const [[tx, ty], [tRx, tRy]] = dToScreen ? [ [x, y], [x + rx, y + ry] ].map(dToScreen) : [ [x, y], [x + rx, y + ry] ]; const dx = Math.abs(tRx - tx); const dy = Math.abs(tRy - ty); const posAngle = (a) => (a < 0 ? a + 360 : a); const angleToCoords = (angle) => ({ x: x + rx * Math.cos(angle * TO_RADIANS), y: y + ry * Math.sin(angle * TO_RADIANS) }); // SVG paths define arc position with start and end of arc rather than centre of ellipse, so convert const start = angleToCoords(stAngle); const end = angleToCoords(enAngle); const path = [ "M", start.x, start.y, "A", rx, ry, 0, posAngle(enAngle - stAngle) <= 180 ? "0" : "1", // Large arc flag 1, // sweep flag end.x, end.y ].join(" "); switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? if (rType === "roughsvg") { transCtx.each(function () { d3.select(this) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level .node() .appendChild(rc.path(path, setRoughStyles())); }); } else { d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("path") .attr("fill", isValid(fillClr) ? fillClr : "none") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW) .attr("d", path); } break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (rType === "roughcanvas") { rc.path(path, setRoughStyles()); } else { // Normal canvas can use the ellipse command rather than custom path. ctx.beginPath(); ctx.ellipse( tx, ty, dx, dy, 0, posAngle(stAngle) * TO_RADIANS, posAngle(enAngle) * TO_RADIANS ); setCanvasStyles(); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Draw some text at the given position in data coordinates this.text = function (txt, x = 0, y = 0) { if (fntSize <= 0) { return this; } let vOffset = 0; const [tx, ty] = dToScreen ? dToScreen([x, y]) : [x, y]; switch (rType) { case "svg": case "roughsvg": const transCtx = transGroup(mTrans); checkClip(); // Have we got a clip path? vOffset = txtBaseline === "bottom" ? fntSize / 3 : 0; // Small vertical adjustment to account for way SVG treats descenders. d3.selectAll(transCtx) .attr("clip-path", `url(#clip${stackHash})`) // Has no effect if clipping path not defined for this level. .append("text") .attr("x", tx) .attr("y", ty) .attr("fill", isValid(fillClr) ? fillClr : "none") .attr("stroke", isValid(strokeClr) ? strokeClr : "none") .attr("stroke-width", strokeW) .attr("font-family", fnt) .attr("font-size", `${fntSize}pt`) .attr("text-anchor", txtAlign) .attr("dominant-baseline", txtBaseline) .attr("baseline-shift", `${vOffset}px`) .text(txt); break; case "canvas": case "roughcanvas": ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? ctx.font = `${fntSize}pt ${fnt}`; ctx.textAlign = txtAlign; ctx.textBaseline = txtBaseline; vOffset = txtBaseline === "top" ? fntSize / 3 : txtBaseline === "bottom" ? fntSize / -8 : 0; // Small vertical adjustment to account for way canvas treats descenders. if (isValid(fillClr)) { ctx.fillStyle = fillClr; ctx.fillText(txt, tx, ty - vOffset); } if (isValid(strokeClr)) { if (strokeW && Number(strokeW) > 0) { ctx.lineWidth = strokeW; } ctx.strokeStyle = strokeClr; ctx.strokeText(txt, tx, ty); } ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Draw some text at the given position in data coordinates this.image = function (imgArr, nCols = 0, x = 0, y = 0, w = 0, h = 0) { if (imgArr === null || nCols == 0 || nCols > imgArr.length / 4) { return this; } w = w <= 0 ? nCols : w; const nRows = Math.round(imgArr.length / (4 * nCols)); h = h <= 0 ? nRows : h; const [[tx, ty], [tw, th]] = dToScreen ? [ [x, y], [x + w, y + h] ].map(dToScreen) : [ [x, y], [x + w, y + h] ]; const tWidth = tw - tx; const tHeight = th - ty; switch (rType) { case "svg": case "roughsvg": break; case "canvas": case "roughcanvas": const offscreenCanvas = document.createElement("canvas"); offscreenCanvas.width = nCols; offscreenCanvas.height = nRows; offscreenCanvas .getContext("2d") .putImageData(new ImageData(imgArr, nCols), 0, 0); ctx.save(); // Save state before any transforms ctx.transform(...transParams(mTrans)); checkClip(); // Have we got a clip path? if (reflectY) { ctx.translate(0, tHeight + ty); ctx.scale(1, -1); ctx.translate(0, -ty); } ctx.drawImage(offscreenCanvas, tx, ty, tWidth, tHeight); ctx.restore(); // Restore state prior to transforms. break; } return this; }; // Store the clipping path for limiting extent of rendered output. this.clip = function (coords) { if (coords == undefined) { clipPath = undefined; } else { clipPath = dToScreen == null ? coords : coords.map(dToScreen); } return this; }; // Draw a bottom axis this.axisBottom = function (xSc, ySc, xExtent, yPos, title = "") { const validYPos = yPos === undefined || yPos == null || isNaN(yPos) ? ySc(ySc.domain()[0]) < ySc(ySc.domain()[ySc.domain().length - 1]) ? ySc.domain()[reflectY ? 0 : ySc.domain().length - 1] : ySc.domain()[reflectY ? ySc.domain().length - 1 : 0] : yPos; return axis( "bottom", xSc, ySc, xExtent ? xExtent : xSc.domain(), validYPos, title ); }; // Draw a top axis this.axisTop = function (xSc, ySc, xExtent, yPos, title = "") { const validYPos = yPos === undefined || yPos == null || isNaN(yPos) ? ySc(ySc.domain()[0]) > ySc(ySc.domain()[ySc.domain().length - 1]) ? ySc.domain()[reflectY ? 0 : ySc.domain().length - 1] : ySc.domain()[reflectY ? ySc.domain().length - 1 : 0] : yPos; return axis( "top", xSc, ySc, xExtent ? xExtent : xSc.domain(), validYPos, title ); }; // Draw a left axis this.axisLeft = function (xSc, ySc, yExtent, xPos, title = "") { const validXPos = xPos === undefined || xPos == null || isNaN(xPos) ? xSc.domain()[0] : xPos; return axis( "left", xSc, ySc, yExtent ? yExtent : ySc.domain(), validXPos, title ); }; // Draw a right axis this.axisRight = function (xSc, ySc, yExtent, xPos, title = "") { const validXPos = xPos === undefined || xPos == null || isNaN(xPos) ? xSc.domain()[xSc.domain().length - 1] : xPos; return axis( "right", xSc, ySc, yExtent ? yExtent : ySc.domain(), validXPos, title ); }; // Clear the contents of the renderer. this.clear = function (clr, remove = true) { switch (rType) { case "svg": case "roughsvg": if (remove) { d3.select(ctx).selectAll("*").remove(); } if (isValid(clr)) { this.mTrans = mIdentity(); this.push() .setTransform(null) .stroke() .fill(clr) .polygon([ [0, 0], [width, 0], [width, height], [0, height] ]) .pop(); } break; case "canvas": case "roughcanvas": if (remove) { ctx.clearRect(0, 0, width, height); } if (isValid(clr)) { this.mTrans = mIdentity(); this.push() .setTransform(null) .stroke() .fill(clr) .polygon([ [0, 0], [width, 0], [width, height], [0, height] ]) .pop(); } break; } return this; }; // Display the current render. Unlike other methods you cannot chain // from this as it returns the viewable node/canvas rather than object. this.render = function () { switch (rType) { case "svg": case "roughsvg": return ctx; case "canvas": case "roughcanvas": return ctx.canvas; default: return ctx.canvas; } }; // Text metrics // ------------------------------------------------------------- // Provides width and height of the given text in pixels and a function that will return // bounding box as polygon in data space. Metrics dependent on current alignment settings // as well as font size and style at the point the method is called. this.textMetrics = function (txt, border = 0) { if (txt === "" || fntSize <= 0) { return { width: 0, height: 0, box: ([x, y]) => { const [dLeft, dTop] = screenToD ? screenToD([-border, -border]) : [-border, -border]; const [dRight, dBottom] = screenToD ? screenToD([border, border]) : [border, border]; return [ [x + dLeft, y + dTop], [x + dRight, y + dTop], [x + dRight, y + dBottom], [x + dLeft, y + dBottom] ]; } }; } if (!offscreenCanvas) { offscreenCanvas = document.createElement("canvas").getContext("2d"); } // Set the offscreen canvas to the current font settings. offscreenCanvas.font = `${fntSize}pt ${fnt}`; // Extract font metrics and calculate bounding box in data space const metrics = offscreenCanvas.measureText(txt); const xOff = toCanvasAlign(txtAlign) === "left" ? 0 : toCanvasAlign(txtAlign) === "right" ? -metrics.width : metrics.width / -2; const yOff = toCanvasBaseline(txtBaseline) === "middle" ? (metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent) / 2 : toCanvasBaseline(txtBaseline) === "bottom" ? 0 : metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; const w = metrics.width; const h = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; return { width: w, height: h, box: ([x, y]) => { const [dLeft, dTop] = screenToD ? screenToD([xOff - border, yOff - border - h]) : [xOff - border, yOff - border - h]; const [dRight, dBottom] = screenToD ? screenToD([border + xOff + w, border + yOff]) : [border + xOff + w, border + yOff]; return [ [x + dLeft, y + dTop], [x + dRight, y + dTop], [x + dRight, y + dBottom], [x + dLeft, y + dBottom] ]; } }; }; // Style methods // ------------------------------------------------------------- // Set the fill colour this.fill = function (clr) { fillClr = clr; return this; }; // Set the stroke colour this.stroke = function (clr) { strokeClr = clr; return this; }; // Set the stroke width. this.strokeWidth = function (sw) { strokeW = sw; return this; }; // Set the point size this.pointSize = function (d) { pointR = d / 2; return this; }; // Set the font this.font = function (fontName) { fnt = fontName; return this; }; // Set the font size this.textSize = function (fontSize) { fntSize = fontSize; return this; }; // Set the horizontal alignment of text this.textAlign = function (hAlign) { // Canvas and svg use "center" and "middle" respectively switch (rType) { case "svg": case "roughsvg": txtAlign = toSvgAlign(hAlign); break; case "canvas": case "roughcanvas": txtAlign = toCanvasAlign(hAlign); break; } return this; }; // Set the vertical alignment of text this.textBaseline = function (vAlign) { switch (rType) { case "svg": case "roughsvg": txtBaseline = toSvgBaseline(vAlign); break; case "canvas": case "roughcanvas": txtBaseline = toCanvasBaseline(vAlign); break; } return this; }; // Event methods // ------------------------------------------------------------- this.addListener = function (evt, evFn) { switch (rType) { case "svg": case "roughsvg": d3.select(ctx).on(evt, evFn); break; case "canvas": case "roughcanvas": d3.select(ctx.canvas).on(evt, evFn); break; } return this; }; // Key events are global to the page so if multiple renderers on the same page // call this function, they will need to disambiguate in a provided page-wide function. this.addKeyListener = function (evt, evFn) { switch (evt) { case "keydown": d3.select("body").on("keydown", evFn); break; case "keyup": d3.select("body").on("keyup", evFn); break; } return this; }; // Returns the d3 selection of the renderer. Can be useful for linking to d3 // functions such as d3.zoom. this.selection = function () { switch (rType) { case "svg": case "roughsvg": return d3.select(ctx); case "canvas": case "roughcanvas": return d3.select(ctx.canvas); } }; // Internal utility methods // ------------------------------------------------------------- // Combine a dot notation expression with an object const resolve = (obj, expr) => expr.split(".").reduce((o, i) => o[i], obj); // Chunk an array into an array of arrays of size n const chunk = (arr, chunkSize) => { const chunked = []; for (let i = 0, len = arr.length; i < len; i += chunkSize) { chunked.push(arr.slice(i, i + chunkSize)); } return chunked; }; // Set up clipping if we have a clip path. const checkClip = () => { if (clipPath != undefined) { switch (rType) { case "svg": transGroup(mTrans) .append("defs") .append("clipPath") .attr("id", "clip" + stackHash) // Each push level has unique ID so we can have multiple clip paths with push/pop. .append("path") .attr("d", `M${clipPath.join("L")}Z`); break; case "roughsvg": transGroup(mTrans).each(function () { d3.select(this) .append("defs") .append("clipPath") .attr("id", "clip" + stackHash) // Each push level has unique ID so we can have multiple clip paths with push/pop. .append("path") .attr("d", `M${clipPath.join("L")}Z`); }); break; case "canvas": case "roughcanvas": // Because canvas is stateful, we don't need to store push-level IDs. ctx.beginPath(); clipPath.forEach((c) => ctx.lineTo(...c)); ctx.closePath(); ctx.clip(); break; } } }; function makeid(len) { let result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; const charactersLength = characters.length; let counter = 0; while (counter < len) { result += characters.charAt(Math.floor(Math.random() * charactersLength)); counter += 1; } return result; } // Ensure a set of polygon coordinates are closed (first and last match) const close = (coords) => { if ( coords[0][0] != coords[coords.length - 1][0] || coords[0][1] != coords[coords.length - 1][1] ) { coords.push(coords[0]); } return coords; }; // Do we have a valid colour? const isValid = (clr) => clr && clr.trim().length > 0 && clr.toLowerCase() !== "none"; // General title function for any one of 4 sides const axis = (dir, xSc, ySc, extent, dPos, title) => { this.push(); const start = extent[0]; const end = extent[extent.length - 1]; this.fill(fillClr ? fillClr : "black"); const sClr = strokeClr ? strokeClr : "black"; this.stroke(sClr); let tickFormat, ticks, sPos; if (reflectY) { ySc.domain([ySc.domain()[1], ySc.domain()[0]]); } this.setScales(xSc, ySc); // If categorical scale calculate width of single category let [xCatWidth, yCatWidth] = [0, 0]; if ( typeof xSc.tickFormat !== "function" && typeof xSc.bandwidth === "function" ) { xCatWidth = (Math.max(...xSc.range()) - Math.min(...xSc.range())) / xSc.domain().length; } if ( typeof ySc.tickFormat !== "function" && typeof ySc.bandwidth === "function" ) { yCatWidth = (Math.max(...ySc.range()) - Math.min(...ySc.range())) / ySc.domain().length; } switch (dir) { case "left": this.push(); dToScreen = null; this.textAlign("end"); this.textBaseline("middle"); sPos = xSc(dPos); this.line([ [sPos, ySc(start) + yCatWidth], [sPos, ySc(end)] ]); if (typeof ySc.tickFormat === "function") { // Continuous scale tickFormat = ySc.tickFormat(); ticks = ySc.ticks(); dToScreen = null; ticks.forEach((d) => { if (d >= start && d <= end) { this.stroke(sClr); this.line([ [sPos, ySc(d)], [sPos - 4, ySc(d)] ]); this.stroke(); this.text(tickFormat(d), sPos - 6, ySc(d)); } }); } else { // Categorical scale ySc.domain().forEach((d) => { this.stroke(sClr); this.line([ [sPos, ySc(d)], [sPos - 4, ySc(d)] ]); this.stroke(); this.text(d, sPos - 4, ySc(d) + yCatWidth / 2); }); const lastTick = ySc.range()[0]; this.stroke(sClr); this.line([ [sPos, lastTick], [sPos - 4, lastTick] ]); } // Axis title this.stroke(); this.textBaseline("middle"); this.textAlign("middle"); this.translate( sPos - 5 * fntSize, (ySc(start) + ySc(end) + yCatWidth) / 2 ); this.rotate(-90); this.text(title, 0, 0); this.pop(); break; case "right": this.push(); dToScreen = null; sPos = xSc(dPos) + xCatWidth; this.textAlign("start"); this.textBaseline("middle"); this.line([ [sPos, ySc(start) + yCatWidth], [sPos, ySc(end)] ]); if (typeof ySc.tickFormat === "function") { // Continuous scale tickFormat = ySc.tickFormat(); ticks = ySc.ticks(); ticks.forEach((d) => { if (d >= start && d <= end) { this.stroke(sClr); this.line([ [sPos, ySc(d)], [sPos + 4, ySc(d)] ]); this.stroke(); this.text(tickFormat(d), sPos + 6, ySc(d)); } }); } else { // Categorical scale ySc.domain().forEach((d) => { this.stroke(sClr); this.line([ [sPos, ySc(d)], [sPos + 4, ySc(d)] ]); this.stroke(); this.text(d, sPos + 4, ySc(d) + yCatWidth / 2); }); const lastTick = ySc.range()[0]; this.stroke(sClr); this.line([ [sPos, lastTick], [sPos + 4, lastTick] ]); } // Axis title this.stroke(); this.textBaseline("middle"); this.textAlign("middle"); this.translate( sPos + 5 * fntSize, (ySc(start) + ySc(end) + yCatWidth) / 2 ); this.rotate(-90); this.text(title, 0, 0); this.pop(); break; case "bottom": this.push(); dToScreen = null; sPos = ySc(dPos) + yCatWidth; this.textAlign("middle"); this.textBaseline("top"); this.line([ [xSc(start), sPos], [xSc(end) + xCatWidth, sPos] ]); // Continuous scale if (typeof xSc.tickFormat === "function") { tickFormat = xSc.tickFormat(); ticks = xSc.ticks(); ticks.forEach((d) => { if (d >= start && d <= end) { this.stroke(sClr); this.line([ [xSc(d), sPos], [xSc(d), sPos + 4] ]); this.stroke(); this.text(tickFormat(d), xSc(d), sPos + 6); } }); } else { // Categorical scale xSc.domain().forEach((d) => { this.stroke(sClr); this.line([ [xSc(d), sPos], [xSc(d), sPos + 4] ]); this.stroke(); this.text(d, xSc(d) + xCatWidth / 2, sPos + 6); }); const lastTick = xSc.range()[xSc.range().length - 1]; this.stroke(sClr); this.line([ [lastTick, sPos], [lastTick, sPos + 4] ]); } // Axis title this.stroke(); this.textBaseline("top"); this.text( title, [(xSc(start) + xSc(end) + xCatWidth) / 2, 0][0], sPos + 2.2 * fntSize ); this.pop(); break; case "top": this.push(); dToScreen = null; sPos = ySc(dPos); this.textAlign("middle"); this.textBaseline("bottom"); this.line([ [xSc(start), sPos], [xSc(end) + xCatWidth, sPos] ]); if (typeof xSc.tickFormat === "function") { // Continuous scale tickFormat = xSc.tickFormat(); ticks = xSc.ticks(); ticks.forEach((d) => { if (d >= start && d <= end) { this.stroke(sClr); this.line([ [xSc(d), sPos], [xSc(d), sPos - 4] ]); this.stroke(); this.text(tickFormat(d), xSc(d), sPos - 6); } }); } else { // Categorical scale xSc.domain().forEach((d) => { this.stroke(sClr); this.line([ [xSc(d), sPos], [xSc(d), sPos - 4] ]); this.stroke(); this.text(d, xSc(d) + xCatWidth / 2, sPos - 2); }); const lastTick = xSc.range()[xSc.range().length - 1]; this.stroke(sClr); this.line([ [lastTick, sPos], [lastTick, sPos - 4] ]); } // Axis title this.stroke(); this.textBaseline("bottom"); this.text( title, [(xSc(start) + xSc(end) + xCatWidth) / 2, 0][0], sPos - 2 * fntSize ); this.pop(); break; } if (reflectY) { ySc.domain([ySc.domain()[1], ySc.domain()[0]]); } this.pop(); return this; }; // Use context-appropriate alignment labels const toCanvasAlign = (hAlign) => hAlign.toLowerCase() === "middle" ? "center" : hAlign.toLowerCase() === "start" ? "left" : hAlign.toLowerCase() === "end" ? "right" : hAlign.toLowerCase(); const toSvgAlign = (hAlign) => hAlign.toLowerCase() === "center" ? "middle" : hAlign.toLowerCase() === "left" ? "start" : hAlign.toLowerCase() === "right" ? "end" : hAlign.toLowerCase(); const toCanvasBaseline = (vAlign) => vAlign.toLowerCase() === "hanging" ? "top" : vAlign.toLowerCase(); const toSvgBaseline = (vAlign) => vAlign.toLowerCase() === "top" ? "hanging" : vAlign.toLowerCase(); // Set the canvas stylings depending on object state. const setCanvasStyles = (fill) => { if (fill) { if (fill === "nofill" || fill === "none") { ctx.fillStyle = "rgba(0,0,0,0)"; ctx.fill(); } else { ctx.fillStyle = fill; ctx.fill(); } } else if (isValid(fillClr)) { ctx.fillStyle = fillClr; ctx.fill(); } if (isValid(strokeClr)) { ctx.strokeStyle = strokeClr; } if (strokeW && Number(strokeW) > 0) { ctx.lineWidth = strokeW; } if (isValid(strokeClr) && strokeW && Number(strokeW) > 0) { ctx.stroke(); } }; const setRoughStyles = (fill) => { if (roughStyle) { const rStyleObj = { fill: fill ? fill : fillClr, stroke: !strokeClr || strokeClr === "" ? "none" : strokeClr, strokeWidth: strokeW, fillWeight: 1, hachureGap: 4 }; if (roughStyle.hasOwnProperty("fillWeight")) { rStyleObj.fillWeight = roughStyle.fillWeight; } if (roughStyle.hasOwnProperty("hachureGap")) { rStyleObj.hachureGap = roughStyle.hachureGap; } if (roughStyle.hasOwnProperty("fillStyle")) { rStyleObj.fillStyle = roughStyle.fillStyle; } if (roughStyle.hasOwnProperty("roughness")) { rStyleObj.roughness = roughStyle.roughness; } if (roughStyle.hasOwnProperty("hachureAngle")) { rStyleObj.hachureAngle = roughStyle.hachureAngle; } return rStyleObj; } else return { fill: fill ? fill : fillClr, stroke: !strokeClr || strokeClr === "" ? "none" : strokeClr, strokeWidth: strokeW, fillWeight: 1, hachureGap: 4 }; }; // Determine depth of a possibly nested array. Used to distinguish // polygon coordinate lists from multi-polygons coordinate lists. function arrayDepth(val) { return Array.isArray(val) ? 1 + Math.max(0, ...val.map(arrayDepth)) : 0; } // Matrix manipulation // ------------------------------------------------------------- // New 3x3 identity matrix function mIdentity() { return new Matrix([3, 3], [1, 0, 0, 0, 1, 0, 0, 0, 1]); } // The six affine transformation parameters of a 3x3 matrix function transParams(m) { return m .col(0) .slice(0, 2) .concat(m.col(1).slice(0, 2).concat(m.col(2).slice(0, 2))); } // Clone copy of a matrix function mCopy(m) { return m.cpy(); } // Dot product of two vectors function dotProd(vA, vB) { return vA.reduce((sum, d, i) => sum + d * vB[i], 0); } // Multiplication of two 3x3 matrices function mMult(mA, mB) { const m = new Matrix([mA.nrow, mB.ncol]); for (let i = 0; i < mA.nrow; i++) { for (let j = 0; j < mB.ncol; j++) { m.set(i, j, dotProd(mA.row(i), mB.col(j))); } } return m; } // Given a 3x3 affine transformation matrix, find its inverse. function affineInverse(m) { const s0 = m.get(0, 0) * m.get(1, 1) - m.get(1, 0) * m.get(0, 1); const s1 = m.get(0, 0) * m.get(1, 2) - m.get(1, 0) * m.get(0, 2); const s3 = m.get(0, 1) * m.get(1, 2) - m.get(1, 1) * m.get(0, 2); return new Matrix( [3, 3], [ m.get(1, 1) / s0, -m.get(0, 1) / s0, s3 / s0, -m.get(1, 0) / s0, m.get(0, 0) / s0, -s1 / s0, 0, 0, 1 ] ); } }34:[] 2f:{"title":"Double trouble phase space","cells":[{"id":2542,"value":"# Double trouble phase space\n## The idea is to have both phase space and pendulum side by side. Code borrowed from: https://observablehq.com/@jwolondon/phaseportrait.","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"viewof mu = Inputs.range([0, 2], {\n label: \"Air resistance\",\n step: 0.02,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"viewof thetaDot0 = Inputs.range([-4, 4], {\n label: \"Initial velocity\",\n step: 0.01,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"viewof l = Inputs.range([75, 275], {\n label: \"Pendulum length\",\n step: 5,\n value: 200\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":530,"value":"viewof theta0 = Inputs.range([-180, 180], {\n label: \"Initial position\",\n step: 1,\n value: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2553,"value":"chart = html`\n

${ chart2() }

${ chart3() }

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"viewof restart = Inputs.button(\"Restart\", {})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2643,"value":"### Questions for students (think before simulating)\n- How do you get the pendulum to end up on the left of the phase space?","pinned":false,"hidden":false,"mode":"md"},{"id":2471,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":643,"value":"function chart2(){\n const r = pendulumPhaseSpace(590, 320).strokeWidth(0.7);\n // addRelief(r);\n addVectorField(r, true);\n r.strokeWidth(2);\n addTrajectory(r, theta0, thetaDot0, 150, \"black\");\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"function chart3() {\n const rand = (min = 0, max = 1) => Math.random() * (max - min) + min;\n const r = pendulumPhaseSpace(590, 320).strokeWidth(0.3);\n addRelief(r);\n for (let i = 0; i < 2000; i++) {\n addTrajectory(r, rand(-560, 560), rand(-6.5, 6.5), 0.4);\n }\n if (showPendulum) {\n r.strokeWidth(1.5);\n addTrajectory(r, theta0, thetaDot0, 150, \"black\");\n }\n return r.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2280,"value":"viewof showPendulum = Inputs.toggle({ label: \"Show pendulum\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"#### Constants","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"pi = Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":1291,"value":"halfPi = Math.PI / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"g = 9.81","pinned":false,"hidden":false,"mode":"ojs"},{"id":1786,"value":"#### Helper functions","pinned":false,"hidden":false,"mode":"md"},{"id":161,"value":"function radians(deg) {\n return (deg * Math.PI) / 180;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"function degrees(rad) {\n return (180 * rad) / Math.PI;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1781,"value":"function rand(mn = 0, mx = 1) {\n return Math.random() * (mx - mn) + mn;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"function gauss() {\n let [u, v] = [0, 0];\n while (u === 0) {\n u = Math.random();\n }\n while (v === 0) {\n v = Math.random();\n }\n return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2188,"value":"function dotProd([[ax, ay], [bx, by], [cx, cy]]) {\n const [ux, uy] = [bx - ax, by - ay];\n const [vx, vy] = [cx - bx, cy - by];\n return ux * -vy + uy * vx;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"#### Pendulum modelling","pinned":false,"hidden":false,"mode":"md"},{"id":342,"value":"function changeVec(theta, thetaDot) {\n const vel = thetaDot;\n const accel = -mu * thetaDot - (g / (0.02 * l)) * Math.sin(theta);\n return [vel, accel];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"function pGrid() {\n const gridRes = 0.4;\n const grid = [];\n let row = 0;\n\n for (let thetaDot = -5; thetaDot < 5 + gridRes; thetaDot += gridRes) {\n grid[row] = [];\n let col = 0;\n for (let theta = -tau - pi; theta <= tau + pi; theta += gridRes) {\n grid[row][col++] = changeVec(theta, thetaDot);\n }\n row++;\n }\n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"function psTrajectory(pos0, vel0, t) {\n const accel = (theta, thetaDot) =>\n -mu * thetaDot - (g / (0.02 * l)) * Math.sin(theta);\n let theta = pos0;\n let thetaDot = vel0;\n const traj = [[pos0, vel0]];\n const deltaT = 0.1;\n for (let tInc = 0; tInc <= t; tInc += deltaT) {\n theta += thetaDot * deltaT;\n thetaDot += accel(theta, thetaDot) * deltaT;\n traj.push([theta, thetaDot]);\n }\n return traj;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2288,"value":"viewof showControl = Inputs.toggle({ label: \"Reveal\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1747,"value":"#### ODE Solver","pinned":false,"hidden":false,"mode":"md"},{"id":1180,"value":"function rungeKutter4(x, y, xFn, yFn, dt = 0.2, n = 500) {\n const rk4 = (x, y, dt, decl) => {\n const kx0 = xFn(x, y);\n const ky0 = yFn(x, y);\n const kx1 = xFn(x + 0.5 * dt * kx0, y + 0.5 * dt * ky0);\n const ky1 = yFn(x + 0.5 * dt * kx0, y + 0.5 * dt * ky0);\n const kx2 = xFn(x + 0.5 * dt * kx1, y + 0.5 * dt * ky1);\n const ky2 = yFn(x + 0.5 * dt * kx1, y + 0.5 * dt * ky1);\n const kx3 = xFn(x + dt * kx2, y + dt * ky2);\n const ky3 = yFn(x + dt * kx2, y + dt * ky2);\n return [\n x + (1 - decl * decl) * (dt / 6) * (kx0 + 2 * (kx1 + kx2) + kx3),\n y + (dt / 6) * (ky0 + 2 * (ky1 + ky2) + ky3)\n ];\n };\n\n const state = [[x, y]];\n let prev = state[0];\n\n for (let i = 1; i < n; i++) {\n const next = rk4(...prev, dt, i / n);\n state.push(next);\n prev = next;\n }\n return state;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"#### Plotting functions","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"function pendulumPhaseSpace(w, h) {\n const xSc = d3\n .scaleLinear()\n .domain([-tau - pi, tau + pi])\n .range([0, w]);\n\n \n const ySc = d3.scaleLinear().domain([-5, 5]).range([0, h]);\n const r = new Renderer(w, h)\n .setScales(xSc, ySc)\n .flipY()\n .line([\n [-tau - pi, 0],\n [tau + pi, 0]\n ])\n .line([\n [0, -5],\n [0, 4.6]\n ])\n .stroke()\n .textBaseline(\"top\")\n .textAlign(\"middle\")\n .text(\"velocity\", 0, 5)\n .textAlign(\"right\")\n\n .text(\"position\", radians(540), -0.08)\n .textAlign(\"middle\");\n\n return [-360, -180, -90, -45, 45, 90, 180, 360].reduce(\n (r, pos) => r.text(pos, radians(pos), -0.08),\n r\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2123,"value":"function addVectorField(r, isColoured = false) {\n const vSc = 0.15;\n\n r.push().stroke(\"#aac\");\n\n const gridRes = 0.4;\n\n for (let thetaDot = -5; thetaDot < 5 + gridRes; thetaDot += gridRes) {\n for (let theta = -tau - pi; theta <= tau + pi; theta += gridRes) {\n const [vel, accel] = changeVec(theta, thetaDot);\n const mag = Math.hypot(vel, accel);\n const [dx, dy] = [(vSc * vel) / mag, (vSc * accel) / mag];\n\n const traj = psTrajectory(theta, thetaDot, 0.3);\n if (isColoured) {\n r.stroke(dotProd(traj) < 0 ? \"steelblue\" : \"firebrick\");\n }\n r.line([\n [theta - dx, thetaDot - dy],\n [theta + dx, thetaDot + dy]\n ]).ellipse(theta + dx, thetaDot + dy, 0.01);\n }\n }\n return r.pop();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":668,"value":"function addTrajectory(r, theta0, thetaDot0, tLen = 0.3, colour = null) {\n const traj = psTrajectory(radians(theta0), thetaDot0, tLen);\n if (colour) {\n return r.stroke(colour).line(traj);\n }\n return r.stroke(dotProd(traj) < 0 ? \"#99c\" : \"#c99\").line(traj);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2655,"value":"rough = require(\"roughjs@4.5\").catch(() => window.rough)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}