{"version":3,"sources":["https://lively-kernel.org/lively4/BP2019RH1/src/internal/individuals-as-points/common/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","currentPosition","x","y","c","currentColor","opacity","pointWidth","currentSize","uniforms","stageWidth","stageHeight","count","length","primitive","animateZoomedPointsShader","s_position","reglContext","startPosition","t_position","targetPosition","s_color","startColor","t_color","targetColor","s_pointWidth","startSize","t_pointWidth","targetSize","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.currentPosition.x, point.drawing.currentPosition.y];\n          });\n        },\n        color: function(context, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.currentColor\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.currentSize;\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.startPosition.x, point.drawing.startPosition.y];\n          });\n        },\n        t_position: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.targetPosition.x, point.drawing.targetPosition.y];\n          });\n        },\n        s_color: function(reglContext, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.startColor\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.targetColor\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.startSize;\n          });\n        },\n        t_pointWidth: function(reglContext, props){\n          return props.points.map(function(point) {\n            return point.drawing.targetSize;\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.startPosition.x, point.drawing.startPosition.y];\n          });\n        },\n        t_position: function(reglContext, props) {\n          return props.points.map(function(point) {\n            return [point.drawing.currentPosition.x, point.drawing.currentPosition.y];\n          });\n        },\n        color: function(reglContext, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.currentColor\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.currentSize;\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.targetPosition.x, point.drawing.targetPosition.y];\n          });\n        },\n        color: function(context, props) {\n          return props.points.map(function(point) {\n            let c = point.drawing.targetColor\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.targetSize;\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}"]}