<Blog>

September 22, 2022

Taming Fire

January 18, 2022

The Robot Revolution

November 23, 2021

Combine & Conquer

October 31, 2021

Loot Past & Future

October 1, 2021

Hello world.

September 30, 2021

Add Forta to your protocol

September 15, 2021

The Friendly Saver from Out of Space

// For the canvas let filledCircles = []; let hoveredCircles = []; let canvasWidth; function setup() { let canvasDiv = document.getElementById('p5-container'); // Get the div container canvasWidth = canvasDiv.offsetWidth; // Get the width of the div container let canvasHeight = canvasWidth * 0.57; // Set canvas height relative to the container width let canvas = createCanvas(canvasWidth, canvasHeight); // Set canvas width and height relative to the container width canvas.parent('p5-container'); stroke('#FC134D'); initFilledCirclesArray(); initHoveredCirclesArray(); } function initFilledCirclesArray() { for (let i = 0; i < 21; i++) { filledCircles[i] = []; for (let j = 0; j < 12; j++) { filledCircles[i][j] = isCircleFilled(i, j); } } } function initHoveredCirclesArray() { for (let i = 0; i < 21; i++) { hoveredCircles[i] = []; for (let j = 0; j < 12; j++) { hoveredCircles[i][j] = false; } } } function isCircleFilled(i, j) { return ( (i === 1 && (j === 4 || j === 5 || j === 6 || j === 7)) || (i === 2 && (j === 4)) || (i === 3 && (j === 4)) || (i === 4 && (j === 5 || j === 6 || j === 7)) || (i === 6 && (j === 5 || j === 6)) || (i === 7 && (j === 4 || j === 7)) || (i === 8 && (j === 4 || j === 7)) || (i === 9 && (j === 5 || j === 6)) || (i === 11 && (j === 4 || j === 5 || j === 6 || j === 7)) || (i === 12 && (j === 4 || j === 7)) || (i === 13 && (j === 4 || j === 7)) || (i === 14 && (j === 5 || j === 6)) || (i === 16 && (j === 5 || j === 6 || j === 7)) || (i === 17 && (j === 4 || j === 5 || j === 6 || j === 7)) || (i === 18 && (j === 4 || j === 5 || j === 6 || j === 7)) || (i === 19 && (j === 4 || j === 5 || j === 6)) ); } function draw() { clear(); // Clear the canvas on each frame, making it transparent let canvasDiv = document.getElementById('p5-container'); // Get the div container let newCanvasWidth = canvasDiv.offsetWidth; // Get the width of the div container if (newCanvasWidth !== canvasWidth) { // Check if the width has changed canvasWidth = newCanvasWidth; // Update canvas width let canvasHeight = canvasWidth * 0.57; // Update canvas height relative to the container width resizeCanvas(canvasWidth, canvasHeight); // Resize the canvas } let circleSpacingX = width / 21; let circleSpacingY = height / 12; for (let i = 0; i < 21; i++) { for (let j = 0; j < 12; j++) { let centerX = i * circleSpacingX + circleSpacingX / 2; let centerY = j * circleSpacingY + circleSpacingY / 2; let distance = dist(mouseX, mouseY, centerX, centerY); let radius = min(circleSpacingX, circleSpacingY) / 2; // Check if the circle should be filled based on the two conditions if (filledCircles[i][j] || hoveredCircles[i][j] || distance < radius) { fill('#FC134D'); } else { noFill(); } ellipse(centerX, centerY, circleSpacingX, circleSpacingY); // Update hoveredCircles array based on mouse position if (distance < radius) { hoveredCircles[i][j] = true; } else { hoveredCircles[i][j] = false; } } } }