yomguithereal / sigma-experiments Goto Github PK

4.0 4.0 1.0 2.6 MB

Various experiments related to sigma v2.

JavaScript 16.63% HTML 2.23% TypeScript 81.14%

sigma-experiments's Introduction

Welcome to my GitHub page, weary traveler. My name is Guillaume Plique, aka Yomguithereal and I am a research engineer working with social science researchers and designers in Sciences Po's médialab in Paris.

I am usually available for some light/short freelance or consulting work. You can join me by writing at guillaumeplique+freelance on gmail.com servers for such enquiries.

I usually work in the following domains:

Webmining (Scraping, APIs, Crawling etc.)
Algorithmics & data structures
Fuzzy matching & full-text search tweaking
Record linkage & deduplication
Natural Language Processing
Machine learning & data science
Graph theory & interactive visualisation
Fullstack web development

You can also read some shenanigans on my blog over there: https://yomguithereal.github.io/

Finally, you can support my Open Source work by sponsoring me directly on GitHub over here: https://github.com/sponsors/Yomguithereal

sigma-experiments's People

Contributors

Stargazers

Watchers

Forkers

rkolpakov

sigma-experiments's Issues

Picto should have a way to define a forced background color to replace alpha

Basis for heatmap

const vertexShaderSource = `
attribute vec2 a_position;
attribute float a_size;
attribute float a_angle;
attribute vec4 a_color;
attribute vec4 a_insideColor;
attribute vec4 a_dotColor;

uniform mat3 u_matrix;
uniform float u_sqrtZoomRatio;
uniform float u_correctionRatio;

varying vec4 v_color;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;

varying vec4 v_insideColor;
varying vec4 v_dotColor;

const float bias = 255.0 / 254.0;
const float marginRatio = 1.05;

void main() {
  float size = (a_size + 30.0 / u_sqrtZoomRatio) * u_correctionRatio * u_sqrtZoomRatio * 4.0;
  vec2 diffVector = size * vec2(cos(a_angle), sin(a_angle));
  vec2 position = a_position + diffVector * marginRatio;
  gl_Position = vec4(
    (u_matrix * vec3(position, 1)).xy,
    0,
    1
  );

  v_border = u_sqrtZoomRatio * u_sqrtZoomRatio / a_size / 50.0;
  v_diffVector = diffVector;
  v_radius = size / 2.0 / marginRatio;

  v_color = a_color;
  v_color.a *= bias;
  v_insideColor = a_insideColor;
  v_insideColor.a *= bias;
  v_dotColor = a_dotColor;
  v_dotColor.a *= bias;
}
`;

const fragmentShaderSource = `
precision mediump float;

varying vec4 v_color;
varying vec4 v_dotColor;
varying vec4 v_insideColor;
varying vec2 v_diffVector;
varying float v_radius;
varying float v_border;

const vec4 transparent = vec4(0.0, 0.0, 0.0, 0.0);

void main(void) {
  float halfRadius = 0.2 * v_radius;
  float dotRadius = 0.0 * v_radius;
  float distToCenter = length(v_diffVector);

  // Inner dot
  if (distToCenter < dotRadius - v_border) {
    gl_FragColor = v_dotColor;
  }
  // Antialiasing between the dot and the inner disc
  else if (distToCenter < dotRadius) {
    gl_FragColor = mix(v_insideColor, v_dotColor, (dotRadius - distToCenter) / v_border);
  }
  // Outer disc
  else // Inner disc
  if (distToCenter < halfRadius - v_border) {
    gl_FragColor = v_insideColor;
  }
  // Antialiasing between the two disc
  else if (distToCenter < halfRadius) {
    gl_FragColor = mix(v_color, v_insideColor, (halfRadius - distToCenter) / v_border);
  }
  // Outer disc
  else if (distToCenter < v_radius) {
    gl_FragColor = mix(vec4(1.0, 0.0, 0.0, 1.0), transparent, pow(distToCenter / v_radius, 1.0));
  }
  // Outside the node
  else {
    gl_FragColor = transparent;
  }
}
`;

Node pictogram needs a parameter to have a different size

This is useful to take borders into account for instance.

Picto program could take svg string map

Correct centering does not work with large sizes

I must fix the code to work with center of mass of the matrix. Beware the max texture size also.

node.pictogram

variant without node under it
variant with coloring and full crop

Fix triangle-based node renderers as per last fix

edge.loop

Code for automatic pictogram offset

const testerCanvas = document.createElement("canvas");
        const testerContext = testerCanvas.getContext("2d") as CanvasRenderingContext2D;

        testerContext.drawImage(image, 0, 0, size, size);

        const data = testerContext.getImageData(0, 0, size, size).data;
        const alpha = new Uint8ClampedArray(data.length / 4);

        for (let i = 0; i < data.length; i += 4) {
          alpha[i / 4] = data[i + 3];
        }

        let minX = Infinity;
        let maxX = -Infinity;
        let minY = Infinity;
        let maxY = -Infinity;

        for (let y = 0; y < size; y++) {
          for (let x = 0; x < size; x++) {
            const a = alpha[y * size + x];

            if (a > 0) {
              if (x < minX) minX = x;
              if (x > maxX) maxX = x;
              if (y < minY) minY = y;
              if (y > maxY) maxY = y;
            }
          }
        }

        const centerX = minX + Math.ceil((maxX - minX) / 2);
        const centerY = minY + Math.ceil((maxY - minY) / 2);

        console.log(centerX, centerY, size / 2);

        console.log(minX, size - maxX, minY, size - maxY);

        let dxOffset = centerX - size / 2;
        let dyOffset = centerY - size / 2;

        // if (minX > size - maxX) {
        //   dxOffset = minX - (size - maxX) + 1;
        // }
        // if (minY > size - maxY) {
        //   dyOffset = minY - (size - maxY) + 1;
        // }

        console.log(dxOffset, dyOffset);

        // NOTE: it's possible to offset the image here, this is potentially useful for some pictograms
        ctx.drawImage(
          image,
          dx + dxOffset,
          dy + dyOffset,
          size,
          size,
          xOffset,
          yOffset,
          imageSizeInTexture,
          imageSizeInTexture,
        );