gridviz 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

package/src/core/Style.js

@@ -3,7 +3,7 @@
 
 import { Drawable } from "./Drawable.js"
 
-/** @typedef {"square"|"circle"|"diamond"|"donut"|"none"} Shape */
+/** @typedef {"square"|"circle"|"diamond"|"donut"|"triangle_up"|"triangle_down"|"triangle_left"|"triangle_right"|"none"} Shape */
 
 /**
  * viewScale type

package/src/index.js

@@ -33,6 +33,7 @@ export { MosaicStyle } from './style/MosaicStyle.js'
 export { NinjaStarStyle } from './style/NinjaStarStyle.js'
 export { TimeSeriesStyle } from './style/TimeSeriesStyle.js'
 export { IsoFenceStyle } from './style/IsoFenceStyle.js'
+export { ImageStyle } from './style/ImageStyle.js'
 
 // export additional layers
 export { GridLayer } from './layer/GridLayer.js'
@@ -47,11 +48,14 @@ export { ColorDiscreteLegend } from './legend/ColorDiscreteLegend.js'
 export { ColorCategoryLegend } from './legend/ColorCategoryLegend.js'
 export { SizeLegend, sizeLegend, sizeLegendViewScale, sizeDiscreteLegend, sizeDiscreteViewScaleLegend } from './legend/SizeLegend.js'
 export { OrientationLegend, orientationLegend } from './legend/OrientationLegend.js'
+export { TrivariateLegend } from './legend/TrivariateLegend.js'
 
 // export { goToStraight, zoomTo } from "./utils/zoomUtils"
 export * from './utils/stretching.js'
 export * from './utils/scale.js'
-export { nice } from './utils/utils.js'
+export * from './utils/trivariate.js'
+export * from './utils/chernoff.js'
+export { nice, loadImage } from './utils/utils.js'
 
 import { GeoCanvas } from './core/GeoCanvas.js'
 export const getParameterByName = GeoCanvas.getParameterByName

package/src/legend/TrivariateLegend.js

@@ -0,0 +1,210 @@
+//@ts-check
+'use strict'
+
+import { select } from 'd3-selection'
+import { Legend } from '../core/Legend.js'
+
+/**
+ *
+ * @module legend
+ * @author Julien Gaffuri
+ */
+export class TrivariateLegend extends Legend {
+    /** @param {Object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        //classifier
+        this.classifier = opts.classifier
+
+        this.width = opts.width || 150
+        this.selectionColor = this.selectionColor || "red"
+        this.tooltip = opts.tooltip
+        this.texts = opts.texts
+
+        this.leftText = opts.leftText || "Category 0"
+        this.topText = opts.topText || "Category 1"
+        this.rightText = opts.rightText || "Category 2"
+
+        this.centerCoefficient = opts.centerCoefficient || this.classifier.centerCoefficient
+    }
+
+    /**
+     * @param {{} } opts
+     */
+    update(opts) {
+
+        //clear
+        this.div.selectAll('*').remove()
+
+        //title
+        this.makeTitle()
+
+        const sqrt3over2 = 0.866025
+        const w = this.width, h = w * sqrt3over2
+        const classifier = this.classifier
+        const selectionColor = this.selectionColor
+        const selectionStrokeWidth = 0
+        const tt = this.tooltip
+        const texts = this.texts || {}
+
+        const padding = 2
+        const fontSize = 12
+
+        //make svg element
+        const svg = this.div
+            .append('svg')
+            .attr('width', w + selectionStrokeWidth)
+            .attr('height', h + 4 * padding + 2 * fontSize)
+
+        //top label
+        svg.append("text").attr("x", w / 2).attr("y", padding + fontSize).text(this.topText).attr("font-size", fontSize)
+            .attr("text-anchor", "middle")
+        //left label
+        svg.append("text").attr("x", 0).attr("y", 3 * padding + 2 * fontSize + h).text(this.leftText).attr("font-size", fontSize)
+            .attr("text-anchor", "start")
+        //right label
+        svg.append("text").attr("x", w).attr("y", 3 * padding + 2 * fontSize + h).text(this.rightText).attr("font-size", fontSize)
+            .attr("text-anchor", "end")
+
+
+
+        //triangle group
+        const g = svg.append("g").attr("transform", "translate(" + (selectionStrokeWidth / 2) + " " + (selectionStrokeWidth / 2 + (2 * padding + fontSize)) + ")")
+
+        //common function for triangle patches
+        const setAttributes = (elt, color, text) => {
+            //elt.raise();
+            elt.attr('fill', color)
+                //.attr("stroke", colorOver)
+                //.attr("stroke-width", 0)
+                //.attr("stroke-linejoin", "round")
+                .on("mouseover", function (e) {
+                    /*this.parentNode.appendChild(this); select(this).attr("stroke-width", selectionStrokeWidth);*/
+                    select(this).attr('fill', selectionColor);
+                    if (!tt || !text) return;
+                    tt.html(text);
+                    tt.setPosition(e);
+                    tt.show()
+                })
+                .on("mouseout", function () {
+                    /*select(this).attr("stroke-width", 0);*/
+                    select(this).attr('fill', color);
+                    if (tt) tt.hide()
+                })
+            if (tt && text) elt.on("mousemove", function (e) { tt.setPosition(e) })
+        }
+
+        //const [c0, c1, c2] = classifier.center
+
+        //trapezium s0
+        const t0 = g.append('polygon')
+            .attr('points', "0," + h + " " + w / 3 + "," + h + " " + w / 2 + "," + h * 2 / 3 + " " + w / 6 + "," + h * 2 / 3)
+        setAttributes(t0, classifier.colors[0], texts["0"])
+        //trapezium s1
+        const t1 = g.append('polygon')
+            .attr('points', w / 2 + ",0 " + w * 2 / 3 + "," + h / 3 + " " + w / 2 + "," + h * 2 / 3 + " " + w / 3 + "," + h / 3)
+        setAttributes(t1, classifier.colors[1], texts["1"])
+        //trapezium s2
+        const t2 = g.append('polygon')
+            .attr('points', w + "," + h + " " + w * 5 / 6 + "," + 2 * h / 3 + " " + w / 2 + "," + h * 2 / 3 + " " + w * 2 / 3 + "," + h)
+        setAttributes(t2, classifier.colors[2], texts["2"])
+        //triangle s0
+        const t0_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w * 5 / 6 + "," + h * 2 / 3 + " " + w * 2 / 3 + "," + h / 3)
+        setAttributes(t0_, classifier.mixColors[0], texts["12"])
+        //triangle s1
+        const t1_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w / 3 + "," + h + " " + w * 2 / 3 + "," + h)
+        setAttributes(t1_, classifier.mixColors[1], texts["02"])
+        //triangle s2
+        const t2_ = g.append('polygon')
+            .attr('points', w / 2 + "," + h * 2 / 3 + " " + w / 6 + "," + h * 2 / 3 + " " + w / 3 + "," + h / 3)
+        setAttributes(t2_, classifier.mixColors[2], texts["01"])
+
+        //center
+        if (this.centerCoefficient) {
+            //TODO make it an hexagon !
+            const center = g.append('circle')
+                .attr('cx', w / 2).attr('cy', h * 2 / 3)
+                .attr('r', this.centerCoefficient * h / 3)
+            setAttributes(center, classifier.centerColor, texts["center"])
+        }
+
+
+        /*
+        let middle, left, top, right, left_, bottom_, right_
+        if (!this.real) {
+
+            //0 left triangle
+            left = g.append('polygon')
+                .attr('points', "0," + h + " " + (w / 3) + "," + h + " " + (w / 6) + "," + (2 * h / 3))
+            //1 top triangle
+            top = g.append('polygon')
+                .attr('points', (w / 3) + "," + (h / 3) + " " + (w * 2 / 3) + "," + (h / 3) + " " + (w / 2) + ",0")
+            //2 right triangle
+            right = g.append('polygon')
+                .attr('points', (w * 2 / 3) + "," + h + " " + w + "," + h + " " + (w * 5 / 6) + "," + (2 * h / 3))
+            //middle triangle
+            middle = g.append('polygon')
+                .attr('points', (w / 2) + "," + (h / 3) + " " + (w / 4) + "," + (h * 5 / 6) + " " + (3 * w / 4) + "," + (h * 5 / 6))
+            //01 left trapezium
+            left_ = g.append('polygon')
+                .attr('points', (w / 6) + "," + (h * 2 / 3) + " " + (w / 4) + "," + (h * 5 / 6) + " " + (w / 2) + "," + (h / 3) + " " + (w / 3) + "," + (h / 3))
+            //02 bottom trapezium
+            bottom_ = g.append('polygon')
+                .attr('points', (w / 3) + "," + (h) + " " + (2 * w / 3) + "," + (h) + " " + (w * 3 / 4) + "," + (h * 5 / 6) + " " + (w / 4) + "," + (h * 5 / 6))
+            //12 right trapezium
+            right_ = g.append('polygon')
+                .attr('points', (w / 2) + "," + (h / 3) + " " + (w * 3 / 4) + "," + (h * 5 / 6) + " " + (w * 5 / 6) + "," + (h * 2 / 3) + " " + (w * 2 / 3) + "," + (h / 3))
+
+        } else {
+
+            //middle triangle
+            middle = g.append('polygon')
+                .attr('points', (w / 2) + ",0 0," + h + " " + w + "," + h)
+
+            //draw trapezium
+            //draw large trapezium first
+            for (let i_ = 2; i_ >= 0; i_--) {
+                const i = this.classifier.lowIndex[i_]
+                const r = this.classifier.lowThreshold[i]
+                if (i == 2)
+                    //01 left trapezium
+                    left_ = g.append('polygon')
+                        .attr('points', w / 2 + ",0 0," + h + " " + w * r + "," + h + " " + w * (1 + r) / 2 + "," + r * h)
+                else if (i == 1)
+                    //02 bottom trapezium
+                    bottom_ = g.append('polygon')
+                        .attr('points', "0," + h + " " + w + "," + h + " " + w * (1 - r / 2) + "," + h * (1 - r) + " " + r * w / 2 + "," + h * (1 - r))
+                else
+                    //12 right trapezium
+                    right_ = g.append('polygon')
+                        .attr('points', w + "," + h + " " + w / 2 + ",0 " + w * (1 - r) / 2 + "," + h * r + " " + w * (1 - r) + "," + h)
+            }
+
+            //draw triangles
+            //draw large triangles first
+            for (let i_ = 2; i_ >= 0; i_--) {
+                const i = this.classifier.highIndex[i_]
+                const r = this.classifier.highThreshold[i]
+
+                if (i == 2)
+                    //2 right triangle
+                    right = g.append('polygon')
+                        .attr('points', w + "," + h + " " + w * r + "," + h + " " + w * (1 + r) / 2 + "," + h * r)
+                else if (i == 1)
+                    //1 top triangle
+                    top = g.append('polygon')
+                        .attr('points', (w / 2) + ",0 " + w * r / 2 + "," + h * (1 - r) + " " + w * (1 - r / 2) + "," + h * (1 - r))
+                else
+                    //0 left triangle
+                    left = g.append('polygon')
+                        .attr('points', "0," + h + " " + w * (1 - r) + "," + h + " " + w * (1 - r) / 2 + "," + h * r)
+            }
+
+        }*/
+
+    }
+}

