2f:Ta5a,function drawREGL() { d3.select("#container").html(""); // init regl const container = document.getElementById("container"); const regl = createREGL({ container: container // extensions: ["OES_standard_derivatives"] }); // draw points const drawPoints = regl({ vert: ` precision mediump float; attribute float speed, x, y0, y1, dy; attribute float isB; varying float c; uniform float interp; // time / 40 void main() { // 점의 이동거리: x + interp * speed (초기위치 + 시간 * 속도) // mod(A, B) -> 나머지 계산, B가 1 이므로 (0, 1) 사이의 값 반환 (오른쪽 끝에가면 다시 원점에서 시작되게 됨) // x축 보간인자 (일정하게 증가함) float t = mod(x + interp * speed, 1.0); // cubic ease // y축 보간인자 (천천히 증가하다가 0.5에서 급격히 증가하고 천천히 감속함) (t값에 의해 정해짐) float ct = t < 0.5 ? 4.0 * t * t * t //시작할 때 천천히 움직이다가 점점 빨라지는 가속 : -0.5 * pow(abs(2.0 * t - 2.0), 3.0) + 1.0; // 천천히 감속하면서 끝남 // mix(A, B, c) -> A(시작), B(끝), c(보간인자, 0 - 1사이) -> linear interpolation float x = mix(-1.0, 1.0, t); float y = mix(y0, y1, ct); gl_Position = vec4(x, y + dy, 0, 1); gl_PointSize = 3.0; /// 4.0 c = isB; }`, frag: ` precision mediump float; varying float c; void main() { vec4 blue = vec4(0.00, 0.65, 1.00, 1); // vec4 orng = vec4(0.99, 0.45, 0.011, 1); vec4 orng = vec4(1.0, 0.8, 0.2, 1); gl_FragColor = c == 1.0 ? blue : orng; }`, // Without using buffer // attributes: { // speed: data.map((d) => d.speed), // x: data.map((d) => d.x), // y0: data.map((d) => d.y0), // y1: data.map((d) => d.y1), // dy: data.map((d) => d.dy), // isB: data.map((d) => d.isB) // }, // Using buffer attributes: { speed: { buffer: regl.buffer(data.map((d) => d.speed)) }, x: { buffer: data.map((d) => d.x) }, y0: { buffer: data.map((d) => d.y0) }, y1: { buffer: data.map((d) => d.y1) }, dy: { buffer: data.map((d) => d.dy) }, isB: { buffer: data.map((d) => d.isB) } }, uniforms: { interp: (ctx, props) => props.interp }, primitive: "points", count }); // regl rendering regl.frame(({ time }) => { regl.clear({ depth: 1, color: [0.1, 0.1, 0.1, 1] // color: [1, 1, 1, 1] }); drawPoints({ interp: time / 40 }); }); }30:[] 2d:{"title":"regl - sankey + d3","cells":[{"id":0,"value":"# regl - sankey + d3","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"- [regl](https://github.com/regl-project/regl?tab=readme-ov-file) is JavaScript library.\n- Below is a recreation of this project, [regl-ladder](https://blocks.roadtolarissa.com/1wheel/0a58f8bf5a14f6a534b9043a9c63dd1d). Sample data is used.\n- [regl API](https://github.com/regl-project/regl/blob/master/API.md#from-a-container-div)","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"### Code interpretation","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"- 초기 data 를 attributes 각각의 x0, y1.. 으로 저장함 ➡️ 얘를 buffer로 대체하였음\n- time 값을 이용해서 보간인자가 증가하고, 이 보간인자는 1에 다다르면 다시 0이 되도록 설계됨\n- x축, y축으로의 이동을 보간인자를 이용하여 함. 즉, 계속 왼쪽 끝에서 다시 시작되도록 함.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"

\n \n

","pinned":true,"hidden":false,"mode":"md"},{"id":126,"value":"height = 520","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"## Draw SVG labels","pinned":false,"hidden":false,"mode":"md"},{"id":121,"value":"{\n const svg = d3\n .select(\"#svg\")\n // .append(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height);\n\n const arrayY = [\"group 0\", \"group 1\", \"group 2\", \"group 3\", \"group 4\"];\n\n // regl scale to svg scale\n const svgYScale = d3.scaleLinear().domain([-1, 1]).range([height, 0]);\n\n svg\n .selectAll(\"text\")\n .data(arrayY)\n .enter()\n .append(\"text\")\n .text((d) => d)\n .attr(\"x\", 800 + 15)\n .attr(\"y\", (d, i) => svgYScale(yScale(i)) - 15);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Draw REGL animation","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"drawREGL()","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"## Primitive ","pinned":false,"hidden":false,"mode":"md"},{"id":280,"value":"- **Primitive Types**: The primitive parameter can take several values, including \"points\", \"lines\", \"line strip\", \"line loop\", \"triangles\", \"triangle strip\", and \"triangle fan\".\n- **Usage of \"points\"**: When set to \"points\", each vertex is rendered as a single point. This is appropriate for particle systems or point cloud rendering.","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"data = d3.range(count).map((i) => {\n // 나머지 0 아니면 1\n var isB = i % 2; \n \n // (i / count)는 0에서 1 사이의 값을 가짐 -> 값이 일정하게 증가함\n var q = (isB ? bScale : wScale)(i / count); \n\n return {\n speed: Math.random() * 2 + 1,\n x: Math.random() * 2 - 1,\n y0: yScale(0), // y0 고정\n y1: yScale(q), // bScale or wScale 반환값에 따라 다름\n dy: Math.random() * 0.2,\n isB\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":260,"value":"data.map((d) => d.speed)","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"6 % 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"count = 20000 // 20000","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Scale","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"- `d3.scaleThreshold()` 는 특정 임계값(threshold)에 따라 값을 분류하는 데 사용됨\n- range의 길이는 domain의 길이보다 하나 많아야 함, 임계값 구간에 대한 range 반환위해\n- ex) 입력 값이 0 <= x < 0.21이면 출력은 0","pinned":false,"hidden":false,"mode":"md"},{"id":34,"value":"// determin y1 using yScale\n// 확률에 따라 0 - 4 값 반환\nbScale = d3\n .scaleThreshold()\n .domain([0.21, 0.42, 0.63, 0.83])\n .range([0, 1, 2, 3, 4])","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"d3.range([0.21, 0.42, 0.63, 0.83].length + 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"// determin y1 using yScale\n// 확률에 따라 0 - 4 값 반환\nwScale = d3\n .scaleThreshold()\n .domain([0.1, 0.2, 0.35, 0.6])\n .range([0, 1, 2, 3, 4])","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"// 0 - 4 값을 y축 값으로 반환\nyScale = d3.scaleLinear().domain([0, 4]).range([-0.8, 0.8])","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"## Library importing","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"- Rendering from a container div","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"// regl = await import(\"https://cdn.skypack.dev/regl@2\") // not working -> this is for rendering from a canvas\n// createREGL = require(\"https://npmcdn.com/regl/dist/regl.min.js\") // working\ncreateREGL = require(\"regl\") // working","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}