100 | const regl = createREGL({
101 | extensions: ['ANGLE_instanced_arrays']
102 | });
103 |
104 | // Instantiate a command for drawing lines
105 | const drawLines = reglLines(regl, {
106 | vert: `
107 | precision highp float;
108 |
109 | // Use a vec2 attribute to construt the vec4 vertex position
110 | #pragma lines: attribute vec2 xy;
111 | #pragma lines: position = getPosition(xy);
112 | vec4 getPosition(vec2 xy) {
113 | return vec4(xy, 0, 1);
114 | }
115 |
116 | // Return the line width from a uniorm
117 | #pragma lines: width = getWidth();
118 | uniform float width;
119 | float getWidth() {
120 | return width;
121 | }`,
122 | frag: `
123 | precision lowp float;
124 | void main () {
125 | gl_FragColor = vec4(1);
126 | }`,
127 |
128 | // Multiply the width by the pixel ratio for consistent width
129 | uniforms: {
130 | width: (ctx, props) => ctx.pixelRatio * props.width
131 | },
132 | });
133 |
134 | // Construct an array of xy pairs
135 | const n = 11;
136 | const xy = [...Array(n).keys()]
137 | .map(i => (i / (n - 1) * 2.0 - 1.0) * 0.8)
138 | .map(t => [t, 0.5 * Math.sin(8.0 * t)]);
139 |
140 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
141 | // them on every draw call.
142 | const lineData = {
143 | width: 30,
144 | join: 'round',
145 | cap: 'round',
146 | vertexCount: xy.length,
147 | vertexAttributes: { xy: regl.buffer(xy) },
148 | endpointCount: 2,
149 | endpointAttributes: { xy: regl.buffer([xy.slice(0, 3), xy.slice(-3).reverse()]) }
150 | };
151 |
152 | function draw () {
153 | regl.poll();
154 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
155 | drawLines(lineData);
156 | }
157 |
158 | draw();
159 | window.addEventListener('resize', draw);
160 |
161 |
141 | const regl = createREGL({
142 | extensions: ['ANGLE_instanced_arrays']
143 | });
144 |
145 | // Instantiate a command for drawing lines
146 | const drawLines = reglLines(regl, {
147 | vert: `
148 | precision highp float;
149 |
150 | #pragma lines: attribute vec2 xy;
151 |
152 | // Assign a function for computing the vec4 position
153 | #pragma lines: position = getPosition(xy);
154 |
155 | // Assign a function for computing the float width
156 | #pragma lines: width = getWidth(xy);
157 |
158 | uniform float width;
159 | uniform vec2 translate, scale;
160 |
161 | // Implement the functions above
162 | vec4 getPosition(vec2 xy) { return vec4(xy * scale + translate, 0, 1); }
163 | float getWidth(vec2 xy) { return width; }
164 | float getX(vec2 xy) { return xy.x; }`,
165 | frag: `
166 | precision highp float;
167 | varying vec3 lineCoord;
168 | uniform float width, borderWidth;
169 | void main () {
170 | // Convert the line coord into an SDF
171 | float sdf = length(lineCoord.xy) * width;
172 |
173 | vec3 borderColor = 0.5 + 0.5 * vec3(lineCoord.xy, 0);
174 |
175 | // Apply a border with 1px transition
176 | gl_FragColor = vec4(
177 | mix(vec3(0), borderColor, smoothstep(width - borderWidth - 1.0, width - borderWidth + 1.0, sdf)),
178 | 1);
179 | }`,
180 |
181 | // Additional regl command properties are valid
182 | uniforms: {
183 | width: (ctx, props) => ctx.pixelRatio * props.width,
184 | borderWidth: (ctx, props) => ctx.pixelRatio * props.borderWidth,
185 | translate: regl.prop('translate'),
186 | scale: regl.prop('scale')
187 | },
188 | depth: {enable: false}
189 | });
190 |
191 | // Construct an array of xy pairs
192 | const n = 11;
193 | const xy = [...Array(n).keys()]
194 | .map(i => (i / (n - 1) * 2.0 - 1.0) * 0.8)
195 | .map(t => [t, 0.5 * Math.sin(54.0 * t)]);
196 |
197 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
198 | // them on every draw call.
199 | const lineData = {
200 | vertexCount: xy.length,
201 | vertexAttributes: {
202 | xy: regl.buffer(xy)
203 | },
204 | endpointCount: 2,
205 | endpointAttributes: {
206 | xy: regl.buffer([xy.slice(0, 3), xy.slice(-3).reverse()])
207 | },
208 |
209 | width: 35,
210 | borderWidth: 10,
211 | miterLimit: 3.0,
212 | scale: [1, 1]
213 | };
214 |
215 | window.addEventListener('mousemove', e => {
216 | lineData.scale = [
217 | e.offsetX / window.innerWidth * 2 - 1,
218 | -e.offsetY / window.innerHeight * 2 + 1
219 | ];
220 | draw();
221 | });
222 |
223 |
224 | function draw () {
225 | regl.poll();
226 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
227 | drawLines([{
228 | ...lineData,
229 | translate: [0, -0.4],
230 | cap: 'round',
231 | join: 'round'
232 | }, {
233 | ...lineData,
234 | translate: [0, 0.4],
235 | cap: 'round',
236 | join: 'miter'
237 | }]);
238 | }
239 |
240 | draw();
241 | window.addEventListener('resize', draw);
242 |
243 |
111 | const regl = createREGL({extensions: ['ANGLE_instanced_arrays']});
112 |
113 | const drawLines = reglLines(regl, {
114 | vert: `
115 | precision highp float;
116 |
117 | #pragma lines: attribute vec2 xy;
118 | #pragma lines: position = getPosition(xy);
119 | #pragma lines: width = getWidth(xy);
120 |
121 | uniform vec2 aspect;
122 |
123 | vec4 getPosition(vec2 xy) { return vec4(xy * aspect, 0, 1); }
124 | float getWidth(vec2 xy) { return 50.0; }
125 | `,
126 | frag: `
127 | precision lowp float;
128 | void main () {
129 | gl_FragColor = vec4(vec3(1), 0.5);
130 | }`,
131 | uniforms: {
132 | aspect: ctx => [1, ctx.framebufferWidth / ctx.framebufferHeight]
133 | },
134 | blend: {
135 | enable: true,
136 | func: {
137 | srcRGB: 'src alpha',
138 | srcAlpha: 1,
139 | dstRGB: 'one minus src alpha',
140 | dstAlpha: 1
141 | }
142 | },
143 | depth: {
144 | enable: false
145 | }
146 | });
147 |
148 | // A seven-sided star
149 | const n = 7;
150 |
151 | // Except we repeat the first three vertices again at the end. This
152 | // results in a closed shape with correct joins.
153 | const xy = [...Array(n + 3).keys()]
154 | .map(i => i / n)
155 | .map(t => {
156 | const theta = t * Math.PI * 2 * 2;
157 | const r = 0.7;
158 | return [
159 | r * Math.cos(theta),
160 | r * Math.sin(theta)
161 | ];
162 | });
163 |
164 | // Exclude endpointAttributes since there are no end caps to draw in
165 | // this case.
166 | const lineData = {
167 | join: 'round',
168 | vertexCount: xy.length,
169 | vertexAttributes: {
170 | xy: regl.buffer(xy)
171 | },
172 | };
173 |
174 | function draw () {
175 | regl.poll();
176 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
177 | drawLines(lineData);
178 | }
179 |
180 | draw();
181 | window.addEventListener('resize', draw);
182 |
183 |
124 | const regl = createREGL({
125 | extensions: ['ANGLE_instanced_arrays'],
126 | attributes: {antialias: false}
127 | });
128 |
129 | // Instantiate a command for drawing lines
130 | const drawLines = reglLines(regl, {
131 | vert: `
132 | precision highp float;
133 |
134 | uniform float width, time, phase;
135 |
136 | #pragma lines: attribute float x;
137 | #pragma lines: position = getPosition(x);
138 | vec4 getPosition(float x) {
139 | float theta = 3.141 * (6.0 * x + time) - phase;
140 | return vec4(
141 | 0.5 * vec3(
142 | cos(theta),
143 | (x * 2.0 - 1.0) * 1.5,
144 | sin(theta)
145 | ),
146 | 1
147 | );
148 | }
149 |
150 | // Return the line width from a uniorm
151 | #pragma lines: width = getWidth();
152 | float getWidth() {
153 | return width;
154 | }`,
155 | frag: `
156 | precision highp float;
157 | uniform float width, borderWidth;
158 | uniform vec3 color;
159 | varying vec3 lineCoord;
160 | void main () {
161 | // Convert the line coord into an SDF
162 | float sdf = length(lineCoord.xy) * width;
163 |
164 | // Apply a border with 1px transition
165 | gl_FragColor = vec4(
166 | mix(color, vec3(1), smoothstep(width - borderWidth - 0.5, width - borderWidth + 0.5, sdf)),
167 | 1);
168 | }`,
169 |
170 | // Multiply the width by the pixel ratio for consistent width
171 | uniforms: {
172 | width: (ctx, props) => ctx.pixelRatio * props.width,
173 | borderWidth: (ctx, props) => ctx.pixelRatio * props.borderWidth,
174 | time: regl.context('time'),
175 | phase: regl.prop('phase'),
176 | color: regl.prop('color')
177 | },
178 |
179 | depth: {enable: true}
180 | });
181 |
182 | const n = 101;
183 | const x = [...Array(n).keys()].map(i => i / (n - 1));
184 |
185 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
186 | // them on every draw call.
187 | const lineData = {
188 | width: 30,
189 | join: 'round',
190 | cap: 'round',
191 | joinResolution: 1,
192 | vertexCount: x.length,
193 | vertexAttributes: { x: regl.buffer(x) },
194 | endpointCount: 2,
195 | endpointAttributes: { x: regl.buffer([x.slice(0, 3), x.slice(-3).reverse()]) },
196 | borderWidth: 5
197 | };
198 |
199 | regl.frame(() => {
200 | regl.poll();
201 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
202 | drawLines([
203 | {...lineData, phase: 0, color: [0.5, 1, 0]},
204 | {...lineData, phase: Math.PI / 2, color: [0, 0.5, 1]},
205 | {...lineData, phase: Math.PI, color: [1, 0, 0.5]}
206 | ]);
207 | });
208 |
209 |
112 | const regl = createREGL({
113 | extensions: ['ANGLE_instanced_arrays']
114 | });
115 |
116 | // Instantiate a command for drawing lines
117 | const drawLines = reglLines(regl, {
118 | vert: `
119 | precision highp float;
120 |
121 | // Use a vec2 attribute to construt the vec4 vertex position
122 | #pragma lines: instance attribute float shift;
123 | #pragma lines: attribute vec2 xy;
124 | #pragma lines: position = getPosition(xy, shift);
125 | vec4 getPosition(vec2 xy, float shift) {
126 | return vec4(xy + vec2(0, shift), 0, 1);
127 | }
128 |
129 | // Return the line width from a uniform
130 | #pragma lines: width = getWidth();
131 | uniform float width;
132 | float getWidth() {
133 | return width;
134 | }`,
135 | frag: `
136 | precision lowp float;
137 | void main () {
138 | gl_FragColor = vec4(1);
139 | }`,
140 |
141 | // Multiply the width by the pixel ratio for consistent width
142 | uniforms: {
143 | width: (ctx, props) => ctx.pixelRatio * props.width
144 | },
145 | });
146 |
147 | // Construct an array of xy pairs
148 | const n = 11;
149 | const xy = [...Array(n).keys()]
150 | .map(i => (i / (n - 1) * 2.0 - 1.0) * 0.8)
151 | .map(t => [t, 0.1 * Math.sin(8.0 * t)]);
152 |
153 | const shift = regl.buffer(
154 | [...Array(n).keys()].map(() => [-0.5, -0.25, 0, 0.25, 0.5])
155 | );
156 |
157 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
158 | // them on every draw call.
159 | const lineData = {
160 | width: 10,
161 | join: 'round',
162 | cap: 'round',
163 | vertexCount: xy.length,
164 | vertexAttributes: {
165 | xy: regl.buffer(xy),
166 | shift
167 | },
168 | endpointCount: 2,
169 | endpointAttributes: {
170 | xy: regl.buffer([xy.slice(0, 3), xy.slice(-3).reverse()]),
171 | shift,
172 | },
173 | instances: 5,
174 | };
175 |
176 | function draw () {
177 | regl.poll();
178 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
179 | drawLines(lineData);
180 | }
181 |
182 | draw();
183 | window.addEventListener('resize', draw);
184 |
185 |
129 | const regl = createREGL({
130 | extensions: ['ANGLE_instanced_arrays']
131 | });
132 |
133 | // Instantiate a command for drawing lines
134 | const drawLines = reglLines(regl, {
135 | vert: `
136 | precision highp float;
137 |
138 | uniform float width, phase;
139 | uniform vec2 aspect;
140 |
141 | #pragma lines: attribute float theta;
142 | #pragma lines: position = torusKnot(theta);
143 | vec4 torusKnot(float theta) {
144 | const float p = 3.0;
145 | const float q = 5.0;
146 | float r = cos(q * theta) + 2.0;
147 | float phi = p * (theta - phase);
148 | return vec4(
149 | vec3(
150 | aspect * r * vec2(cos(phi), sin(phi)),
151 | -sin(q * theta)
152 | ) * 0.25,
153 | 1
154 | );
155 | }
156 |
157 | // Return the line width from a uniform
158 | #pragma lines: width = getWidth();
159 | float getWidth() { return width; }`,
160 | frag: `
161 | precision highp float;
162 | uniform float width, borderWidth, pixelRatio;
163 | uniform vec3 color;
164 | varying vec3 lineCoord;
165 | void main () {
166 | // Convert the line coord into an SDF
167 | float sdf = length(lineCoord.xy) * width;
168 |
169 | // Apply a border with 1px transition
170 | gl_FragColor = vec4(
171 | mix(color, vec3(1),
172 | smoothstep(
173 | width - borderWidth - 0.5 / pixelRatio,
174 | width - borderWidth + 0.5 / pixelRatio,
175 | sdf
176 | )
177 | ), 1);
178 | }`,
179 |
180 | // Multiply the width by the pixel ratio for consistent width
181 | uniforms: {
182 | pixelRatio: regl.context('pixelRatio'),
183 | aspect: ctx => ctx.viewportWidth > ctx.viewportHeight
184 | ? [ctx.viewportHeight / ctx.viewportWidth, 1]
185 | : [1, ctx.viewportWidth / ctx.viewportHeight],
186 | width: (ctx, props) => Math.min(ctx.viewportWidth, ctx.viewportHeight) / 30,
187 | borderWidth: (ctx, props) => Math.min(ctx.viewportWidth, ctx.viewportHeight) / (30 * 4),
188 | phase: regl.prop('phase'),
189 | color: regl.prop('color')
190 | },
191 |
192 | depth: {enable: true}
193 | });
194 |
195 | const n = 501;
196 |
197 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
198 | // them on every draw call.
199 | const lineData = {
200 | join: 'round',
201 | vertexCount: n + 3,
202 | vertexAttributes: {
203 | theta: regl.buffer([...Array(n + 3).keys()].map(i => i / n * Math.PI * 2))
204 | },
205 | };
206 |
207 | function draw() {
208 | regl.poll();
209 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
210 | drawLines([
211 | {...lineData, phase: 0, color: [1, 0, 0.5]},
212 | {...lineData, phase: Math.PI, color: [0, 0.5, 1]},
213 | ]);
214 | }
215 |
216 | draw();
217 | window.addEventListener('resize', draw);
218 |
219 |
114 | const regl = createREGL({extensions: ['ANGLE_instanced_arrays']});
115 |
116 | const drawLines = reglLines(regl, {
117 | vert: `
118 | precision highp float;
119 |
120 | #pragma lines: attribute vec2 xy;
121 | #pragma lines: position = getPosition(xy);
122 | #pragma lines: width = getWidth();
123 | #pragma lines: varying vec2 pos = getXY(xy);
124 |
125 | vec4 getPosition(vec2 xy) {
126 | return vec4(xy, 0, 1);
127 | }
128 | float getWidth() { return 40.0; }
129 | vec2 getXY(vec2 xy) { return xy; }`,
130 | frag: `
131 | precision lowp float;
132 | varying vec2 pos;
133 | void main () {
134 | // Convert the x-coordinate into a color
135 | gl_FragColor = vec4(0.6 + 0.4 * cos(8.0 * (pos.x - vec3(0, 1, 2) * 3.141 / 3.0)), 0.7);
136 | }`,
137 | // Turn off depth and turn on blending to make it very clear if we accidentally
138 | // draw end caps twice
139 | depth: { enable: false },
140 | cull: {enable: true, face: 'back'},
141 | blend: {
142 | enable: true,
143 | func: { srcRGB: "src alpha", srcAlpha: 1, dstRGB: "one minus src alpha", dstAlpha: 1 }
144 | },
145 | });
146 |
147 | const n = 31;
148 | const lineCount = 10;
149 |
150 | function xy (line, i) {
151 | let t = (i / (n - 1) * 2 - 1) * 0.9;
152 | const y = ((line + 0.5) / lineCount * 2 - 1) * 0.9;
153 | return [t, y + 1 / lineCount * Math.sin((t - line * 0.1) * 8.0)];
154 | }
155 |
156 | // Start with a break in order to signal a cap
157 | const positions = [[NaN, NaN]];
158 |
159 | for (let line = 0; line < lineCount; line++) {
160 | for (let i = 0; i < n; i++) {
161 | positions.push(xy(line, i));
162 | }
163 | // Signal a cap after each line
164 | positions.push([NaN, NaN]);
165 | }
166 |
167 | // After this, render as normal!
168 | const lineData = {
169 | // Trigger the command to automatically insert caps at any break, signaled by a position with (w = 0)
170 | insertCaps: true,
171 |
172 | join: 'round',
173 | cap: 'round',
174 | vertexCount: positions.length,
175 | vertexAttributes: {
176 | xy: regl.buffer(positions),
177 | },
178 | };
179 |
180 | function draw () {
181 | regl.poll();
182 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
183 | drawLines(lineData);
184 | }
185 |
186 | draw();
187 | window.addEventListener('resize', draw);
188 |
189 |
63 | module.exports = createNumberCanvas;
64 |
65 | function createNumberCanvas (size) {
66 | const canvas = document.createElement('canvas');
67 | const img = document.createElement('img');
68 | const ctx = canvas.getContext('2d');
69 | canvas.width = 10 * size;
70 | canvas.height = size;
71 | ctx.font = `${size}px monospace`;
72 | ctx.fillStyle = '#000';
73 | ctx.fillRect(0, 0, size * 10, size);
74 | ctx.fillStyle = '#fff';
75 | ctx.textAlign = 'center';
76 | ctx.textBaseline = 'middle';
77 | for (let i = 0; i < 10; i++) {
78 | ctx.fillText(i, (i + 0.5) * size, size * 0.5);
79 | }
80 |
81 | const returnValue = new Promise(resolve => {
82 | img.onload = () => resolve(img);
83 | });
84 | img.src = canvas.toDataURL();
85 | return returnValue;
86 | }
87 |
88 |
131 | const regl = createREGL({
132 | extensions: ['ANGLE_instanced_arrays']
133 | });
134 | const mat4 = glMatrix.mat4;
135 |
136 | // This example illustrates the postproject property. You may specify a function to be applied
137 | // *after* screne-space projection. Together with providing viewportSize, this allows you to
138 | // draw lines in whatever viewport you desire, then to project them to the screen. This useful,
139 | // for example, when drawing lines on a flat surface. It changes nothing if the lines are not
140 | // on a flat surface, though the joins may not look particularly good in the out-of-plane
141 | // dimension.
142 | const drawLines = reglLines(regl, {
143 | vert: `
144 | precision highp float;
145 |
146 | // Use a vec2 attribute to construt the vec4 vertex position
147 | #pragma lines: attribute vec2 position;
148 | #pragma lines: position = getPosition(position);
149 | vec4 getPosition(vec2 position) {
150 | return vec4(position, 0, 1);
151 | }
152 |
153 | // Return the line width from a uniorm
154 | #pragma lines: width = getWidth();
155 | uniform float width;
156 | float getWidth() {
157 | return width;
158 | }
159 |
160 | // Specify a projection function
161 | #pragma lines: postproject = postprojectPosition;
162 | uniform mat4 projectionView;
163 | vec4 postprojectPosition(vec4 position) {
164 | return projectionView * position;
165 | }
166 | `,
167 | frag: `
168 | precision lowp float;
169 | void main () {
170 | gl_FragColor = vec4(1);
171 | }`,
172 |
173 | // Multiply the width by the pixel ratio for consistent width
174 | uniforms: {
175 | width: (ctx, props) => ctx.pixelRatio * props.width,
176 | projectionView: (ctx, props) => {
177 | //const aspect = ctx.viewportWidth / ctx.viewportHeight;
178 | const aspect = 2;
179 | const projection = mat4.perspective(mat4.create(), Math.PI / 4, aspect, 0.01, 10.0);
180 | const theta = ctx.time * 0.5;
181 | const r = 1.8;
182 | const eye = [
183 | r * Math.cos(theta),
184 | r * Math.sin(theta),
185 | 0.5
186 | ];
187 | const center = [0, 0, 0];
188 | const up = [0, 0, 1];
189 | const view = mat4.lookAt(mat4.create(), eye, center, up);
190 | return mat4.multiply(projection, projection, view);
191 | }
192 | },
193 | });
194 |
195 | // Construct an array of xy pairs
196 | const n = 501;
197 | const position = [...Array(n + 3).keys()]
198 | .map(i => i / n * Math.PI * 2)
199 | .map(t => {
200 | const r = 0.6 + 0.4 * Math.cos(t * 7.0);
201 | return [r * Math.cos(t), r * Math.sin(t)]
202 | });
203 |
204 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
205 | // them on every draw call.
206 | const lineData = {
207 | width: 0.03,
208 | join: 'round',
209 | cap: 'round',
210 | vertexCount: position.length,
211 | vertexAttributes: { position: regl.buffer(position) },
212 |
213 | // Screen-project in the 1 x 1 unit square. Since this size is divided out before
214 | // post-projection, this only affects interpretation of "widthV.
215 | viewportSize: [1, 1]
216 | };
217 |
218 | regl.frame(() => {
219 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
220 | drawLines(lineData);
221 | });
222 |
223 |
113 | const regl = createREGL({
114 | extensions: ['ANGLE_instanced_arrays']
115 | });
116 |
117 | // Instantiate a command for drawing lines
118 | const drawLines = reglLines(regl, {
119 | vert: `
120 | precision highp float;
121 |
122 | #pragma lines: attribute vec2 xy;
123 |
124 | // Assign a function for computing the vec4 position
125 | #pragma lines: position = getPosition(xy);
126 |
127 | // Assign a function for computing the float width
128 | #pragma lines: width = getWidth(xy);
129 |
130 | // Compute a varying value from the input attribute
131 | #pragma lines: varying float x = getX(xy);
132 |
133 | uniform float width;
134 |
135 | // Implement the functions above
136 | vec4 getPosition(vec2 xy) { return vec4(xy, 0, 1); }
137 | float getWidth(vec2 xy) { return width * (0.5 + 0.4 * cos(16.0 * xy.x)); }
138 | float getX(vec2 xy) { return xy.x; }`,
139 | frag: `
140 | precision lowp float;
141 | varying float x;
142 | void main () {
143 | gl_FragColor = vec4(0.5 + cos(8.0 * (x - vec3(0, 1, 2) * 3.141 / 3.0)), 1);
144 | }`,
145 |
146 | // Additional regl command properties are valid
147 | uniforms: {
148 | width: regl.prop('width')
149 | },
150 |
151 | depth: {enable: false}
152 | });
153 |
154 | // Construct an array of xy pairs
155 | const n = 101;
156 | const xy = [...Array(n).keys()]
157 | .map(i => (i / (n - 1) * 2.0 - 1.0) * 0.8)
158 | .map(t => [t, 0.5 * Math.sin(8.0 * t)]);
159 |
160 | // Set up the data to be drawn. Note that we preallocate buffers and don't create
161 | // them on every draw call.
162 | const lineData = {
163 | join: 'round',
164 | cap: 'round',
165 | vertexCount: xy.length,
166 | vertexAttributes: {
167 | xy: regl.buffer(xy)
168 | },
169 | endpointCount: 2,
170 | endpointAttributes: {
171 | xy: regl.buffer([xy.slice(0, 3), xy.slice(-3).reverse()])
172 | },
173 |
174 | // Picked up by regl.prop('width')
175 | width: 50
176 | };
177 |
178 | function draw () {
179 | regl.poll();
180 | regl.clear({color: [0.2, 0.2, 0.2, 1]});
181 | drawLines(lineData);
182 | }
183 |
184 | draw();
185 | window.addEventListener('resize', draw);
186 |
187 |
37 | ${content}
38 |