TypeScript
Hello rectangle!
hello-rectangle.ts
import p8g, {
background,
createCanvas,
rect,
} from './p8g.js';
p8g.draw = () => {
background(220);
rect(50, 50, 100, 100);
};
createCanvas(320, 320);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello rectangle!</title>
</head>
<body>
<script type="module" src="hello-rectangle.js"></script>
</body>
</html>
Run in browser
- p8g.zip
- npm
- Cookiecutter
.
├── hello-rectangle.ts
├── index.html
├── p8g.d.ts
└── p8g.js
0 directories, 4 files
tsc hello-rectangle.ts --module esnext --target es2017
Use something like python -m http.server or https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer to serve your sketch during development.
.
├── hello-rectangle.ts
├── index.html
└── vite.config.js
0 directories, 3 files
index.html
- <script type="module" src="hello-rectangle.js"></script>
+ <script type="module" src="hello-rectangle.ts"></script>
hello-rectangle.ts
- import { background, createCanvas, rect } from './p8g.js';
+ import { background, createCanvas, rect } from 'p8g.js';
vite.config.js
import { defineConfig } from 'vite';
import topLevelAwait from 'vite-plugin-top-level-await';
export default defineConfig({
plugins: [topLevelAwait()],
});
npm install p8g.js
npm install vite --save-dev
npm install vite-plugin-top-level-await --save-dev
npx vite
.
0 directories, 0 files
cookiecutter https://github.com/bernhardfritz/cookiecutter-p8g
cookiecutter-p8g is a Cookiecutter template for a p8g project.