30:T9e7,c = { const context = DOM.context2d(width, height); const size = 3; const stepSize = size * 2; let position = { x: startingPoint === 'center' ? width / 2 : random(0, width), y: startingPoint === 'center' ? height / 2 : random(0, height) }; const nextOf4Positions = ({x, y}) => { const choice = random(0, 3); switch(choice) { case 0: // East x = ((x + size + stepSize) > width) ? x : x + stepSize; break; case 1: // West x = (x - (size + stepSize)) < 0 ? x : x - stepSize; break; case 3: // South y = (y + size + stepSize) > height ? y : y + stepSize; break; default: // North y = (y - (size + stepSize)) < 0 ? y : y - stepSize; break; } return {x, y}; } const nextOf8Positions = ({x,y}) => { const newX = x + (random(0, 2) - 1) * stepSize; const newY = y + (random(0, 2) - 1) * stepSize; return { x: (newX > 0 && newX < width) ? newX : x, y: (newY > 0 && newY < height) ? newY : y } } const nextOfBiased4Positions = ({x,y}) => { const r = Math.random(); if (r < 0.24) { // North return { x: x, y: (y - (size + stepSize)) < 0 ? y : y - stepSize } } else if (r < .52) { // South return { x: x, y: (y + size + stepSize) > height ? y : y + stepSize } } else if (r < 0.76) { // West return { x: (x - (size + stepSize)) < 0 ? x : x - stepSize, y } } return { // East x: ((x + size + stepSize) > width) ? x : x + stepSize, y } } const nextPosition = (position) => { if (direction === "8") { return nextOf8Positions(position); } else if (direction === "4b") { return nextOfBiased4Positions(position); } return nextOf4Positions(position) } // Draw background context.beginPath(); context.fillStyle = palette.bg; context.fillRect(0, 0, width, height); const draw = (position, color) => { context.fillStyle = palette.bg; context.beginPath(); context.fillRect(position.x - size, position.y - size, size * 2, size * 2); context.fillStyle = color; context.beginPath(); context.arc(position.x, position.y, size, 0 , 2 * Math.PI); context.fill(); } for (let i = 0; i < steps; i++){ draw(position, palette.path); position = nextPosition(position); draw(position, palette.cursor); } return context.canvas; }31:[] 2e:{"title":"006 Wandered Dot","cells":[{"id":0,"value":"md`# 006 Wandered Dot`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"html`Download Image`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof steps = slider({\n min: 100, \n max: 10000,\n value: 1000,\n step: 100, \n title: \"Steps the dot takes\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof startingPoint = radio({\n title: \"Starting Point\",\n options: [\"center\", \"random\"],\n value: \"center\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"viewof direction = radio({\n title: \"Possible Directions\",\n options: [\n {label: \"4\", value: \"4\" },\n {label: \"8\", value: \"8\"},\n {label: \"4 (biased)\", value: \"4b\"}\n ],\n value: \"4\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"palette = {\n return {\n bg: '#FEFAF4',\n path: '#C7E1DF',\n cursor: '#29415B'\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"function random(min = 0,max = 1) // min and max included\n{\n return Math.floor(Math.random()*(max-min+1)+min);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"height = 2 * Math.round((width * 3 / 4) / 2); // Round to even number ","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"import {slider, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}