williamngan / pts Goto Github PK
View Code? Open in Web Editor NEWA library for visualization and creative-coding
Home Page: https://ptsjs.org
License: Apache License 2.0
A library for visualization and creative-coding
Home Page: https://ptsjs.org
License: Apache License 2.0
It looks like when you use a Tempo object to keep time, it calls start multiple times with the same count for steps 0 and 1.
Here's some code to reproduce - assumes you've got a space defined somewhere.
const tempo = new Tempo(120);
tempo.every(2).start((count) => {
console.log('on start: ', count);
});
space.add(tempo);
space.play()
I'm expecting the start function to be called once every two beats, but instead, I'm seeing an 'on start: count' message multiple times per beat. The console.log message is just printing out the same value over and over until the count changes.
Very cool library! I'm having a blast playing with it and am really admiring the attention to detail and API UX.
I had one question about the Utils.split
function. When called like this:
Utils.split([1,2,3], 2, 1, true) // [[1,2],[2,3],[3]]
with loopback set to true
, I would expect the last element of the returned array to be [3, 1]
, NOT [3]
. Is this an accurate expectation on my end? Or am I misunderstanding something?
I'm not sure if this is a bug, but the current action type implementation for dragging and releasing is not what I would expect, and seems counter intuitive to me. When initiating a drag and then releasing I would expect a sequence of actions to go like this move -> down -> [drag, move...] -> up
, however the current implementations gives move -> down -> [drag, move...] -> up -> down
. That final down
does not make sense to me since at this point the mouse is actually up. Is there a reason for this?
This is the snippet from src that causes the behavior.
`
/**
You can see how this effects the behavior in the mouse drag demo http://ptsjs.org/demo/edit/?name=canvasspace.action
My expectation would be that if you release while dragging the stretch
variable should be set to false
and the group of points should immediately start disappearing, however this only happens if you stop moving the mouse and then do a mouse press and release.
Sidequest: Would be convenient to have dragStart and dragEnd events (just say'n :D).
p.s. Love the library, great work!
Also update README.md
Hi @williamngan, this is a very amazing lib you've created there. Thanks a bunch :).
It seems that the UIDragger triggers drop
events on mouse up even when there has been no dragging. Let me know if this is not clear enough.
I'm gonna push a PR with a suggested fix which I tested for my usage. Hope it can help.
Quick observation: When using the following script tag
<script src="https://unpkg.com/pts/dist/pts.min.js"></script>
This line is not working
space.playOnce(200).bindMouse().bindTouch();
but this works
space.bindMouse().bindTouch().play();
So all is good.
When using this script tag mentioned in Getting Started
<script src="https://raw.githubusercontent.com/williamngan/pts/master/dist/pts.js"></script>
I get this error:
Refused to execute script from 'https://raw.githubusercontent.com/williamngan/pts/master/dist/pts.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
and can't do much with it.
All is good since the other tags works.
Hello,
Nice library, i have spent all morning trying to learn and find what it has to offer, and while i find it very nice and capable of doing a lot of good work, i cannot find how to perform actions on drag.
Reading the guide i see that there is that thing called players
in space that has a drag callback, and also in the docs i see that there is a pointeractions
drag property, but for me is unclear how to use those methods to create something simple like for example a drag slider.
Also, could this library be used to retrict the movement or make the illusion of dragging a particle over a line, even if this line is diagonal?
Thanks
Your library is great, but when I tried to make a circle go around the Rect edge,
I use Num.cycle to generate interval number, use
if (Num.equals(interval, 1, 0.001)) { console.log("equals"); edge++; if (edge > 3) { edge = 0; } }
to check interval number is near 1,
When interval number nears 1, I'll change the circle edge.
But, Num.cycle numbers always not in control, sometime it's under 1 for times, some times it across it for times.
Is there a best practice to accomplish this target?
https://ptsjs.org/guide/space-0500
Under the heading Players there is a broken link to IPlayer interface
Here we add an object that conforms to the IPlayer interface, which defines 4 optional callback functions:
I've been playing with Particles demo and I've noticed different behaviour comparing the same example in Safari and other browsers (Chrome & Firefox).
On Chrome, when I hit random particle with the one I have attached to my cursor, it feels like a real collision โ it changes the direction of movement and speed as well. When I do the same action on Safari, the particle kinda sticks to my cursor for a while (not always but most of the time). That behaviour feels definitely less natural.
Here's screen recording of the same demo file.
Running on macOS HighSierra 10.13.6, MBP Retina.
Looks like there's an error firing on the .analyze
functions, you can see it surfaced in this example: https://ptsjs.org/demo/edit/?name=sound.timeDomain
Really enjoying reading through the examples and documentation ๐
The exported html source code from demo editor is a bit hard to edit. Just need a few line-breaks to make it more readable.
I figure this should probably be a built in function to Circle
or Pt
or Line
. I'm implementing it myself now though
Hi @williamngan,
A bit in the style of #61 but different.
My onDrop
handler gets called twice every time a drop
event happens. I looked at stack traces and it is called on one side by the UIDragger
logic in UI.ts L446, and on the other side by the listen
handler in UI.ts L174 because I called UI.track()
for all event types on my UIDragger
.
For the moment, I get around the issue by tracking all events except drop
, but I was wondering if you think there is a better behavior we could imagine for this case. I think it would be a fairly frequent use-case and quite confusing to understand what happens. I'm willing to make the changes required if I understand what you think would be a good solution (if any) and how to implement it.
Thanks again for the great work on pts.
Hi,
In Chrome, whenever I build with webpack and import pts
I am seeing this error:
Uncaught TypeError: Constructor Float32Array requires 'new'
I have read that I need to use babel-plugin-transform-builtin-extend
in my .babelrc
, however it doesn't seem to help. Can someone post their working .babelrc/webpack babel-loader config?
Thanks!
See #11
The fix needs to account for various cases in document.querySelector(...)
Repro: open this in a new window, and see that it doesn't auto scroll to toTriangle
function
http://ptsjs.org/docs/?p=Op_Circle#function_toTriangle
Probably related to this: https://developer.mozilla.org/en-US/docs/Web/API/Touch_events#Additional_tips
Add background property to get / set background color of CanvasSpace
Hello!
I am trying to use the library with typescript, but importing the definitions fails.
I am getting Duplicate identifier 'Bound'
.
You can indeed see that export class Bound
appears twice in the definitions.
Any clue on how to fix it? ๐
https://github.com/williamngan/pts/blob/56cfbca/dist/pts.d.ts
Eg, A simpler API for these:
ctx.rotate(45 * Math.PI / 180);
ctx.fillRect(70,0,100,30);
ctx.setTransform(1, 0, 0, 1, 0, 0);
Thank you for the great job! I just fell in love with the style of coding with a glance to it.
First thing I wondered was that I want to use it for any general geometrical coding.
For instance, when coding such a logic: http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
Currently I made a glance to it and didn't find any shortcuts to run pts without canvas element.
Do you have such a plan or is it actually already posssible?
Make it easy to load an image, and to create screen capture.
Potentially provide an iterator/generator to easily go through all pixels in an image.
Hi. I have an issue with physics particles resize. Example: https://ptsjs.org/demo/?name=physics.particles.
When i refresh page on small size and then do big screen size, canvas has changed width but space with circles stay remains the same as it was before resizing to big screen.
Why resize doesn't work? Help me to fix this issue please.
I'm curious why the decision in how to render a given curve wasn't left to the Form (all curves are passed into the Form as a line group). For example, since bezier drawing is available natively on both canvas and svg it could be optionally used as an alternative rendering choice in those cases.
Using pts via npm
.
const space = new CanvasSpace(el);
space.setup({
bgcolor: '#ececec',
resize: true,
retina: true
});
const form = space.getForm();
getForm
is not currently a method on the space
object. Returning undefined.
I have created one project with Pts and it works really great, but when I run build script, it fails at minifying. I tried to compile library from source code, but I really don't know what exactly I need to change in configuration to make it work. Issue description at Create React App docs: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify
Hi, had a great time playing with this beautiful thing on my local develop build of Gatsby and managed to create a cool effect. I was very disappointed to discover that the build failed with the error Error: Constructor Float32Array requires 'new'
and nothing I have done has been able to rectify this (including the obvious adding of 'new', playing around with the babel config and even bringing the code inside the project as opposed to being a node module so I had more control over the transpilation.
Of course this is because this is an ES6 module but I can't figure out exactly what I need to do to get it to work. I guess you may not be familiar with Gatsby but could you tell me specifically what babel config needs to be done in order to get this to compile?
Many thanks :)
Image drawing on canvas and svg
Hi
I did not get into investigate why but website and library is not working on the phones
this should not be the case as no technologies are used that modern web browsers on phone do not support or is it?
Alex
Thanks your work. I'm having a lot of fun with the library :)
I found the need to remove an specific particle that I'm keeping track by its id.
When I add the particle world.add(particle, id)
I can later access it with world.particle(id)
Removing the particle though, it only can be done by its world's index
.
My current around is setting the particle id particle.id = id
, and then I iterate over all world particles to find its index:
getParticleIndex(id) {
for (let index = 0; index < world.particleCount; index++) {
if (world.particle(index).id === id) {
return index
}
}
return -1
}
Following the style of world.add()
it seems that it would make sense that world.remove()
could be used by an id
as well.
The following example throws an error:
world.removeParticle("non-existing-particle")
Same for this one:
let particle = world.particle("non-existing-particle")
Maybe the previous method should return null
if it does not exists.
Alternatively an aditional method could be added
let exists = world.particleExists("non-existing-particle")
:)
I'm trying to register a mouse click using the following:
const btn = UIButton.fromCircle( [p1, p2] );
btn.onClick( ui => {
console.log('btn clicked');
});
btn.render( g => form.fillOnly("#000").circle( g ) );
The button renders but nothing appears in console when clicking.
Also provide support SVG text layouts
Hi,
This looks awesome. Congrats!
Are you planning to integrate audio/sound generation in any way? I'm intrigued by the idea of mapping the points into sound or music. Any suggestion?
Thanks!
A bit of a follow up to #63.
UIDragger emits both onClick
and onDrop
when uidrop
happens. This is because uidrop
comes from the space's up
event (UI.ts#L449) which emits onClick
(UI.ts#L361). This can be managed in user land (that's what I do so far), but there may be an opportunity for a better behaviour. What are your thoughts on this?
If interested, I can have a go at starting a PR.
I'm completely befuddled. The demos on the main site and the react example (cloning and running) work just fine, but when I try the first "Getting started" example my own using the latest release my animations are not working at all.
Codepen reproduction: https://codepen.io/lilactown/pen/WKLGea
Strangely, closing and opening the devtools causes the animation to fire?? ๐
Confirmed in Chrome 68.0.3440.84 (Official Build) (64-bit) and Firefox 61.0.1 (64-bit).
Currently the state
method of UIButton
is always returning NaN
It seems that there is a tinny bug when initializing:
Line 316 in 4197690
if (!states.clicks) states.clicks = 0
:)
Any chance you could make a Pts.version() method or Pts.version property
I note that the experimental module UI.js is not exported from dist/es2015/_module.js
and dist/es2015/_lib.js
. Is there any specific reason for that? If developers want to use it, they have to export UI in these files.
pts.min.js
minified by Balili currently throws "Cannot declare a let variable twice: 'i'." when in mobile Safari and Chrome.
This is possibly due to this webkit bug:
https://bugs.webkit.org/show_bug.cgi?id=171041
Keeping this issue open until we can verify the minified version will work in mobile.
Use non-minified version when mobile support is needed, for now.
Add a Circle.fromTriangle
function to create a circle from 3 points.
Something like:
Circle.fromTriangle( pts:GroupLike, asCircumcircle:boolean ): Group
which maps to Triangle.circumcircle
and Triangle.incircle
respectively.
space.add custom resize function causing error?
space.add( {
start: (bound, space) => {
// code for init
},
animate: (time, ftime, space) => {
// code for animation
},
action: (type, x, y, event) => {
// code for interaction
},
resize: (size, event) => {
// code for resize
}
} );
Trying to run this in a Google Closure context (compiling to ES5), I'm running into this error when I install and import it via NPM, then compile it:
Closure compilation failed with 1 errors
--- node_modules/pts/dist/index.js:288
This code cannot be converted from ES6. extending native class: Array
Is there a way that you could provide an ES5-compatible bundle?
Any reason why https://unpkg.com/[email protected]/dist/ doesn't list either pts.min.js or pts.js ?
It lists https://unpkg.com/[email protected]/dist/index.js but I am not really sure how to import that directly into a webpage.
Pt.js works fine using <script src="https://unpkg.com/[email protected]/dist/module/pt.js"></script>
Pt.js works fine on a webpage without any build tools. Any idea if that is possible with Pts.js?
In Color documentation, some parameter and return type should provide the Color's max range. For example, HSL is usually (360, 1, 1) and RGB is (255,255,255).
I am trying out Pts for graphics on a structural analysis app (using Angular for the frontend). The scene initialises without anything shown, and as the user adds nodes and beams to the structure, I am calling this.space.add()
with the new line/pt.
For example:
drawBeam(i: number, j: number) {
let pti = this.nodes[i-1].pt;
let ptj = this.nodes[j-1].pt;
this.space.add((time, ftime, space) => {
this.form.line([pti, ptj])
})
}
As I understand it, this is creating a new animation callback function for every item added to the scene.
Is this a bad way to structure my code? Is there a better way to add new items to the scene after the initial setup?
Any tips are appreciated!
form.font( myfont ) doesn't update canvas context
I am using angular 6 and try to use the library by installing it using npm.
I recieved this error after importing the Pts.
ERROR in node_modules/pts/dist/pts.d.ts(6,14): error TS2300: Duplicate identifier 'Bound'.
node_modules/pts/dist/pts.d.ts(743,14): error TS2300: Duplicate identifier 'Bound'.
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.