gaweph / p5-typescript-starter Goto Github PK
View Code? Open in Web Editor NEWBase starter project using p5js and typescript
License: MIT License
Base starter project using p5js and typescript
License: MIT License
createSlider
throws an Uncaught ReferenceError: createSlider is not defined
e.g.
function setup() {
createCanvas(windowWidth, windowHeight)
}
function draw() {
rect(width/2 - 40 , height/2 - 30, 80, 60)
}
let x = createSlider(0, 1, 10)
When I try to reference any p5.dom methods, such as .parent(), I get the error:
sketch/sketch.ts(125,14): error TS2339: Property 'parent' does not exist on type 'Element'.
When I look in the p5.d.ts file I can see it's there.
Is there anything else I need to add?
It is very nice work, I am just struggling to use sound via loadSound. I am unable to get it working with the starter. Any idea, please ?
How do I use it with imports?
If I try to use:
import Shapes = require('./shapes');
import p5 = require("p5");
or:
import Shapes from "./shapes";
import p5 = require("p5");
I get
Uncaught ReferenceError: define is not defined
at build.js:1
I tried setting "module": "amd" in tsconfig.json, but no luck.
Thanks for making this boileplate, it has helped me heaps in my p5 learning journey already.
How would you add URL routing such that multiple sketches can be developed in this repository? It's a common use case to work on different independent sketches and I'd like to take advantage of all the nice features such as typescript and automatic browser reloads that this setup has to offer.
I want to be able to work on different sketches and access them using URls like:
http://localhost:3000/sketch1
http://localhost:3000/sketch2
Ideally, the compiler should exclude files that are not relevant to the requested sketch to keep compile and load times fast.
related: microsoft/TypeScript#35021
right away ran into this error after npm install
& npm start
:
node_modules/typescript/lib/tsc.js:10248
return !!(module.flags & 1024);
^
TypeError: Cannot read property 'flags' of undefined
I am having trouble using clmtrackr (https://github.com/auduno/clmtrackr) with the template. clm is undefined in the browser no matter what approach I use for import. The library works perfectly fine with public javascript p5 examples.
Using the same way as for qrcode library does not work (import clm = require('clmtrackr')). I would be very grateful for any help. My package.json:
"dependencies": {
"clmtrackr": "^1.1.2",
"qrcode-generator": "^1.4.4"
},
"devDependencies": {
"@types/p5": "^1.3.3",
"@types/clmtrackr": "^1.1.1",
"browser-sync": "^2.26.12",
"npm-run-all": "^4.1.5",
"typescript": "^3.8.3"
}
It is missing some properties of p5.Color
like levels
or maxes
P5JS's LEFT_ARROW
, RIGHT_ARROW
, etc. are missing from the types. The code does compile but it would be better, if we didn't have to look at the errors.
What's the right way to import and use something like https://github.com/kazuhikoarase/qrcode-generator (or https://github.com/1w2w3y/qrcode-generator-ts) into this?
By the tsc config, ts expects the source maps to be in sketch/sketch/build.js.map
. The source maps are actually generated into build/build.js.map
. I was able to fix the issue in my own project by changing the map root setting in tsconfig to ../build
.
You can confirm the issue by walking through the following process...
npm i
npm run start-compile
build/build.js
I don't know if this fits here, if not I'm sorry.
When I import a custom file at the top of my sketch.ts I get the error "error TS2686: 'p5' refers to a UMD global, but the current file is a module. Consider adding an import instead."
Why does this happen just because I add an import?
This is my sketch.ts:
import Carcasonne from './game'
const carcasonne = new Carcasonne()
var sketch = (p: p5) => {
p.setup = () => {
p.createCanvas(p.windowWidth, p.windowHeight);
}
p.draw = () => {
p.background(0);
p.fill(255);
carcasonne.draw()
}
}
new p5(sketch);
function windowResized() {
createCanvas(windowWidth, windowHeight);
}
The rest is the same.
First of all, thank you for the template project, I have written a game based on this project, but how can I deploy this code to my Nginx? Or to github page like you did?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.