27:null 28:["$","title",null,{"children":"Rainbow Gradient Shader | Douglas Paul | Observable"}] 2d:T5b9,shader({ width, height: 200, inputs: { redAmplitude: viewof redAmplitude, greenAmplitude: viewof greenAmplitude, blueAmplitude: viewof blueAmplitude, redPeak: viewof redPeak, greenPeak: viewof greenPeak, bluePeak: viewof bluePeak, redWidth: viewof redWidth, greenWidth: viewof greenWidth, blueWidth: viewof blueWidth } })` const float PI = 3.1415926535897932384626433832795; float inverse_smoothstep(float from, float to, float x) { if (x <= from) { return 0.0; } else if (x >= to) { return 1.0; } float m = to - from; return 0.5 - sin(asin(1.0 - 2.0*(x - from)/m)/3.0); } float fade_out(float t) { return 1.0 - 2.0 * asin(t) / PI; } float colorCurve(in float amplitude, in float peakPos, in float peakWidth, in vec2 st) { if (st.y > amplitude) { return 0.0; } float halfPeakWidth = inverse_smoothstep(0.0,1.0,1.0-st.y/amplitude) * peakWidth / 2.0; float nominal_result = (smoothstep(peakPos-halfPeakWidth, peakPos, st.x) - smoothstep(peakPos, peakPos+halfPeakWidth, st.x)); return amplitude * fade_out(st.y/amplitude) * nominal_result; } void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 st = fragCoord.xy / iResolution.xy; fragColor.r = colorCurve(redAmplitude, redPeak, redWidth, st); fragColor.g = colorCurve(greenAmplitude, greenPeak, greenWidth, st); fragColor.b = colorCurve(blueAmplitude, bluePeak, blueWidth, st); fragColor.a = 1.0; }`2e:[] 2b:{"id":"2fad1ac7fcc68232","slug":null,"title":"Rainbow Gradient Shader","thumbnail":"0ff12bfef6317fe875d67e1abe01115382151d7ed50f434117c94e09248077ba","access_level":"public","create_time":"$D2024-02-11T15:19:10.908Z","update_time":"$D2024-02-12T01:11:56.493Z","view_time":null,"first_public_time":"$D2024-02-11T15:19:10.908Z","has_unpublished_edits":null,"fork":{"id":"ee1708b80be94523","slug":"webgl-shader","title":"WebGL Shader","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"d51adc4f8943cb47","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":"starter_2024"},"version":270,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"99f7306286aecde4","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":null}],"members":[{"type":"individual","id":"99f7306286aecde4","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":null,"role":"editor"},{"type":"team","id":"d51adc4f8943cb47","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Rainbow Gradient Shader","cells":[{"id":0,"value":"# Rainbow Gradient Shader","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"html`

\n${Inputs.bind(\n Inputs.range([0, 1], { step: 0.01, label: \"Red:\" }),\n viewof redAmplitude\n)}\n${Inputs.bind(\n Inputs.range([0, 1], { step: 0.01, label: \"peak:\" }),\n viewof redPeak\n)}\n${Inputs.bind(\n Inputs.range([0, 4], { step: 0.01, label: \"width:\" }),\n viewof redWidth\n)}\n

\n${Inputs.bind(\n Inputs.range([0, 1], { step: 0.01, label: \"Green:\" }),\n viewof greenAmplitude\n)}\n${Inputs.bind(\n Inputs.range([0, 1], { step: 0.01, label: \"peak:\" }),\n viewof greenPeak\n)}\n${Inputs.bind(\n Inputs.range([0, 4], { step: 0.01, label: \"width:\" }),\n viewof greenWidth\n)}\n

\n${Inputs.bind(\n Inputs.range([0, 1], { step: 0.01, label: \"Blue:\" }),\n viewof blueAmplitude\n)}\n${Inputs.bind(\n Inputs.range([0, 1], { step: 0.01, label: \"peak:\" }),\n viewof bluePeak\n)}\n${Inputs.bind(\n Inputs.range([0, 4], { step: 0.01, label: \"width:\" }),\n viewof blueWidth\n)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"## Support","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"viewof redAmplitude = Inputs.input(1.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof greenAmplitude = Inputs.input(1.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof blueAmplitude = Inputs.input(1.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof redPeak = Inputs.input(0.00)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"viewof greenPeak = Inputs.input(0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof bluePeak = Inputs.input(1.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof redWidth = Inputs.input(2.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof greenWidth = Inputs.input(1.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof blueWidth = Inputs.input(2.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"import {shader} from \"@mbostock/shader\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"