Skip to content

Commit ed1e8b1

Browse files
sshh12sshh12
committed
tweaks
1 parent f4eb52b commit ed1e8b1

File tree

5 files changed

+158
-0
lines changed

5 files changed

+158
-0
lines changed

‎images/NextjsPixiDockerFile‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
FROM python:3.11
2+
3+
WORKDIR /
4+
5+
RUN apt-get update && \
6+
apt-get install -y --no-install-recommends \
7+
curl \
8+
wget \
9+
zip \
10+
unzip && \
11+
curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
12+
apt-get install -y --no-install-recommends nodejs && \
13+
apt-get clean && \
14+
rm -rf /var/lib/apt/lists/*
15+
16+
RUN node --version && npm --version
17+
18+
RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-dir src --app --no-turbopack --yes && \
19+
cd frontend && \
20+
npm install pixi.js @pixi/mesh-extras raw-loader --force && \
21+
npm run build
22+
23+
RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/next.config.mjs && \
24+
curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/src/app/layout.js && \
25+
curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/src/app/page.js && \
26+
mkdir -p /frontend/src/app/pixi && \
27+
curl -o /frontend/src/app/pixi/app.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/src/app/pixi/app.js && \
28+
rm -rf /frontend/public/*.svg
29+
30+
RUN ls -asl /frontend && \
31+
ls -asl /frontend/public && \
32+
ls -asl /frontend/src/app && \
33+
cat /frontend/package.json
34+
35+
EXPOSE 3000

‎images/pixi/next.config.mjs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
images: {
4+
remotePatterns: [
5+
{
6+
protocol: 'https',
7+
hostname: 'pixijs.com',
8+
pathname: '/assets/**',
9+
},
10+
],
11+
},
12+
};
13+
14+
export default nextConfig;

‎images/pixi/src/app/layout.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Geist, Geist_Mono } from 'next/font/google';
2+
import './globals.css';
3+
4+
const geistSans = Geist({
5+
variable: '--font-geist-sans',
6+
subsets: ['latin'],
7+
});
8+
9+
const geistMono = Geist_Mono({
10+
variable: '--font-geist-mono',
11+
subsets: ['latin'],
12+
});
13+
14+
export const metadata = {
15+
title: 'Pixi.js App',
16+
description: 'Generated by create next app',
17+
};
18+
19+
export default function RootLayout({ children }) {
20+
return (
21+
<html lang="en">
22+
<body
23+
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
24+
>
25+
{children}
26+
</body>
27+
</html>
28+
);
29+
}

‎images/pixi/src/app/page.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
5+
export default function Home() {
6+
useEffect(() => {
7+
(async () => {
8+
await import('./pixi/app');
9+
})();
10+
}, []);
11+
return <div></div>;
12+
}

‎images/pixi/src/app/pixi/app.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Application, Assets, Graphics, MeshRope, Point } from 'pixi.js';
2+
3+
(async () => {
4+
// Create a new application
5+
const app = new Application();
6+
7+
// Initialize the application
8+
await app.init({ resizeTo: window });
9+
10+
// Append the application canvas to the document body
11+
document.body.appendChild(app.canvas);
12+
13+
// Load the snake texture
14+
const texture = await Assets.load('https://pixijs.com/assets/snake.png');
15+
16+
let count = 0;
17+
18+
// Build a rope from points!
19+
const ropeLength = 45;
20+
21+
const points = [];
22+
23+
for (let i = 0; i < 25; i++) {
24+
points.push(new Point(i * ropeLength, 0));
25+
}
26+
27+
// Create the snake MeshRope
28+
const strip = new MeshRope({ texture, points });
29+
30+
strip.x = -40;
31+
strip.y = 300;
32+
33+
app.stage.addChild(strip);
34+
35+
const g = new Graphics();
36+
37+
g.x = strip.x;
38+
g.y = strip.y;
39+
app.stage.addChild(g);
40+
41+
// Start animating
42+
app.ticker.add(() => {
43+
count += 0.1;
44+
45+
// Make the snake
46+
for (let i = 0; i < points.length; i++) {
47+
points[i].y = Math.sin(i * 0.5 + count) * 30;
48+
points[i].x = i * ropeLength + Math.cos(i * 0.3 + count) * 20;
49+
}
50+
renderPoints();
51+
});
52+
53+
function renderPoints() {
54+
g.clear();
55+
g.moveTo(points[0].x, points[0].y);
56+
57+
for (let i = 1; i < points.length; i++) {
58+
g.lineTo(points[i].x, points[i].y);
59+
g.stroke({ width: 2, color: 0xffc2c2 });
60+
}
61+
62+
for (let i = 1; i < points.length; i++) {
63+
g.drawCircle(points[i].x, points[i].y, 10);
64+
g.fill({ color: 0xff0022 });
65+
g.stroke({ width: 2, color: 0xffc2c2 });
66+
}
67+
}
68+
})();

0 commit comments

Comments
 (0)