williamngan / pt Goto Github PK

I'm trying to collide particles with a circle, but there is no explicit method for that. I was thinking about making a new particle for the circle, but I'd have to override it's being a particle (no movement, mass, etc.).

For example, when I use Pt with React I should be able to destroy the Canvas Instance when the component leave.

This may already be achievable but I'm not quite sure how to do it so pardon if this is the wrong place for this. I am using this for a background effect very similar to the space.add demo. However I have some other dom elements positioned over the canvas which prevents the effect from occurring when the mouse passes over them.

I would like to make the onMouseAction work with a window even instead of just the canvas elements mouse event.

Hopefully that makes sense and sorry again if this is the wrong place for this.

Compiling pt currently requires a global installation of gulp. I think it can be worth introducing some npm scripts to avoid having to install gulp globally.

Example (package.json):

{
  name: "ptjs",
  ...
  "scripts": {
    "gulp:watch": "gulp" <-- uses the local gulp dependency
  }
}

Documentation url does not load into the correct scroll position.

Canvas drawings become blurry on screens with higher window.devicePixelRatio.

My current quick hack is just to use the css transform: scale. Not pretty 😥

See https://github.com/williamngan/pt/blob/master/LICENSE#L178

So, we can have something like:

space.bindMultiTouch();

And a onTouchAction callback. But it needs to take in to consideration that there might be several touch events at any point.

When initializing a CanvasSpace on a container that already contains a canvas, the size attribute of the CanvasSpace instance does not get updated with the canvas element's size, resulting in empty renderings. This case should be supported according to documentation ("an id property which refers to the "id" attribute of the canvas element in DOM. If no canvas element with this id is found, a new canvas element will be created."). I'd also see dropping this use case from the docs as a quicker solution.

Following code doesn't work.

var grid = new Grid([0, 0]).to([50, 50]).init(5, 5);
console.log(grid.canFit(0, 0, 1, 1));

Gives us Uncaught TypeError: Cannot read property '0' of undefined on this line:

In some cases, giving elements an id is undesirable. It would be better to just be able to pass in an object. For example with React, using IDs break the idea of writing reusable components.

Bad

var space = new CanvasSpace('canvas').setup( {bgcolor: '#f1f5f7'} )

render () {
  return (
    <canvas id="canvas" />
  )
}

Good

var space = new CanvasSpace(this.refs.canvas).setup( {bgcolor: '#f1f5f7'} )

render () {
  return (
    <canvas ref="canvas" />
  )
}

1. If you do a css transform: rotateX(30deg) on a canvas element, or any container containing a canvas element, the width/height values change.
2. If you then resize the browser window the canvas size is updated with the new width/height.
3. In my case, I wanted the actual canvas size to stay the same despite the rotation.

I fixed it by doing something like this:

window.addEventListener('resize', () => {
    space.resize(someCanvasWidth, someCanvasHeight);
});

directly after CanvasSpace performs its auto-resize.

I don't think my solution is good since it request two extra renders for every resize event. Maybe CanvasSpace should have an option so that resize has to be called manually?

Only Easing.linear is showing up here: http://williamngan.github.io/pt/docs/#elemEasing_xt

File: Easing.coffee

Please, help
How to make canvas fluid, or simply reinit when window resizing.
Applying to the demos - I want make something interesting on my website with them.

including Noise, Shaping, (others?)

Is it possible to create a CanvasSpace with transparent background?

I'm currently using
new CanvasSpace('id').setup({ bgcolor: 'rgba(0,0,0,0.1)' });
with no luck

Thanks!

Hello!

Not sure if this is the right place to ask, but I'm wondering if there is a way to use text as a mask in pt.js.

I'm trying to combine the font.js and the samplepoints demo so that the dots transform into the text.

Awesome library by the way!

CanvasSpace(id, bgcolor) parameter should set background color initially.

Currently it requires another space.clear() to set background color.

In CanvasSpace, the canvas property in the documentation is incorrect. The correct property name is space.

I find the documentation for CanvasSpace to be unclear about how to initialize it and call its display() method. The CanvasSpace's id attribute is briefly explained as:
"an id property which refers to the "id" attribute of the canvas element in DOM. If no canvas element with this id is found, a new canvas element will be created."
While the display method's parent_id attribute is described as:
"the DOM element into which the canvas element should be appended".

So right now to select/obtain the canvas element you want to use for pt, you need to write something like CanvasSpace('canvasId').display('#canvasContainer'). I found it very easy to get confused and get it wrong, so I'm just suggesting to add one or two example usages there. And maybe highlight the fact that by default, with no parameters specified, it will simply append a new canvas element to a container with id "pt".

var c = new Color([0,0,0, 0.1]) should set c.alpha to 0.1

Thanks @mrgreenh for reporting

Is there a way to reproduce this easily in new version ?
http://williamngan.github.io/pt/demo/index.html?name=grid.occupy

I'm looking for a way to look for available space in a grid so Grid.occupy looked at a good way to start. But it's not available anymore.

Many thanks !

Clicking on the image thumbnail on docs page will go to 404

Good to have some common shaping functions available for use.