30: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**31:[] 2e:{"title":"Precessing \"小宇宙\" by \"ayametakuya\"","cells":[{"id":831,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1111,"value":"viewof flip = Inputs.button(\"Invert Colour\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1150,"value":"viewof clearBG = Inputs.toggle({label: \"Clear Background\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1163,"value":"viewof reset = Inputs.button(\"Reset the grid\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"{\n return createCanvas(Width, Width, draw, setup)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":1007,"value":"Width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":1047,"value":"Height = Width","pinned":true,"hidden":false,"mode":"ojs"},{"id":1004,"value":"grid = Width/100","pinned":true,"hidden":false,"mode":"ojs"},{"id":1170,"value":"window.setup = 0","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1040,"value":"function createVector(x,y){\n return {x,y}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":849,"value":"PI = Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":862,"value":"TAU = PI*2","pinned":true,"hidden":false,"mode":"ojs"},{"id":1076,"value":"---\n## A function to emulate P5.js map() function using D3","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":837,"value":"## A function to emulate p5 noise using Simplex noise\n","pinned":false,"hidden":false,"mode":"md"},{"id":942,"value":"import {noise} from \"@hellonearthis/noise-like-p5js\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}