27:null 28:["$","title",null,{"children":"RGB Sine Waves | Douglas Paul | Observable"}] 2d:T571,html`

Red ${Inputs.bind( Inputs.range([0, 1], { label: "amplitude:", step: 0.01 }), viewof redAmplitude )} ${Inputs.bind( Inputs.range([0, 1], { label: "phase:", step: 0.01 }), viewof redPhase )} ${Inputs.bind( Inputs.range([1.0, 25.0], { label: "frequency:", step: 0.01 }), viewof redFreq )} ${Inputs.bind( Inputs.range([0, 1], { label: "speed:", step: 0.01 }), viewof redSpeed )}

Green ${Inputs.bind( Inputs.range([0, 1], { label: "amplitude:", step: 0.01 }), viewof greenAmplitude )} ${Inputs.bind( Inputs.range([0, 1], { label: "phase:", step: 0.01 }), viewof greenPhase )} ${Inputs.bind( Inputs.range([1.0, 25.0], { label: "frequency:", step: 0.01 }), viewof greenFreq )} ${Inputs.bind( Inputs.range([0, 1], { label: "speed:", step: 0.01, transform: Math.sqrt }), viewof greenSpeed )}

Blue ${Inputs.bind( Inputs.range([0, 1], { label: "amplitude:", step: 0.01 }), viewof blueAmplitude )} ${Inputs.bind( Inputs.range([0, 1], { label: "phase:", step: 0.01 }), viewof bluePhase )} ${Inputs.bind( Inputs.range([1.0, 25.0], { label: "frequency:", step: 0.01 }), viewof blueFreq )} ${Inputs.bind( Inputs.range([0, 1], { label: "speed:", step: 0.01, transform: Math.sqrt }), viewof blueSpeed )}

`2e:T487,shader({ width, height: 200, iTime: true, inputs: { redAmplitude: viewof redAmplitude, greenAmplitude: viewof greenAmplitude, blueAmplitude: viewof blueAmplitude, redPhase: viewof redPhase, greenPhase: viewof greenPhase, bluePhase: viewof bluePhase, redFreq: viewof redFreq, greenFreq: viewof greenFreq, blueFreq: viewof blueFreq, redSpeed: viewof redSpeed, greenSpeed: viewof greenSpeed, blueSpeed: viewof blueSpeed } })` const float PI = 3.1415926535897932384626433832795; const float TAU = 6.2831853071795864769252867665590; float sin_func(vec2 st, float amplitude, float phase, float freq) { float x = ((st.x * TAU) - phase) * freq; float y = (2.0 * st.y - 1.0) / amplitude; return y < sin(x) ? 1.0 : 0.0; } void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 st = fragCoord.xy / iResolution.xy; fragColor.r = sin_func(st, redAmplitude, redSpeed * iTime + redPhase, redFreq); fragColor.g = sin_func(st, greenAmplitude, greenSpeed * iTime + greenPhase, greenFreq); fragColor.b = sin_func(st, blueAmplitude, blueSpeed * iTime + bluePhase, blueFreq); fragColor.a = 1.0; }`2f:[] 2b:{"id":"57d3f1f40877dbc1","slug":null,"title":"RGB Sine Waves","thumbnail":"c6399b69819ba8ed5fb12090c0a35126ad2a3f622105aadbfaf0f19a186fbf2b","access_level":"public","create_time":"$D2024-02-12T01:12:05.572Z","update_time":"$D2024-02-17T15:30:52.610Z","view_time":null,"first_public_time":"$D2024-02-12T01:12:05.572Z","has_unpublished_edits":null,"fork":{"id":"2fad1ac7fcc68232","slug":null,"title":"Rainbow Gradient Shader","owner":{"id":"d51adc4f8943cb47","login":"douglyuckling","name":"Douglas Paul"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d51adc4f8943cb47","login":"douglyuckling","name":"Douglas Paul","avatar_url":"https://avatars-next.observableusercontent.com/121716db8717e07b204d15de06cfef0e3b914886a0d6b005af8e19a29f7f000f","tier":"starter_2024"},"version":382,"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"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"RGB Sine Waves","cells":[{"id":0,"value":"# RGB Sine Waves","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$2d","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":4,"value":"$2e","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(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof greenAmplitude = Inputs.input(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof blueAmplitude = Inputs.input(0.2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof redPhase = Inputs.input(0.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"viewof greenPhase = Inputs.input(1.0/3.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"viewof bluePhase = Inputs.input(2.0/3.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof redFreq = Inputs.input(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof greenFreq = Inputs.input(6)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof blueFreq = Inputs.input(6.0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"viewof redSpeed = Inputs.input(0.5)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"viewof greenSpeed = Inputs.input(0.4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof blueSpeed = Inputs.input(0.3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"