Comments (8)
Since your using p5 in instanced mode. You can delete the global.d.ts file and then add this to the top of your sketch.ts file
import * as p5 from "p5";
from p5-typescript-starter.
This previous issue #4 may help.
Looks like they ended up using parcel to ommit the tsconfig file and package the application for the browser.
from p5-typescript-starter.
Thank you, that works for me :)
Now it compiles just fine, but it still doesn't work somehow. I changed my sketch.ts to this:
import Carcassonne from './game'
let game = new carcasonne()
function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(0);
fill(255);
rect(10, 10, 50, 50);
}
I abandoned the instance-mode because I thought it would fix my error before, but even in instance mode, the sketch doesn't work when I import my module. In both modes I just get a white screen in the browser :[ Can you tell my how I can make it work?
from p5-typescript-starter.
Are there any errors in the console? If no errors I think you can run.
new p5();
In the console. That will tell you if p5 opened in global mode (I believe if it sees draw() or setup() it runs in global mode)
from p5-typescript-starter.
There are no errors, and it also doesn't work with new p5()
:/
It's pretty weird when I import my module setup() and draw() gray out and I get the hint " 'setup' is declared but its value is never read." Do you have any idea why that might happen ?
from p5-typescript-starter.
Working example here:
https://github.com/Gaweph/p5-typescript-starter/tree/import_example
You are probably going to need some sort of bundler if you are going to start importing modules. I used rollup in this small example, which appears to bundle everything into a single self loaded js file.
Heres an article if you want to go more in depth into this stuff:
https://medium.com/@ajmeyghani/javascript-bundlers-a-comparison-e63f01f2a364
Basically, I'm targetting ES2015 module type in tsconfig. I removed the global.d.ts file and also this needs to run in instanced mode (I kept getting white screen you mentioned otherwise) and then told index.html to point to bundle.js
Good luck sir.
from p5-typescript-starter.
It's a little annoying to put p5 in front of everything, especially when setting it as a class-variable so it turns to 'this.p5', but hey, it works now :) Thanks a lot for helping ! When I find a solution that works in global mode too I'll make a pull-request :)
from p5-typescript-starter.
I ended up passing a variable called 'p' of type p5 around in instanced mode. Which seems to work nicely.
Maybe this starter should be changed to use a bundler and instanced mode out of the box. I wanted it to reflect the documentation of the p5 main site. Which is in global mode with sketch file.
Good luck with your project.
from p5-typescript-starter.
Related Issues (13)
- Can't access p5.dom methods HOT 4
- werid typescript error HOT 2
- How do you import/use external libraries? HOT 3
- Missing properties of p5.color HOT 4
- SourceMap directory is incorrect HOT 3
- How to use sound HOT 7
- How to use clmtrackr HOT 6
- How to deploy it to a server? HOT 3
- Routing to mulitple Sketches HOT 2
- Require is not defined HOT 7
- Processing KEY constants are missing HOT 1
- createSlider seems to be undefined HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from p5-typescript-starter.