3e:null 3f:["$","title",null,{"children":"Experiment 5.2 | Ross Mills | Observable"}] 45:T451,celest =

46:[] 43:{"id":"54b26653660e79dc","slug":null,"title":"Experiment 5.2","thumbnail":"92398e63d8196d78158c3309719ee5cdcaf78c304253aca10b1a854760bdb9fe","access_level":"public","create_time":"$D2023-04-07T16:20:49.973Z","update_time":"$D2023-04-07T16:57:39.557Z","view_time":null,"first_public_time":"$D2023-04-07T16:20:49.973Z","has_unpublished_edits":null,"fork":{"id":"39b372da8e445316","slug":null,"title":"Experiment 5","owner":{"id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills"}},"stars":1,"starred":false,"owner":{"type":"team","id":"55e9268ccca383a5","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":"starter_2024","bio":"Software engineer and hands-on tech leader. Creating and collaborating on interesting software projects gets me out of bed in the morning.","following":false},"version":339,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"bio":"Software engineer and hands-on tech leader.\n","following":false}],"members":[{"type":"individual","id":"3d55deecec17df75","login":"rossmills99","name":"Ross Mills","avatar_url":"https://avatars-next.observableusercontent.com/edf6d8f13cc81ae6ed5c2a7f7911f9b522006a0413d822217f3666daf05d1366","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Experiment 5.2","cells":[{"id":0,"value":"# Experiment 5.2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":326,"value":"This is a quite inefficient use of CSS background color gradients implementing a sun-moon-rising-setting animation.\n\nThe background is formed of two linear-gradients - the lighter one fades in and out over the darker one. Meanwhile the sun and moon are implemented as radial-gradients.\n\nI find it curious that the size of the sun/moon gets smaller as they approach the center of the view, and I don't know why that is.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$45","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"viewof sunRad = Inputs.range([5, 200], { step: 1, value: 10, label: 'Sun radius' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"// higher number is slower\nviewof inverseSpeed = Inputs.range([0, 200], { step: 1, value: 100 } )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"sinProgress = Math.sin(slider/inverseSpeed * Math.PI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"cosProgress = Math.cos(slider/inverseSpeed * Math.PI)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"slider = {\n let i = 1;\n let d = 1;\n while (true) {\n await Promises.delay(60);\n yield i = i + d;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"//viewof slider = Inputs.range([0, 1], { step: 0.01 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof shape = Inputs.select([ 'circle', 'ellipse' ], { value: 'circle', label: 'Shape' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"//viewof leftPos = Inputs.range([0, width], { step: 1, value: 5, label: 'Left position' })\nleftPos = sinProgress * width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"topPos = cosProgress * height / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"//viewof topPos = Inputs.range([-height / 2, height * 1.5], { step: 1, value: 5, label: 'Top position' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"stops = {\n const pc = sunRad / 100;\n \n return [\n { color: '#ffff99', pc: 5 * pc },\n { color: 'yellow', pc: 20 * pc },\n { color: '#fafafa55', pc: 30 * pc },\n { color: '#fafafa00', pc: 100 * pc },\n { color: 'rgba(0, 0, 0, 0)', pc: 85 * pc }\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"moonStops = {\n \n const pc = sunRad / 100;\n \n return [\n { color: '#e0e0e0', pc: 5 * pc },\n { color: '#c0c0e0', pc: 20 * pc },\n { color: '#fafafa55', pc: 30 * pc },\n { color: '#fafafa00', pc: 100 * pc },\n { color: 'rgba(0, 0, 0, 0)', pc: 85 * pc }\n ]\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height = width / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"function gradientPosition(top, left) {\n return ' at top ' + top + 'px left ' + left +'px';\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {radialGradient, linearGradient} from \"@rossmills99/gradients\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"