package/src/style/ImageStyle.js

@@ -0,0 +1,81 @@
+//@ts-check
+'use strict'
+
+import { Style } from '../core/Style.js'
+
+/**
+ * @module style
+ * @author Julien Gaffuri
+ */
+export class ImageStyle extends Style {
+
+    /** @param {object} opts */
+    constructor(opts) {
+        super(opts)
+        opts = opts || {}
+
+        /** A function returning the image code of a cell.
+         * @type {function(import('../core/Dataset.js').Cell, number, number, object):string} */
+        this.imageCode = opts.imageCode || (() => '') //(c,r,z,vs) => {}
+
+        /** The dictionnary code -> image
+         *  @type {object}        */
+        this.images = opts.images || {}
+
+        /** The image size in ground meters
+         *  @type {function(import('../core/Dataset.js').Cell, number, number, object):number}        */
+        this.size = opts.size || ((cell, resolution) => resolution)
+    }
+
+    /**
+     * @param {Array.<import("../core/Dataset.js").Cell>} cells
+     * @param {import("../core/GeoCanvas.js").GeoCanvas} geoCanvas
+     * @param {number} resolution
+     * @override
+     */
+    draw(cells, geoCanvas, resolution) {
+
+        //
+        const z = geoCanvas.view.z,
+            resolutionPix = resolution / z
+
+        //get view scale
+        const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
+
+        //draw in screen coordinates
+        geoCanvas.initCanvasTransform()
+
+        //
+        for (let cell of cells) {
+
+            //get cell image code
+            const code = this.imageCode(cell, resolution, z, viewScale)
+
+            //get image
+            const image = this.images[code]
+            if (!image) continue
+
+            //size and position values
+            let sizePix = this.size(cell, resolution, z, viewScale) / z
+            if (!sizePix) continue
+            const d = (resolutionPix - sizePix) / 2
+
+            try {
+                geoCanvas.ctx.drawImage(image, geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d -resolutionPix, sizePix, sizePix)
+
+                /*/red color filter
+                geoCanvas.ctx.globalCompositeOperation = 'source-in';
+                geoCanvas.ctx.fillStyle = 'red';
+                geoCanvas.ctx.fillRect(geoCanvas.geoToPixX(cell.x) + d, geoCanvas.geoToPixY(cell.y) + d, sizePix, sizePix);
+                geoCanvas.ctx.globalCompositeOperation = 'source-over';*/
+            } catch (error) {
+                console.error(error)
+            }
+
+        }
+
+
+        //update legends
+        this.updateLegends({ style: this, resolution: resolution, z: z, viewScale: viewScale })
+    }
+}

