2c:null 2d:["$","title",null,{"children":"Precessing \"小宇宙\" by \"ayametakuya\" | Brett Cooper | Observable"}] 32:T41d,# Precessing "小宇宙" by "ayametakuya" https://twitter.com/ayame_takuya/status/1580566713103306752 ```js let points = []; let grid; function setup() { createCanvas(800, 800); background(0); // angleMode(DEGREES); noStroke(); grid = width / 100; for (let y = 0; y <= height + grid; y += grid) { for (let x = 0; x <= width; x += grid) { let p = createVector(x, y); points.push(p); } } } function draw() { // background(0); for (let i = 0; i < points.length; i++) { let size = map( noise(points[i].x * 0.001, points[i].y * 0.001, frameCount*0.001), 0, 1, -grid, grid ); points[i].add(createVector(sin(size), cos(size))) if (points[i].x > width) points[i].x = random(width); if (points[i].x < 0) points[i].x = random(width); if (points[i].y < 0) points[i].y = random(height); if (points[i].y > height) points[i].y = random(height); circle(points[i].x, points[i].y, size); } } ``` Using [Precessing](https://bernhardfritz.github.io/p8g/) **p8g**33:[] 30:{"id":"82070601c2253854","slug":"ayame_takuya","title":"Precessing \"小宇宙\" by \"ayametakuya\"","thumbnail":"96d1ff34bef16591f483b28a558bca33dd8bbd2f15e031804db3080ae2582417","access_level":"public","create_time":"$D2022-10-14T03:46:46.720Z","update_time":"$D2022-10-18T22:53:14.803Z","view_time":null,"first_public_time":"$D2022-10-16T04:45:45.034Z","has_unpublished_edits":null,"fork":{"id":"450e3001d8fb9663","slug":"instability-by-koma-tabe","title":"Instability by Koma Tabe","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"stars":1,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":1199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"5fa1728fe8cb8ea1","slug":"precessing-notebooks","title":"Precessing Notebooks","owner":{"id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper"}},"type":"notebook","body":{"titling":"auto","title":"Precessing \"小宇宙\" by \"ayametakuya\"","cells":[{"id":831,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1111,"value":"viewof flip = Inputs.button(\"Invert Colour\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"viewof clearBG = Inputs.toggle({label: \"Clear Background\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"viewof reset = Inputs.button(\"Reset the grid\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"{\n return createCanvas(Width, Width, draw, setup)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"points = {\n reset\n window.setup = 0 // reset background colour\n \n let po = []\n for (let y = 0; y <= Height + grid; y += grid) {\n for (let x = 0; x <= Width; x += grid) {\n let p = createVector(x, y);\n po.push(p);\n }\n }\n return po\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"Width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1047,"value":"Height = Width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"grid = Width/100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"window.setup = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"function setup({width, height}) {\n\n \n // background(0); // these dont work with this coding pattern\n // noStroke();\n\n let frameCount = 0; // Set up a closure as our frame counter\n const frame = () => frameCount++;\n \n\n return {frame}; // return object with initialized state.\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"function draw(p8g, {frame}){\n\n const { background, noStroke, stroke, fill, ellipse, noSmooth} = p8g;\n const {sin, cos, random} = Math;\n\n let frameCount = frame()\n \n if(clearBG%2) background(0)\n\n if(window.setup == 0) {\n console.log('boop')\n background(0) \n window.setup++\n }\n\n fill(flip%2?0:255)\n\n noSmooth() // without noSmooth noStroke still has a stroke\n noStroke() \n \n for (let i = 0; i < points.length; i++) {\n let size = map( noise(points[i].x * 0.001, points[i].y * 0.001, frameCount*0.001), 0, 1, -grid, grid );\n\n \n // points[i].add(createVector(sin(size), cos(size))) // p8g doesn't have vector \n points[i].x += sin(size)\n points[i].y += cos(size)\n\n if (points[i].x > Width) points[i].x = random(Width)*Width;\n if (points[i].x < 0) points[i].x = random(Width)*Width;\n if (points[i].y < 0) points[i].y = random(Height)*Height;\n if (points[i].y > Height) points[i].y = random(Height)*Height;\n ellipse(points[i].x, points[i].y, size, size);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"function createVector(x,y){\n return {x,y}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"TAU = PI*2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1076,"value":"---\n## A function to emulate P5.js map() function using D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1020,"value":"function map (value, start1, stop1, start2, stop2) {\n \n return d3.scaleLinear()\n .domain([start1, stop1])\n .range([start2, stop2])(value)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"## A function to emulate p5 noise using Simplex noise\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":942,"value":"import {noise} from \"@hellonearthis/noise-like-p5js\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"---\n## Precessing - [Using setup to initialize state for draw](https://observablehq.com/d/3d036875695e3524)\n### _p8g and wrapper_ \nhttps://bernhardfritz.github.io/p8g/\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"createCanvas = {\n const p8g = await import('https://cdn.skypack.dev/p8g.js@0.8.1?min');\n\n let canvas = null;\n let _draw = () => {};\n let _setup = () => {};\n let request = null;\n let state = null;\n return async function createCanvas(width, height, draw = _draw, setup = _setup) {\n\n // cancel previous loop\n if (request) cancelAnimationFrame(request);\n \n _setup = setup;\n _draw = draw;\n\n\n // check the canvas size required vs the current canvas\n \n if (!canvas) {\n canvas = await html`${p8g.createCanvas(width, height)}`;\n }\n\n state = setup(p8g);\n\n // Draw Loop\n request = requestAnimationFrame(function tick() {\n draw(p8g, state);\n request = requestAnimationFrame(tick);\n });\n\n invalidation.then(() => cancelAnimationFrame(request));\n\n return canvas;\n } \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"