2e:null 2f:["$","title",null,{"children":"Orbiting Particles III | justjoolz | Observable"}] 34:Tc48,canvas = { var t=0 const context = DOM.context2d(width, height); const particles = new Array(n); // x2 if you want bi-directional for (let i = 0; i < n; ++i) { //let [r,g,b] = hslToRgb(i/n, .5 , 0.1) let r = brightness* (1-(i+0)%3) // let g = brightness* (1-(i+1)%3) // let b = brightness* (1-(i+2)%3) // particles[i] = { x: 0,// Math.random() * width, y: 0, // Math.random() * height, vx: 0, vy: 0, rgb: [r,g,b].join() }; } //let t=0 context.globalCompositeOperation = "lighten"; //lighter, lighten, screen, overlay var centerX=width/2 var centerY=height/2 while (true) { context.save(); context.clearRect(0, 0, width, height); context.beginPath(); //context.fillStyle = '#000'; context.fillRect(0, 0, width, height); for (let i = 0; i < n; ++i) { const p = particles[i]; let r= radius // *(n-i)/n p.x = centerX + (r) * Math.sin(2*Math.PI*t*(i+1)/n) p.y = centerY - (r) * Math.cos(2*Math.PI*t*(i+1)/n) let alpha = .9 if(true) { var gradient = context.createRadialGradient(p.x, p.y, 1, p.x, p.y, radius); gradient.addColorStop(1, `rgba(0,0,0, ${alpha})`); gradient.addColorStop(0, `rgba(${p.rgb},${alpha})`); context.fillStyle = gradient // `rgb(${p.rgb})` //context.fillStyle = `rgba(${p.rgb}, ${alpha})` context.beginPath(); context.arc(p.x, p.y, radius, 0, 2 * Math.PI); context.fill(); } } // mirror particles if(false) for (let i = n; i < n; ++i) { const p = particles[i]; let r= centerX*(2*n-i)/n p.x = centerX + r * Math.sin(-t*(i-n+1)/n) p.y = centerY + r * Math.cos(-t*(i-n+1)/n) var gradient = context.createRadialGradient(p.x, p.y, 1, p.x, p.y, radius); let alpha= (i-n)/n gradient.addColorStop(1, `rgba(0,0,0, ${alpha})`); gradient.addColorStop(0, `rgba(${p.rgb},${alpha})`); context.fillStyle = gradient // `rgb(${p.rgb})` context.beginPath(); context.arc(p.x, p.y, radius, 0, 2 * Math.PI); context.fill(); } // lines between balls! if( true ) { for (let i = 0; i < n; ++i) { for (let j = i ; j < n; ++j) { const pi = particles[i]; const pj = particles[j]; //if( j%i === 0 || i%j===0) { let alpha= 1 // .1 // (i-n)/n //let [r,g,b] = hslToRgb(i/n, .5 , .1 ) //context.strokeStyle = `rgb(${r},${g},${b})` context.strokeStyle = `rgba(255,255,255,${alpha})` //context.strokeStyle = `rgba(${pi.rgb},${alpha})` // context.globalAlpha = d2 > minDistance2 ? (maxDistance2 - d2) / (maxDistance2 - minDistance2) : 1; context.lineWidth = 5// (i)/n context.beginPath(); context.moveTo(pi.x, pi.y); context.lineTo(pj.x, pj.y); context.stroke(); //} } } } t+= speed / 100 context.restore(); yield context.canvas; } }35:T438,/** * Converts an HSL color value to RGB. Conversion formula * adapted from http://en.wikipedia.org/wiki/HSL_color_space. * Assumes h, s, and l are contained in the set [0, 1] and * returns r, g, and b in the set [0, 255]. * * @param {number} h The hue * @param {number} s The saturation * @param {number} l The lightness * @return {Array} The RGB representation */ function hslToRgb(h, s, l){ var r, g, b; if(s == 0){ r = g = b = l; // achromatic }else{ var hue2rgb = function hue2rgb(p, q, t){ if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]; }36:[] 32:{"id":"9f90c2ef46877899","slug":"orbiting-particles-iii","title":"Orbiting Particles III","thumbnail":"0a593f53aeb2f3090fff896245cf98f15ed25997b1227d3b098da4e5b7b5fff6","access_level":"public","create_time":"$D2020-07-01T17:07:38.996Z","update_time":"$D2020-11-04T06:54:31.283Z","view_time":null,"first_public_time":"$D2020-08-19T04:37:01.541Z","has_unpublished_edits":null,"fork":{"id":"7335bdad4ae41461","slug":"connected-particles-iii","title":"Connected Particles III","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"c647648a9123c450","login":"justjoolz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1d93159d0079666441bf244a278db273fe1754351618a7a5d6f58d75171ffecd","tier":"starter_2024"},"version":633,"publish_version":633,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a7de677c184511b","login":"justjoolz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1d93159d0079666441bf244a278db273fe1754351618a7a5d6f58d75171ffecd","tier":null}],"members":[{"type":"individual","id":"5a7de677c184511b","login":"justjoolz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1d93159d0079666441bf244a278db273fe1754351618a7a5d6f58d75171ffecd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6ad523ac4dcb4b45","slug":"instagram-shares","title":"Observable's Instagram Shares","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Orbiting Particles III","cells":[{"id":0,"value":"md`# Orbiting Particles III\nSome orbs (big balls of coloured transparent light) on a cyclic journey at harmonic speeds, with lines connecting them all :)\n\nWith 9 of them it takes 2520 rotations of no1 to reach completion (where all orbs return to their origin at the same time)\n\nWhy 2520? Well that's the lowest number that divides all numbers between 1-9 with no remainder.\n\nInterestingly 360 divides of them except 7.....\n24 all but 5,7 and 9\nWhich is why these numbers are so convenient for measuring time.....\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"n = 9 // 2520/7/5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"height = 1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"radius = 250","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"speed= 1/n*1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"brightness = 255","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"hslToRgb(1,.5,.5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"