package/src/style/PillarStyle.js

@@ -107,7 +107,7 @@ export class PillarStyle extends Style {
             //set width
             geoCanvas.ctx.lineWidth = wG
 
-            //compute cell centre postition
+            //compute cell center postition
             const cx = cell.x + resolution / 2
             const cy = cell.y + resolution / 2
             const ls = hG * this.shadowFactor
@@ -152,7 +152,7 @@ export class PillarStyle extends Style {
             //TODO use that
             //const offset = this.offset(c, resolution, z)
 
-            //compute cell centre postition
+            //compute cell center postition
             const cx = cell.x + resolution / 2
             const cy = cell.y + resolution / 2
 

package/src/style/SegmentStyle.js

@@ -84,7 +84,7 @@ export class SegmentStyle extends Style {
             geoCanvas.ctx.strokeStyle = col
             geoCanvas.ctx.lineWidth = wG
 
-            //compute segment centre postition
+            //compute segment center postition
             const cx = cell.x + resolution / 2 + offset.dx
             const cy = cell.y + resolution / 2 + offset.dy
 

package/src/style/ShapeColorSizeStyle.js

@@ -93,6 +93,34 @@ export class ShapeColorSizeStyle extends Style {
                 geoCanvas.ctx.lineTo(c.x + r2 + s2, c.y + r2)
                 geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 - s2)
                 geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_up') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_down') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_left') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.fill()
+            } else if (shape === 'triangle_right') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.fill()
             } else {
                 throw new Error('Unexpected shape:' + shape)
             }

