Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Public
Edited
Jul 18, 2023
Paused
3 forks
15 stars
shader({
height: width / 2,
width,
invalidation,
iTime: true,
inputs: { rand: viewof rand },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/generative/snoise.glsl"
#include "lygia/generative/fbm.glsl`)
]
})`
uniform sampler2D u_buffer;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
vec3 color = vec3(0.0);
vec2 pixel = 2.0 / iResolution.xy;
st = ratio(st, iResolution.xy);
float n = fbm(vec3(st, iTime/10.));
color = vec3(st.x,st.y,abs(sin(iTime)));
color += n*rand ;
fragColor = vec4(color, 1.0);
}
`
viewof angle = Range([-90, 90], { value: -45, label: "angle" })
{
await visibility();
return shader({
height: width / 2,
width,
invalidation,
iTime: true,
inputs: { angle: viewof angle },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/space/rotate.glsl"
#include "lygia/draw/stroke.glsl"
#include "lygia/sdf/rectSDF.glsl`)
]
})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
st = ratio(st, iResolution.xy);
vec3 color = vec3(0.0);
vec2 pixel = 1.0 / iResolution.xy;
st = rotate(st,radians(angle))-.08;
for (int i = 0; i < 4; i++) {
float r = rectSDF(st, vec2(1.));
color += stroke(r, .19, .04);
st += .05;
}
fragColor = vec4(color, 1.0);
}
`;
}
{
await visibility();
return shader({
height: width / 2,
width,
invalidation,
iTime: true,
inputs: { angle: viewof angle },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/space/rotate.glsl"
#include "lygia/draw/stroke.glsl"
#include "lygia/draw/fill.glsl"
#include "lygia/sdf/rhombSDF.glsl
#include "lygia/sdf/circleSDF.glsl`)
]
})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
st = ratio(st, iResolution.xy);
vec3 color = vec3(0.0);
// color += rhombSDF(st);
color += circleSDF(st);
// color += fill(rhombSDF(st), .1,.1,.1);
color *= step(.5,rhombSDF(st));
fragColor = vec4(color, 1.0);
}
`;
}
{
await visibility();
return shader({
height: width,
width,
invalidation,
iTime: true,
inputs: { angle: viewof angle },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/space/rotate.glsl"
#include "lygia/draw/stroke.glsl"
#include "lygia/draw/tri.glsl"
#include "lygia/sdf/polySDF.glsl
#include "lygia/sdf/starSDF.glsl`)
]
})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
st = ratio(st, iResolution.xy);
vec3 color = vec3(0.0);
vec2 pixel = 1.0 / iResolution.xy;
st = rotate(st,radians(0.))-.08;
color += polySDF(st,12);
color += starSDF(st,5, .3);
fragColor = vec4(color, 1.0);
}
`;
}
viewof nleaves = Range([0.2, 100], { value: 20, label: "n" })
// https://github.com/patriciogonzalezvivo/PixelSpiritDeck/blob/master/00-elements/045-inner_truth.frag
{
await visibility();
return shader({
height: width / 2,
width,
invalidation,
iTime: true,
inputs: { nleaves: viewof nleaves },
sources: [
await resolveLygia(`
#include "lygia/math/const.glsl"
#include "lygia/space/ratio.glsl"
#include "lygia/space/rotate.glsl"
#include "lygia/draw/stroke.glsl"
#include "lygia/draw/fill.glsl"
#include "lygia/sdf/triSDF.glsl"
#include "lygia/sdf/rectSDF.glsl"`)
]
})`
uniform sampler2D u_buffer;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
st = ratio(st, iResolution.xy);
vec3 color = vec3(0.0);
vec2 pixel = 1.0 / iResolution.xy;
st -= .5;
float r = dot(st,st);
float a = (atan(st.y,st.x)/PI);
vec2 uv = vec2(a,r);
vec2 grid = vec2(5.,log(r)*nleaves);
vec2 uv_i = floor(uv*grid);
uv.x += .5*mod(uv_i.y,2.);
vec2 uv_f = fract(uv*grid);
float shape = max(triSDF(uv_f), triSDF(vec2(uv_f.x,1.-uv_f.y)));
color += fill(shape,.9) * step(.75,1.-r);
fragColor = vec4(color, 1.0);
}
`;
}
{
await visibility();
return shader({
height: width,
width,
invalidation,
iTime: true,
inputs: { rand: viewof rand },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/generative/snoise.glsl"
#include "lygia/generative/fbm.glsl"
#include "lygia/draw/stroke.glsl"
#include "lygia/sdf/circleSDF.glsl`)
]
})`
uniform sampler2D u_buffer;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
vec3 color = vec3(0.0);
vec2 pixel = 1.0 / iResolution.xy;
st = ratio(st, iResolution.xy);
float n = fbm(vec3(st, iTime/10.));
color = vec3(st.x,st.y,abs(sin(iTime)));
// color += n*rand ;
color += stroke(circleSDF(st), 0.5,0.1);
vec2 displacement = vec2(0.0);
displacement = texture2D(u_buffer, st).rg * 2.0 - 1.0;
fragColor = vec4(color, 1.0);
}
`;
}
{
await visibility();
return shader({
height: width,
width,
invalidation,
iTime: true,
inputs: { size: viewof size },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/generative/snoise.glsl"
#include "lygia/generative/fbm.glsl"
#include "lygia/draw/stroke.glsl"
#include "lygia/draw/fill.glsl"
#include "lygia/sdf/circleSDF.glsl"
#include "lygia/sdf/triSDF.glsl"
#include "lygia/sdf/flowerSDF.glsl"
#include "lygia/color/space/hsv2rgb.glsl"`)
]
})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
vec3 color = vec3(0.0);
st = ratio(st, iResolution.xy);
float n = 0.5 + snoise(vec3(st*3.0, iTime)) + 0.5;
color += hsv2rgb(vec3(n,1,0.8));
color += stroke(circleSDF(st),size,.1);
color += fill(flowerSDF(st.yx,3),1.0-size);
color -= fill(triSDF(vec2(st.x,.98-st.y)),.3);
fragColor = vec4(color, 1.0);
}
`;
}
{
await visibility();
return shader({
height: width / 3,
width,
invalidation,
iTime: true,
inputs: { rand: viewof rand },
sources: [
await resolveLygia(`
#include "lygia/space/ratio.glsl"
#include "lygia/math/decimation.glsl"
#include "lygia/draw/circle.glsl"
#include "lygia/draw/fill.glsl"`)
]
})`
precision highp float;
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy / iResolution.xy ;
vec3 color = vec3(0.0);
st = ratio(st,iResolution.xy);
color = vec3(st.x,st.y,abs(sin(iTime)));
color = decimation(color, 20.);
color += circle(st, .5, .1);
fragColor = vec4(color, 1.0);
}
`;
}
import { shader } from "@mbostock/shader"
import { Range } from "@observablehq/inputs"
import { button } from "@radames/clipboard-button"
async function resolveLygia(lines) {
if (!Array.isArray(lines)) {
lines = lines.split(/\r?\n/);
}
let src = "";
const response = await Promise.all(
lines.map(async (line, i) => {
const line_trim = line.trim();
if (line_trim.startsWith('#include "lygia')) {
let include_url = line_trim.substring(15);
include_url =
"https://lygia.xyz" + include_url.replace(/\"|\;|\s/g, "");
// src += '#ifndef PLATFORM_WEBGL\n' +
// '#define PLATFORM_WEBGL\n'
// '#endif\n';
return fetch(include_url).then((res) => res.text());
} else {
return line;
}
})
);
return response.join("\n");
}
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.
