logan/ThePlaceHolders
1
0
Fork 0
mirror of https://github.com/adanrsantos/ThePlaceHolders.git synced 2024-12-16 05:50:39 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

trying to take a quadrant approach

Browse source
This commit is contained in:
adanrsantos 2024-10-30 16:30:24 -05:00
parent 83d729a2a3
commit 8df10018e7
1 changed files with 75 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
static/canvas.js
View file

@ -4,14 +4,14 @@ const ctx = canvas.getContext("2d");
const canvasSize = 500;
let zoom = 1.0;
let baseGridCount = 500; // Base grid count at zoom = 1
let gridCount = baseGridCount;
let gridCount = 500;
let pixelSize = canvasSize / gridCount;
canvas.width = canvasSize;
canvas.height = canvasSize;
function updateGridCount() {
return Math.floor(baseGridCount / zoom); // Adjust grid count based on zoom
return Math.floor(gridCount / 2); // Adjust grid count based on zoom
}
function updatePixelSize() {
@ -92,6 +92,7 @@ function draw(point, color) {
ctx.fillRect(point.x, point.y, pixelSize, pixelSize);
}
/*
canvas.addEventListener("mousedown", (e) => {
let x = e.clientX - canvas.getBoundingClientRect().left - (pixelSize / 2);
let y = e.clientY - canvas.getBoundingClientRect().top - (pixelSize / 2);
@ -99,7 +100,77 @@ canvas.addEventListener("mousedown", (e) => {
let point = new Point(x, y);
draw(point, color);
});
*/
canvas.addEventListener("mousedown", (e) => {
let x = e.clientX - canvas.getBoundingClientRect().left - (pixelSize / 2);
let y = e.clientY - canvas.getBoundingClientRect().top - (pixelSize / 2);
if (x > 249){
if (y < 250){
console.log("Quadrant 1");
console.log("Previous Grid Size:", gridCount);
console.log("Previous PixelSize:", pixelSize);
gridCount = updateGridCount();
pixelSize = updatePixelSize();
console.log("Updated Grid Size:", gridCount);
console.log("Updated PixelSize:", pixelSize);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawStoredPixels(1);
}
else{
console.log("Quadrant 4");
}
}
else{
if (y < 250){
console.log("Quadrant 2");
}
else{
console.log("Quadrant 3");
}
}
console.log("This is where the user clicked to zoom:", x);
console.log("This is where the user clicked to zoom:", y);
});
const pixelData = {};
function storePixel(x, y, color){
pixelData[`${x},${y}`] = color;
}
for (let i = 0; i < 500; i++){
storePixel(i, 250, '#0000FF');
storePixel(i, i, '#FF0000');
storePixel(i, 499 - i, '#FFFF00');
storePixel(250, i, '#FF6600')
}
function drawStoredPixels(quadrant) {
if (quadrant == 1){
for (const [key, color] of Object.entries(pixelData)) {
const [x, y] = key.split(',').map(Number);
if (x >= 250 && x <= 499 && y >= 0 && y <= 249) {
const pixelCanvasPos = new Point(x, y);
ctx.fillStyle = color;
console.log(pixelCanvasPos);
draw(pixelCanvasPos, color);
}
}
}
else{
for (const [key, color] of Object.entries(pixelData)) {
const [x, y] = key.split(',').map(Number);
const pixelCanvasPos = new Point(x, y);
ctx.fillStyle = color;
draw(pixelCanvasPos, color);
}
}
}
drawStoredPixels();
/*
document.getElementById("zoomIn").addEventListener("click", () => {
if (zoom < 100.0) {
if (zoom == 1.0){
@ -117,6 +188,7 @@ document.getElementById("zoomIn").addEventListener("click", () => {
drawGrid(); // Redraw the grid with updated zoom
});
/*
document.getElementById("zoomOut").addEventListener("click", () => {
if (zoom > 1.0) {
if (zoom <= 4.0){
@ -133,3 +205,4 @@ document.getElementById("zoomOut").addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGrid(); // Redraw the grid with updated zoom
});
*/