gaweph / p5-typescript-starter Goto Github PK

View Code? Open in Web Editor NEW

339.0 10.0 174.0 2.46 MB

Base starter project using p5js and typescript

License: MIT License

HTML 20.30% TypeScript 79.70%

p5js typescript starter-project project-tag

p5-typescript-starter's Introduction

P5 TypeScript Starter

This project will quickly get you something working in p5.js and typescript.

Demo

Click here for Demo

This demo is based on the Regular Polygon sketch available in the p5js examples.

Getting Started

Installing

git clone https://github.com/Gaweph/p5-typescript-starter.git

npm install

Using

npm start

A local version will now be running on localhost:3000.

Advanced

Global and Instanced Modes

P5 is able to run in either global or instance mode.

This starter project uses global mode by default to bring it in line with most of the online resources provided by the project.

As stated on the P5 wiki:

While this is convenient (and friendlier) it's important to note that this can lead to problems and confusion down the road when mixing other JS libraries or trying to embed multiple p5 sketches on the same page. A safer, more advanced methodology is to create a p5 sketch as an object "instance".

The following examples are both functionally the same.

Global Mode

let x = 100;
let y = 100;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(0);
  fill(255);
  rect(x, y, 50, 50);
}

Instanced Mode

var sketch = (p: p5) => {
  this.x = 100;
  this.y = 100;
  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
  };

  p.draw = () => {
    p.background(0);
    p.fill(255);
    p.rect(this.x, this.y, 50, 50);
  };
};

new p5(sketch);

This starter project will work with either mode, feel free to experiment with both.

Using External Libraries

To use an external library, e.g. qrcode-generator.

Install the library with npm install --save-dev qrcode-generator.

Add a script tag to your index.html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script>

Import via global.d.ts.

import qrcode = require('qrcode-generator');

Use in sketch.ts.

var qr = qrcode(4, 'L');
qr.addData('https://github.com/Gaweph/p5-typescript-starter');
qr.make();

text(qr.createASCII(), 1, 1);

See dblock/p5qr for a working sample.

Copyright and License

MIT License, see LICENSE for details.

p5-typescript-starter's People

Contributors

Stargazers

Watchers

Forkers

tpetrychyn arashout johnbburk sandorlevi jsphweid rodrijuarez paper-radio payne mattlink ffilipus andreeek voakie jamesstoneco blissboy alfaodin lamavia stephensmitchell-forks macfurax unmarco themightypenguin hoonida-artlab rc6886 lovespictures t-lechner travelingman lucasgouvea bergerskogen sthaha eicksl kompuser jf--- legzo ivanshuba john-osullivan demeshkin eriksharp pamartn petevdp doriclaudino 0xcafb khanghy2130 odedw antoniozanini ikesau michaelpaulukonis vigi-p infernox64 maciekphoto atipezda julesfouchy tomasdisk cmllngf jaskp alokissunny mcgallag alvinleung hans aarif1430 marieguillot hwei dblock casmirconsensys yush dcsan gabriel-yuca idamadam okathira drjkl gummiees potojs squidsuit0x huynhtastic hkar19 michaelbergin elevatedesigner astronuun brentvatne diegomoreiradd ooozws d10gomonteiro xie-hui zishe ochsec maxim-durand justotherel rasadi yearnings cuddleofdeath micrub cheney-enterprises ihateids rpghugo jbicker 0brine goodvibesohmly missmilo pawel-dlugosz weareacademy cadenz-assignments vale-pixel

p5-typescript-starter's Issues

How do you import/use external libraries?

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?

How to deploy it to a server？

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？

Can't access p5.dom methods

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?

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.

Require is not defined

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.

createSlider seems to be undefined

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)

Missing properties of p5.color

It is missing some properties of p5.Color like levels or maxes

Processing KEY constants are missing

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.

SourceMap directory is incorrect

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

clone a clean copy of the repo.
npm i
npm run start-compile
check the last line in build/build.js

werid typescript error

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

Import destroys build

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.

How to use clmtrackr

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"
}

How to use sound

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 ?