package/src/style/SideStyle.js

@@ -125,14 +125,14 @@ export class SideStyle extends Style {
      * @param {number} resolution The cells resolution
      * @param {boolean} withHorizontal Set to true to build horizontal sides, false otherwise.
      * @param {boolean} withVertical Set to true to build vertical sides, false otherwise.
-     * @param {boolean} centre Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
+     * @param {boolean} center Set to true so that the side coordinate are those of its center point rather than its left/bottom point (the side x,y coordinates are those of the left point for horizontal sides, and of the bottom point for vertical sides)
      * @returns { Array.<Side> }
      */
-    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, centre = true) {
+    static buildSides(cells, resolution, withHorizontal = true, withVertical = true, center = true) {
         /** @type { Array.<Side> } */
         const sides = []
 
-        const r2 = centre ? resolution / 2 : 0
+        const r2 = center ? resolution / 2 : 0
 
         //make horizontal sides
         //sort cells by x and y

package/src/style/StrokeStyle.js

@@ -49,50 +49,82 @@ export class StrokeStyle extends Style {
         const viewScale = this.viewScale ? this.viewScale(cells, resolution, z) : undefined
 
         const r2 = resolution * 0.5
-        for (let cell of cells) {
+        for (let c of cells) {
 
             //color
-            const col = this.strokeColor ? this.strokeColor(cell, resolution, z, viewScale) : undefined
+            const col = this.strokeColor ? this.strokeColor(c, resolution, z, viewScale) : undefined
             if (!col || col === 'none') continue
             geoCanvas.ctx.strokeStyle = col
 
             //size - in geo unit
-            const sG = this.size ? this.size(cell, resolution, z, viewScale) : resolution
+            const size = this.size ? this.size(c, resolution, z, viewScale) : resolution
 
             //width
-            const wi = this.strokeWidth ? this.strokeWidth(cell, resolution, z, viewScale) : 1 * z
+            const wi = this.strokeWidth ? this.strokeWidth(c, resolution, z, viewScale) : 1 * z
             if (!wi || wi <= 0) continue
             geoCanvas.ctx.lineWidth = wi
 
             //shape
-            const shape = this.shape ? this.shape(cell, resolution, z, viewScale) : 'square'
+            const shape = this.shape ? this.shape(c, resolution, z, viewScale) : 'square'
             if (shape === 'none') continue
 
             //get offset
-            const offset = this.offset(cell, resolution, z)
+            const offset = this.offset(c, resolution, z)
 
             if (shape === 'square') {
                 //draw square
-                const d = resolution * (1 - sG / resolution) * 0.5
+                const d = resolution * (1 - size / resolution) * 0.5
                 geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.rect(cell.x + d + offset.dx, cell.y + d + offset.dy, sG, sG)
+                geoCanvas.ctx.rect(c.x + d + offset.dx, c.y + d + offset.dy, size, size)
                 geoCanvas.ctx.stroke()
             } else if (shape === 'circle') {
                 //draw circle
                 geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.arc(cell.x + r2 + offset.dx, cell.y + r2 + offset.dy, sG * 0.5, 0, 2 * Math.PI, false)
+                geoCanvas.ctx.arc(c.x + r2 + offset.dx, c.y + r2 + offset.dy, size * 0.5, 0, 2 * Math.PI, false)
                 geoCanvas.ctx.stroke()
             } else if (shape === 'diamond') {
-                const s2 = sG * 0.5
+                const s2 = size * 0.5
                 geoCanvas.ctx.beginPath()
-                geoCanvas.ctx.moveTo(cell.x + r2 - s2, cell.y + r2)
-                geoCanvas.ctx.lineTo(cell.x + r2, cell.y + r2 + s2)
-                geoCanvas.ctx.lineTo(cell.x + r2 + s2, cell.y + r2)
-                geoCanvas.ctx.lineTo(cell.x + r2, cell.y + r2 - s2)
-                geoCanvas.ctx.lineTo(cell.x + r2 - s2, cell.y + r2)
+                geoCanvas.ctx.moveTo(c.x + r2 - s2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 + s2)
+                geoCanvas.ctx.lineTo(c.x + r2 + s2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + r2 - s2)
+                geoCanvas.ctx.lineTo(c.x + r2 - s2, c.y + r2)
                 geoCanvas.ctx.stroke()
             } else if (shape === 'donut') {
                 console.error('Not implemented')
+            } else if (shape === 'triangle_up') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
+            } else if (shape === 'triangle_down') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x + r2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
+            } else if (shape === 'triangle_left') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x + resolution + dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y - dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
+            } else if (shape === 'triangle_right') {
+                const dr2 = (size - resolution) / 2
+                geoCanvas.ctx.beginPath()
+                geoCanvas.ctx.moveTo(c.x - dr2, c.y - dr2)
+                geoCanvas.ctx.lineTo(c.x + resolution + dr2, c.y + r2)
+                geoCanvas.ctx.lineTo(c.x - dr2, c.y + resolution + dr2)
+                geoCanvas.ctx.closePath()
+                geoCanvas.ctx.stroke()
             } else {
                 throw new Error('Unexpected shape:' + shape)
             }

package/src/utils/chernoff.js

@@ -0,0 +1,14 @@
+//@ts-check
+'use strict'
+
+import { loadImage } from '../utils/utils.js'
+
+//load chernoff images
+export async function loadChernoffFacesImages(out, baseURL, callback = undefined) {
+    out = out || {}
+    for (let s of ["f", "m"])
+        for (let a of ["y", "m", "o"])
+            for (let i = 0; i <= 2; i++)
+                out[s + a + i] = await loadImage(baseURL + (s + a + i) + ".png")
+    if (callback) callback()
+}