pfych/experiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

88x31 canvas

Browse Source
This commit is contained in:
pfych 2024-08-23 18:42:45 +10:00
parent 2fb5c22a54
commit e0dd99472e
1 changed files with 87 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/88x31.html Normal file
View File

@ -0,0 +1,87 @@
<html>
<body>
<canvas
id="canvas"
width="88"
height="31"
style="image-rendering: pixelated"
></canvas>
</body>
<script>
// 76x26
const logo =
"iVBORw0KGgoAAAANSUhEUgAAAEwAAAAaCAYAAAAdQLrBAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB50lEQVRYCdVXi26EMAwb0/7/lzcZ4ZPnSx+0KXBIU9vEdpxcQdr2te75LUhvhfhdYfrs8tUFGuiEJkBFDT0zhvWOx73QQ9csvolOXNVQZCKKJZZvSqH+sIefpnwOYNhgTvk8lRU3LM/dA5WyB6av4wPbnbcUvZJsmq8Rz6jG2HzldQrqd9SzavzrmQcF9LRCHrE9fHBqOGpGGOZYL1qd5/Vco4XXGi+uiyqotX+JHEA3QH4PzjHgQi+KU1dXre2cUk7jqlXa77r4hmHjRUBinCti+njBkoZysI9wjnFtz+tZsT3ayvU9ey3qnPnoF0W86oeeu/qLPvp39Itb4ob9HPnS2xXlEevRKXHf4mdu2Bt5IlBromcIE6XnqHcNrOW6NtAWd2n+zoH5UB59s/gr3DkweMge2vKhnxnYcjPHr+hDRBi1+XfA9iXCaj59XxtYa0BXmXUffvahRIONYs7rOmvTLSMuqFzkSnzHuY7yIqzmyXVchCGWq3JK+BZmqwGQi4SVQzMRjjmsEUfz5JdwzLe0FEd914wwxFK/iFExB2lOBVfsWfvKmkN91L5hQ4ITpMcPC709aWATs76OevX/knz12CFuFWIfcbtgmjfMG0EuiiGe+VxRI9PvPrCa6Vouy8jH3C40/AdInUY6Yxg1wwAAAABJRU5ErkJggg==";
const img = new Image();
img.src = `data:image/png;base64, ${logo}`;
const dBlue = "#86a8e7";
const lBlue = "#91eae4";
const squareSize = 10;
const { width, height } = canvas;
const ctx = canvas.getContext("2d");
let lastDrawTime = performance.now();
let shift = 0;
let imagePos = [0, 0];
let flip = [1, 1];
const renderBg = (delta) => {
for (let y = -squareSize; y < height; y += squareSize) {
const oddRow = y % (squareSize * 2);
for (let x = -squareSize; x < width; x += squareSize) {
const oddCol = x % (squareSize * 2);
ctx.fillStyle = oddRow
? oddCol
? dBlue
: lBlue
: oddCol
? lBlue
: dBlue;
ctx.fillRect(x + shift, y + shift, squareSize, squareSize);
}
}
if (shift > squareSize) {
shift = 0;
} else {
shift += 0.01 * delta;
}
};
const renderLogo = (delta) => {
const moveDistance = 0.02 * delta;
imagePos[0] += moveDistance * flip[0];
imagePos[1] += moveDistance * flip[1];
if (imagePos[0] + 38 >= width) {
flip[0] = -1;
} else if (imagePos[0] <= 0) {
flip[0] = 1;
}
if (imagePos[1] + 13 >= height) {
flip[1] = -1;
} else if (imagePos[1] <= 0) {
flip[1] = 1;
}
ctx.drawImage(img, ...imagePos, 38, 13);
};
const draw = (ms) => {
const delta = ms - lastDrawTime;
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, width, height);
renderBg(delta);
renderLogo(delta);
lastDrawTime = performance.now();
requestAnimationFrame(draw);
};
requestAnimationFrame(draw);
</script>
</html>