gaweph / p5-typescript-starter Goto Github PK

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...

1. clone a clean copy of the repo.
2. npm i
3. npm run start-compile
4. check the last line in 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？