{"version":3,"sources":["https://lively-kernel.org/lively4/BP2019RH1/scratch/individualsAsPoints/regl/npm-modules/regl-point-wrapper.js"],"names":["createREGL","ReGL","constructor","canvasContext","regl","fragShader","vertShaderDraw","vertShaderAnimate","vertShaderAnimateZoomedPoints","vertShaderZoomPoints","setUpShader","setBackgroundColor","r","g","b","color","backgroundColor","drawPointsShader","frag","vert","attributes","position","context","props","points","map","point","drawing","x","y","c","opacity","pointWidth","size","uniforms","stageWidth","stageHeight","count","length","primitive","animateZoomedPointsShader","s_position","reglContext","sx","sy","t_position","tx","ty","s_color","scolor","t_color","tcolor","s_pointWidth","ssize","t_pointWidth","tsize","t","tick","transform","scale","contxt","animatePointsShader","drawZoomedPointsShader","drawPoints","clear","animatePoints","drawZoomedPoints","animateZoomedPoints"],"mappings":"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","file":"regl-point-wrapper.js","sourcesContent":["import createREGL from \"src/external/regl.js\"\n\nexport class ReGL {\n  \n  constructor(canvasContext){\n    this.regl = createREGL(canvasContext)\n    this.fragShader = `\n      precision mediump float;\n      varying vec4 fragColor;\n      void main () {\n        float r = 0.0, delta = 0.0, alpha = 1.0;\n        vec2 cxy = 2.0 * gl_PointCoord - 1.0;\n        r = dot(cxy, cxy);\n        if (r > 1.0) {\n            discard;\n        }\n        gl_FragColor = fragColor * alpha;\n      }`\n    this.vertShaderDraw = `\n      precision mediump float;\n      attribute vec2 position;\n      attribute float pointWidth;\n      attribute vec4 color;\n\n      varying vec4 fragColor;\n      uniform float stageWidth;\n      uniform float stageHeight;\n\n      // helper function to transform from pixel space to normalized\n      // device coordinates (NDC). In NDC (0,0) is the middle,\n      // (-1, 1) is the top left and (1, -1) is the bottom right.\n      // Stolen from Peter Beshai's great blog post:\n      // http://peterbeshai.com/beautifully-animate-points-with-webgl-and-regl.html\n      vec2 normalizeCoords(vec2 position) {\n        // read in the positions into x and y vars\n        float x = position[0];\n        float y = position[1];\n\n        return vec2(\n          2.0 * ((x / stageWidth) - 0.5),\n          // invert y to treat [0,0] as bottom left in pixel space\n          -(2.0 * ((y / stageHeight) - 0.5)));\n      }\n\n      void main () {\n        gl_PointSize = pointWidth;\n        gl_Position = vec4(normalizeCoords(position), 0, 1);\n        fragColor = color;\n      }`\n    this.vertShaderAnimate = `\n      precision mediump float;\n      attribute vec2 s_position;\n      attribute vec2 t_position;\n      attribute float pointWidth;\n      attribute vec4 color;\n\n      varying vec4 fragColor;\n      uniform float t;\n      uniform float stageWidth;\n      uniform float stageHeight;\n\n      vec2 normalizeCoords(vec2 position) {\n        // read in the positions into x and y vars\n        float x = position[0];\n        float y = position[1];\n\n        return vec2(\n          2.0 * ((x / stageWidth) - 0.5),\n          -(2.0 * ((y / stageHeight) - 0.5)));\n      }\n\n      void main () {\n        gl_PointSize = pointWidth;\n        gl_Position = vec4(mix(normalizeCoords(s_position), normalizeCoords(t_position), t), 0, 1);\n        fragColor = color;\n      }\n      `\n    \n    this.vertShaderAnimateZoomedPoints = `\n      precision mediump float;\n      attribute vec2 s_position;\n      attribute vec2 t_position;\n      attribute float s_pointWidth;\n      attribute float t_pointWidth;\n      attribute vec4 s_color; \n      attribute vec4 t_color;\n\n      varying vec4 fragColor;\n      uniform float t;\n      uniform mat3 transform;\n      uniform float scale;\n      uniform float stageWidth;\n      uniform float stageHeight;\n\n      vec2 normalizeCoords(vec2 position) {\n        // read in the positions into x and y vars\n        float x = position[0];\n        float y = position[1];\n\n        return vec2(\n          2.0 * ((x / stageWidth) - 0.5),\n          -(2.0 * ((y / stageHeight) - 0.5)));\n      }\n\n      void main () {\n        gl_PointSize = scale * float(mix(s_pointWidth, t_pointWidth, t));\n        vec3 finalSource = transform * vec3(normalizeCoords(s_position), 1);\n        vec3 finalTarget = transform * vec3(normalizeCoords(t_position), 1);\n        gl_Position = vec4(mix(finalSource.xy, finalTarget.xy, t), 0, 1);\n        fragColor = vec4(mix(s_color[0], t_color[0], t), mix(s_color[1], t_color[1], t), mix(s_color[2], t_color[2], t), mix(s_color[3], t_color[3], t));\n      }\n      `\n    this.vertShaderZoomPoints = `\n      precision mediump float;\n      attribute vec2 position;\n      attribute float pointWidth;\n      attribute vec4 color;\n      \n      varying vec4 fragColor;\n      \n      uniform mat3 transform;\n      uniform float scale;\n      uniform vec2 mouse;\n\n      uniform float stageWidth;\n      uniform float stageHeight;\n\n      vec2 normalizeCoords(vec2 position) {\n        // read in the positions into x and y vars\n        float x = position[0];\n        float y = position[1];\n\n        return vec2(\n          2.0 * ((x / stageWidth) - 0.5),\n          // invert y to treat [0,0] as bottom left in pixel space\n          -(2.0 * ((y / stageHeight) - 0.5)));\n      }\n\n      void main () {\n        gl_PointSize = pointWidth * scale;\n        vec3 final = transform * vec3(normalizeCoords(position), 1);\n        gl_Position = vec4(final.xy, 0, 1);\n        fragColor = color;\n      }   \n    `\n    \n    this.setUpShader()\n    this.setBackgroundColor({r: 255, g: 255, b: 255})\n  }\n  \n  setBackgroundColor(color){\n    this.backgroundColor = [color.r/255.0, color.g/255.0, color.b/255.0, 1.0];\n  }\n  \n  setUpShader() {\n    this.drawPointsShader = this.regl({\n      frag: this.fragShader,\n      \n      vert: this.vertShaderDraw,\n      \n      attributes: {\n        position: function(context, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.x, point.drawing.y];\n          });\n        },\n        color: function(context, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.color\n            return [c.r/255.0, c.g/255.0, c.b/255.0, c.opacity];\n          });\n        },\n        pointWidth: function(context, props) {\n          return props.points.map(function(point) {\n            return point.drawing.size;\n          });\n        }\n      },\n\n      uniforms: {\n        stageWidth: this.regl.context(\"drawingBufferWidth\"),\n        stageHeight: this.regl.context(\"drawingBufferHeight\"),\n      },\n\n      count: function(context, props) {\n        return props.points.length;\n      },\n      primitive: \"points\"\n    });\n    \n    this.animateZoomedPointsShader = this.regl({\n      frag: this.fragShader,\n\n      vert: this.vertShaderAnimateZoomedPoints,\n\n      attributes: {\n        s_position: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.sx, point.drawing.sy];\n          });\n        },\n        t_position: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.tx, point.drawing.ty];\n          });\n        },\n        s_color: function(reglContext, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.scolor\n            return [c.r/255.0, c.g/255.0, c.b/255.0, c.opacity];\n          });\n        },\n        t_color: function(reglContext, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.tcolor\n            return [c.r/255.0, c.g/255.0, c.b/255.0, c.opacity];\n          });\n        },\n        s_pointWidth: function(reglContext, props){\n          return props.points.map(function(point) {\n            return point.drawing.ssize;\n          });\n        },\n        t_pointWidth: function(reglContext, props){\n          return props.points.map(function(point) {\n            return point.drawing.tsize;\n          });\n        }\n      },\n\n      uniforms: {\n        t: function(context, props) {\n          return props.tick;\n        },\n        transform: function(context, props) {\n          return props.transform;\n        },\n        scale: function(contxt, props) {\n          return props.scale;\n        },\n        stageWidth: this.regl.context(\"drawingBufferWidth\"),\n        stageHeight: this.regl.context(\"drawingBufferHeight\")\n      },\n\n      count: function(context, props) {\n        return props.points.length;\n      },\n      primitive: \"points\"\n    });\n    \n    this.animatePointsShader = this.regl({\n      frag: this.fragShader,\n\n      vert: this.vertShaderAnimate,\n\n      attributes: {\n        s_position: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.sx, point.drawing.sy];\n          });\n        },\n        t_position: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.x, point.drawing.y];\n          });\n        },\n        color: function(reglContext, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.color\n            return [c.r/255.0, c.g/255.0, c.b/255.0, c.opacity];\n          });\n        },\n        pointWidth: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return point.drawing.size;\n          });\n        }\n      },\n\n      uniforms: {\n        t: function(context, props) {\n          return props.tick;\n        },\n        stageWidth: this.regl.context(\"drawingBufferWidth\"),\n        stageHeight: this.regl.context(\"drawingBufferHeight\")\n      },\n\n      count: function(context, props) {\n        return props.points.length;\n      },\n      primitive: \"points\"\n    });\n    \n    this.drawZoomedPointsShader = this.regl( {\n      frag: this.fragShader,\n      \n      vert: this.vertShaderZoomPoints,\n      \n      attributes: {\n        position: function(context, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.tx, point.drawing.ty];\n          });\n        },\n        color: function(context, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.tcolor\n            return [c.r/255.0, c.g/255.0, c.b/255.0, c.opacity];\n          });\n        },\n        pointWidth: function(context, props) {\n          return props.points.map(function(point) {\n            return point.drawing.tsize;\n          });\n        }\n      },\n\n      uniforms: {\n        transform: function(context, props) {\n          return props.transform;\n        },\n        scale: function(contxt, props) {\n          return props.scale;\n        },\n        stageWidth: this.regl.context(\"drawingBufferWidth\"),\n        stageHeight: this.regl.context(\"drawingBufferHeight\"),\n      },\n\n      count: function(context, props) {\n        return props.points.length;\n      },\n      primitive: \"points\"\n    })\n  }\n  \n  drawPoints(props) {\n    this.regl.clear({color: this.backgroundColor})\n    this.drawPointsShader(props)\n  }\n  \n  animatePoints(props){\n    this.regl.clear({color: this.backgroundColor})\n    this.animatePointsShader(props)\n  }\n  \n  drawZoomedPoints(props) {\n    this.regl.clear({color: this.backgroundColor})\n    this.drawZoomedPointsShader(props)\n  }\n  \n  animateZoomedPoints(props){\n    this.animateZoomedPointsShader(props)\n  }\n}"]}