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; }