2e:null 2f:["$","title",null,{"children":"Hello, shader-doodle | Jeremy Ashkenas | Observable"}] 34:Td17,html` #define MAX_STEPS 100 #define MAX_DIST 100 #define SURF_DIST .01 #define PI 3.14159 mat2 m2 = mat2(0.8, 0.6, -0.6, 0.8); mat2 im2 = mat2(0.8, -0.6, 0.6, 0.8); float smoothMin( float a, float b, float k ) { float h = clamp( 0.5+0.5*(b-a)/k, 0.0, 1.0 ); return mix( b, a, h ) - k*h*(1.0-h); } float GetDist(vec3 p) { vec4 s = vec4(0,2,4,.5); vec4 s2 = vec4(0,2,4.5,.5); vec4 s3 = vec4(0,2,5,.5); vec4 s4 = vec4(0,2,5.5,.5); vec4 s5 = vec4(0,2,6,.5); vec4 s6 = vec4(0,2,6.5,.5); vec4 s7 = vec4(0,2,7,.5); s.xy+=vec2(sin(iTime/.25), cos(iTime/.25)); s2.xy+=vec2(sin(iTime/.35), cos(iTime/.35)); s3.xy+=vec2(sin(iTime/.45), cos(iTime/.45)); s4.xy+=vec2(sin(iTime/.55), cos(iTime/.55)); s5.xy+=vec2(sin(iTime/.65), cos(iTime/.65)); s6.xy+=vec2(sin(iTime/.75), cos(iTime/.75)); s7.xy+=vec2(sin(iTime/.85), cos(iTime/.85)); float sphereDist = length(p-s.xyz) - s.w; float sphereDist2 = length(p-s2.xyz) - s2.w; float sphereDist3 = length(p-s3.xyz) - s3.w; float sphereDist4 = length(p-s4.xyz) - s4.w; float sphereDist5 = length(p-s5.xyz) - s5.w; float sphereDist6 = length(p-s6.xyz) - s6.w; float sphereDist7 = length(p-s7.xyz) - s7.w; float planeDist = p.y; float d = smoothMin(planeDist, sphereDist, 0.4); d = smoothMin(d, sphereDist2, 0.5); d = smoothMin(d, sphereDist3, 0.5); d = smoothMin(d, sphereDist4, 0.5); d = smoothMin(d, sphereDist5, 0.5); d = smoothMin(d, sphereDist6, 0.5); d = smoothMin(d, sphereDist7, 0.5); return d; } float RayMarch(vec3 ro, vec3 rd) { float dO = 0.; for (int i = 0; i < MAX_STEPS; i++) { vec3 p = ro+rd * dO; float dS = GetDist(p); dO += dS; if(int(dO) > MAX_STEPS || dS < SURF_DIST) break; } return dO; } float noise(in vec2 p){ float res=0.; float f=1.; for( int i=0; i< 3; i++ ) { p=m2*p*f+.6; f*=1.2; res+=sin(p.x+sin(2.*p.y)); } return res/3.; } float fbmabs( vec2 p ) { float f=1.; float r = 0.0; for(int i = 0;i<8;i++){ r += abs(noise( p*f )+.5)/f; f *=2.; p=im2*p; } return 1.-r*.5; } vec3 GetNormal (vec3 p) { float d = GetDist(p); vec2 e = vec2(.01,0); vec3 n = d - vec3( GetDist(p-e.xyy), GetDist(p-e.yxy), GetDist(p-e.yyx)); return normalize(n); } float GetLight (vec3 p) { vec3 lightPos = vec3(1,5,6); lightPos.xz += vec2(sin(iTime), cos(iTime)); vec3 l = normalize(lightPos - p); vec3 n = GetNormal(p); float dif = clamp(dot(n,l), 0.,1.); float d = RayMarch(p+n*SURF_DIST,l); if (d < length(lightPos-p)) { dif *=.1; } return dif; } //courtesy of https://www.shadertoy.com/view/4l23Rh vec3 sky(in vec2 p) { return sin(vec3(1.7,1.5,1)+ .7+ .9*fbmabs(p*4.-.02*iTime))+.25; } void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = (fragCoord.xy-.5*iResolution.xy) / iResolution.y; vec3 color = vec3(0); vec3 ro = vec3(0,1,0); vec3 rd = normalize(vec3(uv.x, uv.y, 1)); float d = RayMarch(ro, rd); vec3 p = ro + rd * d; float dif = GetLight(p); color = vec3(dif); color += sky(rd.xz*(.2+rd.y)); gl_FragColor = vec4(color, 1.0); } `35:T602,html` `36:[] 32:{"id":"92d105eac52aae16","slug":"hello-shader-doodle","title":"Hello, shader-doodle","thumbnail":"0cc5c60f0101525fe26c8b9e4d2ffd0b111d61ab6fc02afb76ee51d4697caae2","access_level":"public","create_time":"$D2020-04-11T19:09:59.469Z","update_time":"$D2020-04-11T19:21:35.596Z","view_time":null,"first_public_time":"$D2020-04-11T19:21:42.962Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":"starter_2024"},"version":55,"publish_version":55,"role":null,"authored":false,"authors":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null}],"members":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Hello, shader-doodle","cells":[{"id":0,"value":"md`# Hello, \\`shader-doodle\\`\n\n\\`\\` is a WebComponent that implements a responsive canvas for drawing fragment shaders, giving you [some handy built-ins](https://www.npmjs.com/package/shader-doodle#api).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`Simple demo [from the docs](https://www.npmjs.com/package/shader-doodle):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"html`\n void main() {\n vec2 st = gl_FragCoord.xy / u_resolution.xy;\n vec3 color = vec3(st.x, st.y, abs(sin(u_time)));\n gl_FragColor = vec4(color, 1.0);\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`Balls deep [from Michael Hazani](https://codepen.io/mhazani/pen/VwwQYvE):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`Rainbow woozy [from halvves](https://codepen.io/halvves/pen/WNbgvNx):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"require('shader-doodle')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"