2d:null 2e:["$","title",null,{"children":"Particules connectées III | Malik Koné | Observable"}] 33:Ta5d,cadre = { const hauteur = 300; const largeur = hauteur *1.6; const rayon = 2.5; // const dMin = 1; // distance minimun // const dMax = 30; // distance max de sortie du cadre const carreDMin = dMin **2; const carreDMax = dMax **2; const tau = 2 * Math.PI; const dpi = devicePixelRatio || 1; //résolution const cadre = DOM.canvas(width * dpi, hauteur * dpi); const contexte = cadre.getContext("2d"); cadre.style.width = `${width}px`; contexte.scale(dpi, dpi); // const n = 100; // voir comment ajouter des couleurs et laisser une trace const particules = new Array(n); // les particules sont placées au hasard for (let i = 0; i < n; ++i) { const couleur = d3.color('black'); particules[i] = { x: Math.random() * width, y: Math.random() * hauteur, vx: 0, //symbolise la vitesse vy: 0, c : couleur }; } while (true) { contexte.save(); contexte.clearRect(0, 0, width, hauteur); for (let i = 0; i < n; ++i) { const p = particules[i]; p.x += p.vx; // déplacement if (p.x < -dMax) p.x += width + dMax * 2; // si la particule sort sur la gauche on la remet à droite else if (p.x > width + dMax) p.x -= width + dMax * 2; // si elle sort à droite p.y += p.vy; if (p.y < -dMax) p.y += hauteur + dMax * 2; else if (p.y > hauteur + dMax) p.y -= hauteur + dMax * 2; p.vx += 0.2 * (Math.random() - .5) - 0.01 * p.vx; // mise à jour de la vitesse en prenant en compte le vitesse précédent p.vy += 0.2 * (Math.random() - .5) - 0.01 * p.vy; contexte.beginPath(); // contexte.fillStyle = p.c; contexte.strokeStyle = p.c; contexte.arc(p.x, p.y, rayon, 0, tau); // ? contexte.fill(); } // on va parcourrir toutes les paires for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { const pi = particules[i]; const pj = particules[j]; const dx = pi.x - pj.x; const dy = pi.y - pj.y; const carreHptns = dx ** 2 + dy ** 2; // carré de l'hypoténuse if (carreHptns < carreDMax) { // si hypo plus petit que distance max, on peut relier les points en changeant la transparence de façon progressive. contexte.globalAlpha = carreHptns > carreDMin ? (carreDMax - carreHptns) / (carreDMax - carreDMin) : 1; // on trace le trait contexte.beginPath(); contexte.moveTo(pi.x, pi.y); contexte.lineTo(pj.x, pj.y); contexte.color = pi.c contexte.stroke(); } } } contexte.restore(); yield cadre; } }34:[] 31:{"id":"6bfd934eaaad1e72","slug":"particules-connectees-iii","title":"Particules connectées III","thumbnail":"f370a324aa804245f368001a766886751c516e476ea376691050d059495a01aa","access_level":"public","create_time":"$D2018-05-15T16:26:19.936Z","update_time":"$D2019-09-29T07:59:47.784Z","view_time":null,"first_public_time":"$D2018-05-15T21:47:38.629Z","has_unpublished_edits":null,"fork":{"id":"7335bdad4ae41461","slug":"connected-particles-iii","title":"Connected Particles III","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"33332922de5e29a1","slug":"seeds","title":"Seeds","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"Particules connectées III","cells":[{"id":0,"value":"md`# Particules connectées III\n\nDes particules suivant une route aléatoire avec des liens vers leurs plus proches voisines.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof dMax = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof dMin = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md` Références utiles:\n- DOM.cadre(width * dpi, hauteur * dpi);\n- const contexte = cadre.[getContext](https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement/getContext)(\"2d\");\n - crée un objet [CanvasRenderingContext2D](https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D)\n- contexte.beginPath(); // ?\n- contexte.arc(p.x, p.y, radius, 0, tau); // ?\n- contexte.fill()\n- contexte.beginPath();\n- contexte.moveTo(pi.x, pi.y);\n- contexte.lineTo(pj.x, pj.y);\n- contexte.stroke();\n- contexte.restore();`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"