last tracing work in temp file under drawing folder
parent
da2d82911a
commit
7ae61d14d5
|
|
@ -18,6 +18,7 @@
|
||||||
"eslint": "^8.44.0",
|
"eslint": "^8.44.0",
|
||||||
"flowbite": "^1.7.0",
|
"flowbite": "^1.7.0",
|
||||||
"flowbite-typography": "^1.0.3",
|
"flowbite-typography": "^1.0.3",
|
||||||
|
"phaser": "^3.60.0",
|
||||||
"shiki": "^0.14.3",
|
"shiki": "^0.14.3",
|
||||||
"tailwind-scrollbar": "^3.0.4",
|
"tailwind-scrollbar": "^3.0.4",
|
||||||
"tailwindcss": "^3.2.4",
|
"tailwindcss": "^3.2.4",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M115.37 117.77L77.78 17.81a2.242 2.242 0 0 0-2.1-1.45H52.32c-.94 0-1.77.58-2.1 1.45l-37.59 99.96c-.26.69-.17 1.46.25 2.06s1.1.97 1.84.97h24.64c.96 0 1.82-.62 2.13-1.54l5.7-17.18H80.8l5.71 17.18c.3.92 1.16 1.54 2.13 1.54h24.64a2.236 2.236 0 0 0 2.09-3.03zm-61.14-36.9L64 51.45l9.77 29.43H54.23z" fill="#40C0E7"></path></g></svg>
|
||||||
|
After Width: | Height: | Size: 708 B |
|
|
@ -1,138 +1,67 @@
|
||||||
<main>
|
<main>
|
||||||
<div>
|
<div>
|
||||||
<canvas id=canvas></canvas>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
</main>
|
</main>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
new class Game {
|
var config = {
|
||||||
constructor() {
|
type: Phaser.AUTO,
|
||||||
this.c = document.querySelector('canvas')
|
width: window.innerWidth,
|
||||||
this.cx = this.c.getContext('2d')
|
height: window.innerHeight,
|
||||||
this.init()
|
scene: {
|
||||||
this.c.addEventListener('mousedown', this.onmousedown.bind(this), false);
|
preload: preload,
|
||||||
this.c.addEventListener('mouseup', this.onmouseup.bind(this), false);
|
create: create,
|
||||||
this.c.addEventListener('mousemove', this.onmousemove.bind(this), false);
|
update: update
|
||||||
}
|
|
||||||
init() {
|
|
||||||
this.c.height = 190;
|
|
||||||
this.c.width = 140;
|
|
||||||
this.cx.fillStyle = 'rgb(200, 200, 250)';
|
|
||||||
this.drawletter('5');
|
|
||||||
this.cx.fillStyle = 'rgb(0, 0, 50)';
|
|
||||||
this.letterpixels = this.getpixelamount(200, 200, 250);
|
|
||||||
}
|
|
||||||
pixelthreshold() {
|
|
||||||
if (this.getpixelamount(0, 0, 50) / this.letterpixels > 0.75) {
|
|
||||||
console.log('you got it!');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
showerror(error) {
|
|
||||||
this.mousedown = false;
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
getpixelcolour(x, y) {
|
|
||||||
const pixels = this.cx.getImageData(0, 0, this.c.width, this.c.height);
|
|
||||||
const index = ((y * (pixels.width * 4)) + (x * 4));
|
|
||||||
return {
|
|
||||||
r: pixels.data[index],
|
|
||||||
g: pixels.data[index + 1],
|
|
||||||
b: pixels.data[index + 2],
|
|
||||||
a: pixels.data[index + 3]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
paint(x, y) {
|
|
||||||
const colour = this.getpixelcolour(x, y);
|
|
||||||
if (colour.a === 0) {
|
|
||||||
this.showerror('you are outside');
|
|
||||||
} else {
|
|
||||||
const fillRange = 20;
|
|
||||||
const stack = [[x, y]];
|
|
||||||
while (stack.length > 0) {
|
|
||||||
const pixel = stack.pop();
|
|
||||||
if (pixel[0] < 0 || pixel[0] >= this.c.width) continue;
|
|
||||||
if (pixel[1] < 0 || pixel[1] >= this.c.height) continue;
|
|
||||||
if(((x - pixel[0]) ** 2 + (y - pixel[1]) ** 2) ** .5 > fillRange) continue;
|
|
||||||
const color = this.getpixelcolour(...pixel);
|
|
||||||
if (color.a === 0) continue;
|
|
||||||
if (color.r === 0 && color.g === 0 && color.b === 50) continue;
|
|
||||||
|
|
||||||
this.cx.fillRect(pixel[0], pixel[1], 1, 1);
|
|
||||||
|
|
||||||
if(pixel[0] >= x) stack.push([pixel[0] + 1, pixel[1]]);
|
|
||||||
if(pixel[0] <= x) stack.push([pixel[0] - 1, pixel[1]]);
|
|
||||||
if(pixel[1] >= y) stack.push([pixel[0], pixel[1] + 1]);
|
|
||||||
if(pixel[1] <= y) stack.push([pixel[0], pixel[1] - 1]);
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var graphics;
|
||||||
|
var isDragging = false;
|
||||||
|
var image;
|
||||||
|
|
||||||
|
var game = new Phaser.Game(config);
|
||||||
|
|
||||||
|
function preload() {
|
||||||
|
// Load the image asset
|
||||||
|
this.load.image('image', '/assets/A.png');
|
||||||
}
|
}
|
||||||
}
|
|
||||||
onmousedown(ev) {
|
function create() {
|
||||||
this.mousedown = true;
|
graphics = this.add.graphics();
|
||||||
ev.preventDefault();
|
|
||||||
}
|
// Set line style for the dragging line
|
||||||
onmouseup(ev) {
|
graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width
|
||||||
this.mousedown = false;
|
|
||||||
this.pixelthreshold();
|
// Add the image to the scene
|
||||||
ev.preventDefault();
|
image = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'image');
|
||||||
}
|
image.setInteractive();
|
||||||
onmousemove(e) {
|
|
||||||
const x = Math.round(e.clientX - this.c.getBoundingClientRect().left);
|
this.input.on('pointerdown', function (pointer) {
|
||||||
const y = Math.round(e.clientY - this.c.getBoundingClientRect().top);
|
if (image.getBounds().contains(pointer.x, pointer.y)) {
|
||||||
if (this.mousedown) {
|
// Start dragging only if the pointer is over the image
|
||||||
this.paint(x, y);
|
isDragging = true;
|
||||||
} else {
|
|
||||||
// console.log(this.getpixelcolour(x, y));
|
// Bring the graphics to the front
|
||||||
|
this.children.bringToTop(graphics);
|
||||||
|
|
||||||
|
graphics.beginPath();
|
||||||
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
this.input.on('pointermove', function (pointer) {
|
||||||
|
if (isDragging) {
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
}
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
this.input.on('pointerup', function () {
|
||||||
|
isDragging = false;
|
||||||
|
graphics.closePath();
|
||||||
|
}, this);
|
||||||
}
|
}
|
||||||
}
|
function update() {}
|
||||||
getpixelamount(r, g, b) {
|
|
||||||
const pixels = this.cx.getImageData(0, 0, this.c.width, this.c.height);
|
|
||||||
const all = pixels.data.length;
|
|
||||||
let amount = 0;
|
|
||||||
for (let i = 0; i < all; i += 4) {
|
|
||||||
if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) {
|
|
||||||
amount++;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return amount;
|
|
||||||
}
|
|
||||||
drawletter(letter) {
|
|
||||||
const path = new Path2D('M60.4248047,180.541992 C73.445638,180.541992 84.9405924,177.693685 94.909668,171.99707 C104.878743,166.300456 112.508138,158.610026 117.797852,148.925781 C123.087565,139.241536 125.732422,128.499349 125.732422,116.699219 C125.732422,108.561198 124.267578,100.952148 121.337891,93.8720703 C118.408203,86.7919922 114.379883,80.6681315 109.25293,75.5004883 C104.125977,70.3328451 98.1648763,66.2841797 91.3696289,63.3544922 C84.5743815,60.4248047 77.2705078,58.9599609 69.4580078,58.9599609 C59.6923828,58.9599609 49.0315755,62.0524089 37.4755859,68.2373047 L37.4755859,68.2373047 L44.4335938,28.6865234 L102.416992,28.6865234 C108.439128,28.6865234 112.996419,27.3844401 116.088867,24.7802734 C119.181315,22.1761068 120.727539,18.758138 120.727539,14.5263672 C120.727539,4.8421224 114.379883,0 101.68457,0 L101.68457,0 L37.2314453,0 C30.2327474,0 25.1871745,1.58691406 22.0947266,4.76074219 C19.0022786,7.93457031 16.8863932,13.0208333 15.7470703,20.0195312 L15.7470703,20.0195312 L5.49316406,78.4912109 C4.59798177,83.6181641 4.15039062,86.3850911 4.15039062,86.7919922 C4.15039062,90.4541016 5.69661458,93.7296549 8.7890625,96.6186523 C11.8815104,99.5076497 15.4215495,100.952148 19.4091797,100.952148 C23.0712891,100.952148 27.730306,98.815918 33.3862305,94.543457 C39.0421549,90.2709961 43.375651,87.2802734 46.3867188,85.5712891 C49.3977865,83.8623047 54.4026693,83.0078125 61.4013672,83.0078125 C67.0979818,83.0078125 72.265625,84.370931 76.9042969,87.097168 C81.5429688,89.8234049 85.2457682,93.9534505 88.0126953,99.4873047 C90.7796224,105.021159 92.1630859,111.694336 92.1630859,119.506836 C92.1630859,126.749674 90.8813477,133.219401 88.3178711,138.916016 C85.7543945,144.61263 82.1126302,149.088542 77.3925781,152.34375 C72.672526,155.598958 67.179362,157.226562 60.9130859,157.226562 C54.0771484,157.226562 47.8922526,155.212402 42.3583984,151.184082 C36.8245443,147.155762 32.430013,141.520182 29.1748047,134.277344 C25.8382161,126.383464 20.7519531,122.436523 13.9160156,122.436523 C9.92838542,122.436523 6.61214193,123.860677 3.96728516,126.708984 C1.32242839,129.557292 0,132.568359 0,135.742188 C0,140.950521 1.89208984,147.033691 5.67626953,153.991699 C9.46044922,160.949707 15.8894857,167.114258 24.9633789,172.485352 C34.0372721,177.856445 45.8577474,180.541992 60.4248047,180.541992 Z');
|
|
||||||
this.cx.fill(path);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// const config = {
|
|
||||||
// type: Phaser.AUTO,
|
|
||||||
// width: 800, // Set your default game width
|
|
||||||
// height: 600, // Set your default game height
|
|
||||||
// scene: {
|
|
||||||
// preload: preload,
|
|
||||||
// create: create,
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
|
|
||||||
// const game = new Phaser.Game(config);
|
|
||||||
|
|
||||||
// function preload() {
|
|
||||||
// // Load your image assets here
|
|
||||||
// this.load.image('exampleImage', 'path/to/your/image.png');
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function create() {
|
|
||||||
// const image = this.add.image(this.cameras.main.width / 2, this.cameras.main.height / 2, 'exampleImage');
|
|
||||||
|
|
||||||
// // Calculate the scale factor based on the screen size and desired aspect ratio
|
|
||||||
// const scaleFactor = Math.min(
|
|
||||||
// this.cameras.main.width / image.width,
|
|
||||||
// this.cameras.main.height / image.height
|
|
||||||
// );
|
|
||||||
|
|
||||||
// // Scale the image while preserving its aspect ratio
|
|
||||||
// image.setScale(scaleFactor);
|
|
||||||
|
|
||||||
// // Center the image on the screen
|
|
||||||
// image.setOrigin(0.5);
|
|
||||||
|
|
||||||
// // You can add more logic or resize other elements as needed
|
|
||||||
// }
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
---
|
||||||
|
import Layout from '../../layouts/Layout.astro';
|
||||||
|
---
|
||||||
|
<Layout title='Drawing Game'>
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
<script is:inline>
|
||||||
|
var config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
width: 800,
|
||||||
|
height: 600,
|
||||||
|
scene: {
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var graphics;
|
||||||
|
var isDragging = false;
|
||||||
|
var pathPoints = [
|
||||||
|
{ x: 100, y: 100 },
|
||||||
|
{ x: 200, y: 100 },
|
||||||
|
{ x: 150, y: 200 }
|
||||||
|
];
|
||||||
|
|
||||||
|
var drawnPoints = [];
|
||||||
|
|
||||||
|
var game = new Phaser.Game(config);
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
graphics = this.add.graphics();
|
||||||
|
|
||||||
|
// Draw the predefined path filled with white color
|
||||||
|
graphics.fillStyle(0xffffff); // White color
|
||||||
|
graphics.beginPath();
|
||||||
|
graphics.moveTo(pathPoints[0].x, pathPoints[0].y);
|
||||||
|
|
||||||
|
for (var i = 1; i < pathPoints.length; i++) {
|
||||||
|
graphics.lineTo(pathPoints[i].x, pathPoints[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
graphics.closePath();
|
||||||
|
graphics.fillPath();
|
||||||
|
|
||||||
|
// Add input events to detect dragging
|
||||||
|
this.input.on('pointerdown', function (pointer) {
|
||||||
|
isDragging = true;
|
||||||
|
drawnPoints = [];
|
||||||
|
drawnPoints.push({ x: pointer.x, y: pointer.y });
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointermove', function (pointer) {
|
||||||
|
if (isDragging) {
|
||||||
|
drawnPoints.push({ x: pointer.x, y: pointer.y });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerup', function () {
|
||||||
|
isDragging = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
// Continuously update the filled area while dragging
|
||||||
|
if (isDragging) {
|
||||||
|
graphics.fillStyle(0xff0000); // Red color
|
||||||
|
graphics.beginPath();
|
||||||
|
graphics.moveTo(drawnPoints[0].x, drawnPoints[0].y);
|
||||||
|
|
||||||
|
for (var i = 1; i < drawnPoints.length; i++) {
|
||||||
|
graphics.lineTo(drawnPoints[i].x, drawnPoints[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
graphics.closePath();
|
||||||
|
graphics.fillPath();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
12
yarn.lock
12
yarn.lock
|
|
@ -2758,6 +2758,11 @@ esutils@^2.0.2:
|
||||||
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
|
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
|
||||||
integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
|
integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
|
||||||
|
|
||||||
|
eventemitter3@^5.0.0:
|
||||||
|
version "5.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
|
||||||
|
integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
|
||||||
|
|
||||||
events@^3.3.0:
|
events@^3.3.0:
|
||||||
version "3.3.0"
|
version "3.3.0"
|
||||||
resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
|
resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
|
||||||
|
|
@ -4669,6 +4674,13 @@ path-to-regexp@^6.2.1:
|
||||||
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
|
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
|
||||||
integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
|
integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
|
||||||
|
|
||||||
|
phaser@^3.60.0:
|
||||||
|
version "3.60.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.60.0.tgz#8a555623e64c707482e6321485b4bda84604590d"
|
||||||
|
integrity sha512-IKUy35EnoEVcl2EmJ8WOyK4X8OoxHYdlhZLgRGpNrvD1fEagYffhVmwHcapE/tGiLgyrnezmXIo5RrH2NcrTHw==
|
||||||
|
dependencies:
|
||||||
|
eventemitter3 "^5.0.0"
|
||||||
|
|
||||||
picocolors@^1.0.0:
|
picocolors@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
|
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue