Questions tagged [two.js]

two.js is a motion graphics library for the browser

two.js is a motion graphics library for the browser. Find out more at http://jonobr1.github.io/two.js/.

50 questions
0
votes
1 answer

Tyepscript with two.js in vscode

I am trying to use two.js with typescript to make a 2D Canvas project. Thus install @types/two.js { "name": "blueseacore", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test…
John.Man
  • 19
  • 3
0
votes
1 answer

Two.js makeLine() function error: this.scene is undefined

I am trying to use two.js to draw a line on the screen using the makeLine() function. But it just gives an error message saying TypeError: this.scene is undefined. Can anyone help me fix this issue? Thanks in advance. Code: index.html
백현민
  • 20
  • 4
0
votes
1 answer

EventListener is working only when browser window is inactive (not on the top)

I am using Two.js to draw svg image in Angular application. after drawing the svg (which have some elements inside) in two.js, I add event listener to its elements like this: this.courtRenderer.update(); //after this command two.js draw the svg for…
Gordonik
  • 71
  • 5
0
votes
0 answers

basic/silly question. Why two libraries seem like two different worlds to me? (p5.js - two.js)

I have a couple of basic, silly questions. I have started programing on p5 just recently, and I'm very happy with it. I'm building a very simple page that I want to have a very simple bubble animation, just like this one.…
0
votes
2 answers

Arc sweep direction in two.js

two.js library has a function as follows; makeArcSegment two.makeArcSegment(ox, oy, ir, or, sa, ea, res); I calculate my parameters as follows; var prevPt = points[i - 1]; var dxNext = nextPt.x - pt.x; var dyNext = nextPt.y - pt.y; var angleNext =…
0
votes
1 answer

How to add an event for shapes in Two.js?

I have a group of two.js shapes. When a user hovers over a shape, I want that one shape to spin. http://merhoo.github.io/secrets.html Issue with css animations: if I apply a :hover animation to the svg shapes, it affects the position of the shape…
merhoo
  • 589
  • 6
  • 18
0
votes
1 answer

Twojs blinking circle

I am working on a graph editor. I need to highlight a circle, and make that circle in the screen center and the set the zoom scale to 2. If the circle is already higlighted, to set it switch it and set as a normal circle. My need is a least to make…
Hichem CHTARA
  • 25
  • 1
  • 7
0
votes
1 answer

graph editor Javascript - observer Design pattern

I am developing a graph editor using two.js (SVG canvas). In this app I need to drag nodes (circles). The Node has a shape (circle) and a label. The node is linked to other nodes by lines, and each line have its label. Graph editor while moving a…
Hichem CHTARA
  • 25
  • 1
  • 7
0
votes
0 answers

AngularJS: DragAndDropPolygon using Two.js

I was able to draw a polygon correctly using Two.js inside my AngularJS app, and now I am trying to manipulate the polygon with my mouse. I created this function but it isn't working, can anyone help me figure out why? $scope.DragAndDrop = function…
sani
  • 23
  • 7
0
votes
1 answer

Importing third party library in AnglularJS with System.js

In this angular2 plunkr, I am trying to import two.js (third party lib) and bootstrap it into my application. Using system.config.js, I added the following lines among the mappings and packages vars : var map = { ...othermappings …
Tunity
  • 141
  • 1
  • 2
  • 7
0
votes
0 answers

Bouncing ball disappearing in Firefox

I wrote a simple bouncing ball animation using Two.js. It's just a ball bouncing off the walls. It works just fine for me in Chrome, but in Firefox, the ball disappears and reappears a few seconds later in another part of the screen, meaning that…
Yulek
  • 331
  • 3
  • 12
0
votes
1 answer

How do I create circular hotspots with two.js?

I am trying to make a solar system model. I made it all so far using two.js. I want to make it so when the mouse is over a planet's orbit path, it'll highlight that planet's orbit, and be a link to information about that planet. I'm having trouble…
0
votes
1 answer

Two.JS : 'Failed to execute 'removeChild' on 'Node' when trying to remove shapes interpreted from SVG

I am using Two.JS to render shapes to the stage which have been interpreted from an SVG using the Two.js interpret method. These have an lifespan property added, and in Two's render loop I check for the illustration and remove it if the time is…
Jack Wild
  • 2,072
  • 6
  • 27
  • 39
0
votes
1 answer

Some shapes not being removed in Two.js when looping through array of all shapes

I'm building a web-app using Two.js which generates shapes and then removes them again after their lifespan is up. When making the shapes I push them into a new array which I then loop through every frame to check if the lifespan is up. If it is…
Jack Wild
  • 2,072
  • 6
  • 27
  • 39
0
votes
1 answer

Keeping shape and animation of ball consistance over period of time

I am new to two.js. I am trying some basic experiments with rubber ball example to reposition ball on every second as per random input instead of mouse movement. So, I have written below code, but it is removing rubber ball effect after some…
S S
  • 920
  • 1
  • 17
  • 34