20240905/Untitled-Maze-Game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init repository with p5js and babylon

Browse Source
This commit is contained in:
pobadoba
2026-05-05 18:17:28 +09:00
commit 66f5f35a9e
13 changed files with 1682 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored Normal file
View File

@@ -0,0 +1,5 @@
node_modules
.DS_Store
dist
dist-ssr
*.local

21
LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 Andrea Bianchi
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

141
README.md Normal file
View File

@@ -0,0 +1,141 @@
# P5.js-vite Starter Template 🚀
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
[Vite](https://vitejs.dev/) starter template to scaffold a new [p5.js](https://p5js.org) project.
This is an unopinionated template; aside from P5.js and Vite, the rest of your project's tools are entirely up to you.
## Live demo
For a live demo please [visit this page](https://p5js-vite-demo.surge.sh).
## Installation
Pull the template files with [degit](https://github.com/Rich-Harris/degit) and install dependencies.
```
npx degit makinteract/p5js-vite my-project
cd my-project
npm install
npm run dev
```
## npm scripts
- `npm run dev` - Starts the development server at port [3000](http://localhost:3000/)
- `npm run build` - Builds the application in a `dist` folder
- `npm run preview` - Serves the build files (`dist` folder) locally at port [5000](http://localhost:3000/)
Note that if after this last command you do not see anything, you can use instead this other command:
- `npm run preview --host` - You should then be able to see your files locally at port [5000](http://localhost:3000/)
## A single p5.js sketch
```js
import '../css/style.css';
import { sketch } from 'p5js-wrapper';
sketch.setup = function () {
createCanvas(800, 600);
};
sketch.draw = function () {
background(127); // grey
fill(255, 0, 0); // red
noStroke();
rectMode(CENTER);
rect(width / 2, height / 2, 50, 50);
};
sketch.mousePressed = function () {
console.log(`I am here at ${mouseX}:${mouseY}`);
};
```
And here the body of the html file:
```html
<body>
<script type="module" src="/src/single_sketch.js"></script>
</body>
```
## Multiple p5.js sketches
If you want to use multiple sketches, you need to use a different syntax.
```js
import '../css/style.css';
import { p5 } from 'p5js-wrapper';
let sketch1 = new p5((p) => {
p.setup = () => {
const one = document.getElementById('one');
p.createCanvas(one.clientWidth, one.clientHeight);
};
p.draw = () => {
p.background(100);
};
}, 'one');
// Sketch2
let sketch2 = new p5((p) => {
p.setup = () => {
const two = document.getElementById('two');
p.createCanvas(two.clientWidth, two.clientHeight);
};
p.draw = () => {
p.background(170);
};
}, 'two');
```
This file is expecting two divs in the html file:
```html
<body>
<script type="module" src="/src/multi_sketch.js"></script>
<div id="one"></div>
<div id="two"></div>
</body>
```
## Adding sound
Sound is an [experimental feature](https://github.com/makinteract/p5js-wrapper/blob/main/README_SOUND.md).
Examples usage:
```js
import { sketch } from 'p5js-wrapper';
import 'p5js-wrapper/sound';
import mysound from './mysound.mp3';
let soundEffect;
sketch.setup = function () {
createCanvas(100, 100);
soundEffect = loadSound(mysound);
};
sketch.draw = function () {
background('#eeeeee');
};
// Play sound on click
sketch.mousePressed = function () {
soundEffect.play();
};
```
This example assumes you have a file _mysound.mp3_ in the _src_ folder.
## License
This project is open source and available under the [MIT License](LICENSE).

61
css/style.css Normal file
View File

@@ -0,0 +1,61 @@
html,
body {
margin: 0;
padding: 5px;
align-items: center;
text-align: center;
}
canvas {
display: block;
}
#one {
display: block;
width: 800px;
height: 600px;
}
#two {
display: block;
margin-top: 10px;
width: 800px;
height: 600px;
}
/* Options in index.html */
.options {
display: inline-block;
clear: both;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.option {
float: left;
padding: 50px;
}
.emoji {
font-size: 100px;
vertical-align: middle;
line-height: 2;
clear: both;
margin: auto;
}
.description {
margin: auto;
margin-top: -50px;
font-family: 'Times New Roman', Times, serif;
font-size: 25px;
letter-spacing: 0.6px;
word-spacing: 2px;
color: #000000;
font-weight: normal;
text-decoration: none;
font-style: normal;
font-variant: small-caps;
text-transform: none;
}

8
favicon.svg Normal file
View File

@@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 28 28" enable-background="new 0 0 28 28" xml:space="preserve">
<path fill="#ED225D" stroke="#ED225D" stroke-miterlimit="10" d="M16.909,10.259l8.533-2.576l1.676,5.156l-8.498,2.899l5.275,7.48
l-4.447,3.225l-5.553-7.348L8.487,26.25l-4.318-3.289l5.275-7.223L0.88,12.647l1.678-5.16l8.598,2.771V1.364h5.754V10.259z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

27
index.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta charset="utf-8" />
<title>P5.js Template</title>
</head>
<body>
<div class="options">
<div class="option">
<div class="emoji">🐪</div>
<div class="description">
<a href="single_sketch.html">Single sketch</a>
</div>
</div>
<div class="option">
<div class="emoji">🐫</div>
<div class="description">
<a href="multi_sketch.html">Multi sketch</a>
</div>
</div>
</div>
</body>
</html>

13
multi_sketch.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/multi_sketch.js"></script>
<canvas id="renderCanvas"></canvas>
</body>
</html>

1327
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

16
package.json Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "p5js-vite",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^8.0.10"
},
"dependencies": {
"babylonjs": "^9.5.1",
"p5js-wrapper": "^1.2.3"
}
}

12
single_sketch.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Single sketch</title>
</head>
<body>
<script type="module" src="/src/single_sketch.js"></script>
</body>
</html>

16
src/multi_sketch.js Normal file
View File

@@ -0,0 +1,16 @@
import * as BABYLON from "babylonjs";
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("cam", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);
engine.runRenderLoop(() => {
scene.render();
});

20
src/single_sketch.js Normal file
View File

@@ -0,0 +1,20 @@
import '../css/style.css';
import {sketch} from 'p5js-wrapper';
sketch.setup = function(){
createCanvas (800, 600);
}
sketch.draw= function(){
background(100);
fill(255, 0, 0);
noStroke();
rectMode(CENTER);
rect(mouseX, mouseY, 50, 50);
}
sketch.mousePressed = function(){
console.log('here');
}

15
vite.config.js Normal file
View File

@@ -0,0 +1,15 @@
// vite.config.js
const { resolve } = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
single: resolve(__dirname, 'single_sketch.html'),
multi: resolve(__dirname, 'multi_sketch.html')
}
}
}
})