New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to animate millions of points on browser canvas using two.js #691
Comments
updated screenshot image |
Thanks for posting your question. Two.js is unlikely to be able to render millions of points every frame and stay at 30+ FPS. There are two approaches to get you closer depending on the types of animation that you're trying to do. If the animation is like a timelapse adding new points to a still image then the way to render this in Two.js is to have a couple of rectangles and render them in different positions over time without clearing the background. Like so: const two = new Two({
type: Two.Types.canvas,
overdraw: true,
}).appendTo(document.body);
const shape = new Two.Rectangle(0, 0, 1, 1);
two.bind('update', function() {
const x = Math.random() * two.width;
const y = Math.random() * two.height;
shape.position.x = x;
shape.position.y = y;
});
two.play(); If you're using the Hope this helps |
Hi Jono Thanks for the quick response. I really appreciate that. My use case aligns with the keep adding new points to the canvas approach. The Two.Points approach would render all at once so I do not want to take that plus I want more control on the points. I will try out the first approach and update. However, in the snippet, should the shape not be a variable instead of a constant? Also, how would the two instance know about shape? |
Yes sorry, here's a working Codepen example to expand on that snippet: https://codepen.io/jonobr1/pen/MWBdPBy You'd wanna replace the random positioning of the shape to whatever data points you have from your algorithm. |
Hi Jono (a) To show bigger images inside the viewport, I tried passing a canvas ID as domElement whose height and width I can control using css. However it looks like two.js is overriding this canvas height and width. (b) Tried using fitted, however I still paint outside my physical screen. What would be the recommended way to show the canvas inside the physical screen dimensions? Thanks |
I am testing with ratio for canvas renderer. I will update my findings. |
You can pass the canvas element (not id) to control afterwards. Or you can also use const two = new Two({
domElement: document.querySelector('canvas')
});
// or
const two = new Two({
width: 800,
height: 800
});
// At some later point in your application
// life cycle
two.renderer.setSize(4096, 4096); |
Hi Jono
IMHO, this is a bug because user may want to keep the original applied css and there should be a flag to honor that. Should I file an issue? Also, 2 more observations. (a) should we not passing this.ratio instead of ratio to the trigger? We have already figured out the ratio here and then why are we passing the old value downstream? (b) getBackingStoreRatio() can be deprecated. from what I could see in Chrome bug reports, getRatio() can simply be, backingStoreRatio is never different from 1 and broken test cases is the only reason to carry it forward. |
Thanks for the input @rjha. Two.js manages the dimensions and the styles so you don't have to. That being said, you can always modify the However, what is the use case you're trying to set the size for? If the dimensions are fixed then I recommend simply passing them directly when instantiating Two.js: // Makes an instance of Two.js that
// has width = 800
// and height = 800
// where under the hood
// the entire scene is scaled up
// to match the `devicePixelRatio`
// This is great for matching two.js
// to whatever device capabilities
// are available.
const two = new Two({
type: Two.Types.canvas,
width: 800,
height: 800
});
// Makes an instance of Two.js that
// has a higher (and more explicit) ratio
// This is great for print, or rendering out
// scenes for use on other applications
const two = new Two({
type: Two.Types.canvas,
width: 800,
height: 800,
ratio: 6
}); We should remove |
Hi Jono Since two.js sets css styles directly using width and height,
from an API perspective, I am not able to see the utility of renderer.setSize(). If I am targeting a device with high [css : actual device pixels] ratio, e.g., If width = 500 and height = 500 and ratio = 8 and you will set the canvas width and height to 500 x 8 = 4000. However I can only draw till max (x | y) = 500 with two.js and cannot access co-ordinates like [2000, 2000] If I change the earlier example to use setSize(), like below then I will only get a portion of the circle drawn even though I have a canvas having 8000 device pixels as earlier. The only way to get earlier canvas results would be to call setSize(3200, 3200, actual_device_pixel_ratio) Unless you map the two.js co-ordinates to new ratio space, the bigger canvas size cannot be utilized.
|
I see. You can always do this: two.renderer.setSize(800, 800, 1);
two.renderer.domElement.style.width = '10px';
two.renderer.domElement.style.height = '10px'; |
Describe your question
Hi
What would the best way to output a lot of dots (1-pixel circle or rectangle) using two.js library? I am using two.js to plot bifurcation diagrams and Julia sets that involve outputting a lot of dots on the screen. For example to plot a 500x 500 grid, I need to output 25,0000 pixels.
My current method is to render a portion of grid inside animation update handler by adding dots to two.js canvas using makeRectangle method. While this works for 500 x 500 grid, it fails for 800x 800 grid. The browser tab just keeps snapping. I suspect some call stack is getting filled. Also, the browser tab reload just wont work even for 500 x 500 grid.
There are no external dependencies and I am using simple ES6 Js with Vanilla html. The reason to select two.js was animation and drawing primitives support.
Your code (either pasted here, or a link to a hosted example)
You can simply clone and run mandlebrot.html or any of other examples. The folder is self contained.
https://github.com/rjha/chaos
`drawPixel(config) {
`
Screenshots
Environment (please select one):
If applicable:
Desktop (please complete the following information):
Additional context
The drawing is done by generating a list of commands for each dot on the grid inside the animation update handler. The commands are then processed to output a 1x1 pixel using two.js.
`
const points = 400;
var xp = 0;
`
`
// The DOT is processed
case 'DOT':
// call createDot
this.#moveTo(x, y);
....
// two.js primitives
#drawPixel(config) {
`
The text was updated successfully, but these errors were encountered: