💻Coding 📐Design 🎨Art 😁Smile.
// =====================================
// write your own fragment shader below
// =====================================
fragShaderSource = `
precision highp float; // 声明float的精度
#define PI 3.14159265359
// 外部环境与shader单向通信的变量
uniform vec2 u_size; // 当前画布的尺寸
uniform float u_dpr; // 绘制环境的devicePixelRatio
// 定义一个函数
// value 待测值
// target 目标值
float smoothstep_filter(float value, float target){
return smoothstep(target - 0.01, target, value) - smoothstep(target, target + 0.01, value);
}
void main() {
float rate = 100.0 * u_dpr;
vec2 st = gl_FragCoord.xy / vec2(rate); // 减小画布坐标数值范围
vec3 color = vec3(0.0); // 黑色背景
vec3 line_color = vec3(38.0, 204.0, 213.0) / vec3(255.0);
float y = sin(st.x) + (u_size.y / rate) * 0.5; // 一个周期为2PI, 振幅为1的sin三角函数
// float y = tan(st.x) + (u_size.y / rate) * 0.5; // 一个周期为PI的tan三角函数
float percent = smoothstep_filter(st.y, y);
color = mix(color, line_color, percent);
gl_FragColor = vec4(color, 1.0);
}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
