Comments (12)
You can pass the canvas element (not id) to control afterwards. Or you can also use two.renderer.setSize
method. Like so:
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);
from two.js.
updated screenshot image
from two.js.
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 CanvasRenderer
, then there's also the option to use the Two.Points
object (link). Here's an example of how points work: https://jsfiddle.net/jonobr1/r2zumg0w/9/
Hope this helps
from two.js.
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?
from two.js.
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.
from two.js.
Hi Jono
Many thanks. I got that working. Now I am tiling using a vertical line across the screen on each frame update. So I need (num_x_pixels / 60) seconds for rendering. The problem now is showing the rendering for high resolutions on physical screen.
(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
from two.js.
result at 800 x800
from two.js.
I am testing with ratio for canvas renderer. I will update my findings.
from two.js.
Hi Jono
I have played with the options and looked at the Canvas renderer code. The above fix will not work because the setSize() method is forcing the DOM element css property. So even if I set the DOM element for a certain size via css, the setSize() will overwrite that.
// @debug
// comment this to honor css styles!
if (this.domElement.style) {
_.extend(this.domElement.style, {
width: width + "px",
height: height + "px"
});
}
// @debug - should we pass this.ratio instead of ratio
return this.trigger(Events.Types.resize, width, height, ratio);
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,
devicePixelRatio || 1;
backingStoreRatio is never different from 1 and broken test cases is the only reason to carry it forward.
from two.js.
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 <canvas />
element yourself via two.renderer.domElement
and bypass any other methods.
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 getRatio
now that getBackingStoreRatio
is deprecated. Thanks for that!
from two.js.
Hi Jono
sorry for late reply. The problem was showing a huge canvas in a smaller display region. The only way I can do that with two.js is to set styles directly on renderer.domElement. Here is an example to show a circle on 3200x 3200 css pixels canvas inside a 400 x 400 css pixels DIV.
Since two.js sets css styles directly using width and height,
- I cannot use setSize()
- Any style set in html template will be overwritten
// Huge canvas demo
// we render a huge circle that goes
// outside the browser screen but we display
// it inside a smaller region by setting domElement css
import Two from '/js/two.module.js';
function animation_update(frameCount) {
if(frameCount % 441 == 0) {
circle.fill = colors[color_index++ % 2];
}
}
const pixels = 3200;
const DISPLAY_REGION = {
"height": 400,
"width": 400
}
// if canvas height OR width is less than
// pixels then we can only render partial
// scene. set width, height to 800 to see
// a rectangle instead of a circle
//
const canvas_width = 3200;
const canvas_height = 3200;
const container = document.getElementById("art");
const canvasElement = document.getElementById("canvas1");
var two = new Two({
fullscreen: false,
type: Two.Types.canvas,
overdraw: true,
domElement: canvasElement,
width: canvas_width,
height: canvas_height
}).appendTo(container);
// make a big circle
var radius = Math.floor(pixels * 0.5);
var x = two.width * 0.5;
var y = two.height * 0.5;
var circle = two.makeCircle(x, y, radius);
// pen stroke
circle.stroke = 'black';
circle.linewidth = 10;
// fill
var color_index = 0;
var colors = ["red", "orange"];
two.bind('update', animation_update);
two.play();
// set css to bring it inside region
two.renderer.domElement.style.width = DISPLAY_REGION.width + "px";
two.renderer.domElement.style.height = DISPLAY_REGION.height + "px";
// two.renderer.setSize(3200, 3200, 2.5);
console.log("css width -> " + two.renderer.domElement.style.width);
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.
two.play();
// comment dom element css
// set css to bring it inside region
// two.renderer.domElement.style.width = DISPLAY_REGION.width + "px";
// two.renderer.domElement.style.height = DISPLAY_REGION.height + "px";
// call renderer setSize with custom ratio
two.renderer.setSize(800, 800, 10);
console.log("css width -> " + two.renderer.domElement.style.width);
from two.js.
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';
from two.js.
Related Issues (20)
- [Question] Woscope integration HOT 3
- wrong type in getPointAT declaration in path class HOT 2
- "Dom-less" start for just generating result svg [Enhancement] HOT 1
- Can two handle thousands of svg path elements and hundreds of thousands of points? HOT 1
- [Enhancement] Add Path.Compound Static Method
- How to check if an object is currently being hovered by the mouse whilst taking rotation into account? HOT 3
- Two.Utils.read.path throws an error HOT 3
- Smooth out lines and Round Corners HOT 2
- [Bug] WebGL Renderer Blurry HOT 5
- Partial Ellipse HOT 6
- Text `BoundingClientRect` in nested groups HOT 2
- compile error typescript[Bug] HOT 2
- svg fill-opacity [Bug] HOT 12
- Issues with Zoom and ZUI when upgrading from version 8.1.1 to 8.11 (latest) HOT 3
- creating curve path using anchors and make path not working ! HOT 2
- [Question] Best way to render ~250k polygons HOT 6
- Text Baseline in SVG Backend HOT 5
- [Bug] Negative scale does not work, with webgl mode only HOT 1
- Can i add events to shapes if renderer is Two.CanvasRenderer HOT 3
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 two.js.