Skip to content

Commit eb006bb

Browse files
0xFlicker0xFlicker
committed
ok
1 parent dc442e3 commit eb006bb

File tree

4 files changed

+46
-102
lines changed

4 files changed

+46
-102
lines changed

‎www-next/public/schwing/index.html

+27-102
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,20 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Generative Art with Canvas</title>
7+
<style>
8+
html,
9+
body {
10+
height: 100%;
11+
margin: 0;
12+
overflow: hidden; /* Prevent scrollbars */
13+
}
14+
canvas {
15+
display: block; /* Remove the default margin of the canvas */
16+
}
17+
</style>
718
</head>
819
<body>
920
<canvas id="destinationCanvas" width="400" height="400"></canvas>
10-
<button onclick="generateArt()">Generate Art</button>
1121
<script>
1222
const words = [
1323
"austin",
@@ -24,6 +34,12 @@
2434
const ctx = canvas.getContext("2d");
2535

2636
async function generateRandomSeed() {
37+
// read query string search param to get seed from URL?id=123
38+
const urlParams = new URLSearchParams(window.location.search);
39+
const seed = urlParams.get("id");
40+
if (seed) {
41+
return seed;
42+
}
2743
const array = window.crypto.getRandomValues(new Uint8Array(32));
2844
const hashBuffer = await crypto.subtle.digest("SHA-256", array);
2945
const hashArray = Array.from(new Uint8Array(hashBuffer));
@@ -36,122 +52,31 @@
3652
return [color1, color2];
3753
}
3854

39-
function drawZigZag(ctx, width, height) {
40-
const zigZagWidth = width / 10;
41-
ctx.beginPath();
42-
ctx.moveTo(0, 0);
43-
let x = 0,
44-
y = 0;
45-
while (x < width && y < height) {
46-
x += zigZagWidth;
47-
y = y === 0 ? height / 2 : 0;
48-
ctx.lineTo(x, y);
49-
}
50-
ctx.strokeStyle = "black";
51-
ctx.lineWidth = 2;
52-
ctx.stroke();
53-
ctx.closePath();
54-
}
55-
56-
function fillZigZag(ctx, width, height, colors) {
55+
function fillRects(ctx, width, height, colors) {
5756
const [color1, color2] = colors;
5857
ctx.fillStyle = color1;
5958
ctx.fillRect(0, 0, width / 2, height);
6059
ctx.fillStyle = color2;
6160
ctx.fillRect(width / 2, 0, width / 2, height);
6261
}
6362

64-
function getRandomPosition(seed, width, height) {
65-
const x = parseInt(seed.slice(0, 2), 16) % width;
66-
const y = parseInt(seed.slice(2, 4), 16) % height;
67-
return [x, y];
68-
}
69-
70-
function drawText(ctx, width, height, words, seed) {
71-
ctx.font = "20px Arial";
72-
ctx.fillStyle = "black";
73-
const positions = [];
74-
const maxAttempts = 100; // Maximum attempts to find a non-overlapping position
75-
const cornerDeadZone = 50; // Distance from corners where no text is placed
76-
77-
function shuffleArray(array) {
78-
for (let i = array.length - 1; i > 0; i--) {
79-
const j = Math.floor(Math.random() * (i + 1));
80-
[array[i], array[j]] = [array[j], array[i]]; // Swap elements
81-
}
82-
return array;
83-
}
84-
shuffleArray([...words])
85-
.slice(0, Math.random() < 0.5 ? 2 : 3)
86-
.forEach((word) => {
87-
let attempts = 0;
88-
let [x, y] = getRandomPosition(seed + word, width, height);
89-
90-
// Adjust position if too close to a corner
91-
x = Math.max(x, cornerDeadZone);
92-
y = Math.max(y, cornerDeadZone);
93-
x = Math.min(x, width - cornerDeadZone);
94-
y = Math.min(y, height - cornerDeadZone);
95-
96-
while (
97-
positions.some(
98-
([px, py]) => Math.abs(px - x) < 50 && Math.abs(py - y) < 20
99-
) &&
100-
attempts < maxAttempts
101-
) {
102-
[x, y] = getRandomPosition(
103-
seed + word + Math.random().toString(16).slice(2),
104-
width,
105-
height
106-
);
107-
// Adjust for corner dead zone again after repositioning
108-
x = Math.max(x, cornerDeadZone);
109-
y = Math.max(y, cornerDeadZone);
110-
x = Math.min(x, width - cornerDeadZone);
111-
y = Math.min(y, height - cornerDeadZone);
112-
attempts++;
113-
}
114-
115-
if (attempts < maxAttempts) {
116-
positions.push([x, y]);
117-
118-
if (Math.random() > 0.5) {
119-
ctx.fillText(word, x, y);
120-
} else {
121-
ctx.save();
122-
ctx.translate(x, y);
123-
ctx.rotate(Math.PI / 2);
124-
ctx.fillText(word, 0, 0);
125-
ctx.restore();
126-
}
127-
} else {
128-
// Handle the case where a suitable position wasn't found
129-
console.log(
130-
`Could not place '${word}' after ${maxAttempts} attempts.`
131-
);
132-
}
133-
});
63+
let seedPromise = generateRandomSeed();
64+
function resizeCanvas() {
65+
canvas.width = window.innerWidth;
66+
canvas.height = window.innerHeight;
67+
generateArt(); // Regenerate the art to fit the new canvas size
13468
}
13569

13670
async function generateArt() {
137-
const seed = await generateRandomSeed();
71+
const seed = await seedPromise;
13872
const [color1, color2] = getRandomColorPair(seed);
13973
ctx.clearRect(0, 0, canvas.width, canvas.height);
14074

14175
// Draw zigzag and fill with colors
142-
drawZigZag(ctx, canvas.width, canvas.height);
143-
fillZigZag(ctx, canvas.width, canvas.height, [color1, color2]);
144-
145-
// Draw text
146-
drawText(ctx, canvas.width, canvas.height, words, seed);
147-
148-
// Export canvas to PNG
149-
const dataURL = canvas.toDataURL("image/png");
150-
const link = document.createElement("a");
151-
link.download = "generated_art.png";
152-
link.href = dataURL;
153-
link.click();
76+
fillRects(ctx, canvas.width, canvas.height, [color1, color2]);
15477
}
78+
window.addEventListener("load", resizeCanvas);
79+
window.addEventListener("resize", resizeCanvas);
15580
</script>
15681
</body>
15782
</html>

‎www-next/public/schwing/token.jpg

3.47 MB
Loading

‎www-next/src/app/schwing/metadata/[tokenId]/route.tsx

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { type NextRequest, NextResponse } from "next/server";
2+
import { type IMetadata } from "@/utils/metadata";
3+
4+
interface Params {
5+
tokenId: string;
6+
}
7+
8+
export async function GET(req: NextRequest, { params }: { params: Params }) {
9+
const { tokenId } = params;
10+
const { createHmac } = await import("crypto");
11+
12+
return NextResponse.json<IMetadata>({
13+
id: Number(tokenId),
14+
name: `Schwing #${tokenId}`,
15+
image: `${process.env.OG_BASE_URL}/schwing/token.jpg`,
16+
animation_url: `${process.env.OG_BASE_URL}/schwing/index.html?id=0x${createHmac("sha256", process.env.SEED_SECRET!).update(tokenId).digest("hex")}`,
17+
});
18+
}

‎www-next/src/utils/metadata.ts

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export interface IMetadata {
1717
description?: string;
1818
tokenId?: string;
1919
external_url?: string;
20+
animation_url?: string;
2021
name: string;
2122
attributes?: IMetadataAttribute[];
2223
properties?: Record<string, string>;

0 commit comments

Comments
 (0)