How to dynamically change the text to another, without rebooting, that is, a dynamic change in the arrangement of particles
Partallan.init("PARTALLAN");
example: http://codepen.io/lateek35/pen/QbZdEB
As said in the comment section, you should tell us what you already try, and what did not work.
Anyway, here I'll explain you how I would have done it.
As you can see, each particle's object has a property ox and oy which correspond to the original anchor coordinate of the particle.
I think the step to follow is to:
1 - Re-use the writeText method to create a new text in an offcanvas and save the new coordinates.
2 - Tween the values ox and oy of each particles in the particles array to the new coordinates you retrieved in the previous step
The tricky point here is the number of particles already existing. It's all depend on the new text used, but I think it's impossible that you get the same amount of coordinate than the number of particles. So you will have to either add new particle in you array or delete some (and of course implement an animation for this, probably with a method like particle.die())
Hope it will help you
Related
I am using JavaScript to draw on HTML Canvas.
I have a polygon represented as array of [x,y] coordinates. In my situation (game focused on expanding player's area) I want periodically expand the area represented by the polygon. I have two random possibilities - expand one of existing vertexes, or split one of the line.
My method works kinda good, but I have problem with splitting the lines. I can pick random line (or to be more precise two random neighboring polygons) and I can insert new polygon into my array of polygons. That works fine.
To find where the new polygon shall be, I tried to use midpoint formula. In my code it goes like this:
var x_mid = Math.round((globalMap[v1][0] + globalMap[v2][0]) / 2);
var y_mid = Math.round((globalMap[v1][1] + globalMap[v2][1]) / 2);
But I found it is not always picking up the correct spot on the line. Sometimes it ends up inside my polygon, which is a problem, because for expansion, my script is looking for free (not colored) pixels around and it finds none here.
I blame the round() function, but can't figure out how to make sure, I end up on the line that is actually drawn on canvas?
It doesn't have to be exact middle of the line, if someone knows other technique, it just needs to be somewhere on the edge, so it can expand later without flaws. Thanks a lot!
So I am trying to animate a rectangles size with Createjs. I found there are two ways to create a rectangle. Either:
var rectangle = new createjs.Rectangle(0,0,100,100);
or
var rectangle = createjs.Shape();
rectangle.graphics.beginFill("000000").drawRect(x,y,w,h);
when I add it to the stage on the first call it doesn't add. However I seem to be able to access the rectangles height and width with rectangle.width and rectangle.height. However; on the second call I don't have this sort of control. What I would like to do is access these properties with a Tween.
createjs.Tween.get(rectangle).to({width:###, height:###}, timeinmilli);
The only thing that I've had some success with is rectangle.scaleX and rectangle.scaleY however this moves the rectangle across the screen accordingly and I do not want this. Anyone know of some easy solutions to access and rectangles height and width properties in order to animate with them?
An EaselJS Rectangle is just geometry - defining an x, y, width, and height (and that's it!). It is used to define rectangular areas such as sourceRect, object bounds, etc.
The Graphics.drawRect() method is what you want (your second example).
In earlier versions of EaselJS, you need to redraw the shape with a new size, remembering to clear it first (and update the stage). In newer versions (0.7.0+) you can use command objects to modify graphics much easier:
// Store off a command (the "command" after any graphics operation)
var rectangleCommand = rectangle.graphics.drawRect(0,0,100,100).command;
// Modify it
rectangleCommand.w = 300;
I threw a quick fiddle together: http://jsfiddle.net/215wj7aL/
Here is another sample using Tween: http://jsfiddle.net/215wj7aL/1/
You can see the documentation for all the commands online, for example, here is the DrawRect command: http://createjs.com/docs/easeljs/classes/Graphics.Rect.html -- check out all the commands in the side menu for a full list.
The Rectangle class represents a geometric rectangle, with helper methods, not a Shape to draw.
You can either update your draw each tick, or you can use a retained draw command.
var rectCmd = myShape.graphics.beginFill("red").drawRect(0,0,100,100).command;
//.. later:
rectCmd.w = 200;
http://createjs.com/docs/easeljs/classes/Graphics.html#property_command
http://createjs.com/docs/easeljs/classes/Graphics.Rect.html
I have a web page that is based on the following ThreeJS sample:
http://threejs.org/examples/#css3d_molecules
I create new nodes (atoms) dynamically by attaching them to existing nodes (atoms). After creating it and adding it to the scene, I want to bring the new atom/child element to the forefront using the minimum number of rotate, pan, & zoom operations needed to do so. However, although I know how to do each of those operations, I don't know how to calculate the optimal sequence based on the current position/quaternion of the node (atom) where I created it in the scene, and its new position which will be (0, 0, ). I will be animating the change from the old place in the scene to the new so I don't want to just change the new element's position/quaternion to the new value via an assignment. I want animate the change over time, performing a slice of each operation (pan/zoom/rotate) each animation frame.
Are there any ThreeJS methods to help me do this?
See how to: get the global/world position of a child object to get world position of any mesh in your hierarchy. Then have your camera.lookAt() to that location.
I would like to create an element, that shows a red circle. Once the user clicks on it, she can record her voice. In order to show the LIVE mode, I'd like to make the circle "breath" according to the incoming frequencies.
I'm experimenting with a <canvas> element. That means it creates a circle that gets bigger and smaller, depending on the variable arcrad. However, the lines are being drawn correctly, but they do not disappear afterwards. I tried to apply .clip() but can't get it to work...
if (arcrad <= 10) arcrad = 10;
analyserContext.beginPath();
analyserContext.arc(100,120,arcrad,0,2*Math.PI);
analyserContext.closePath();
analyserContext.lineWidth = 2;
analyserContext.strokeStyle = 'red';
analyserContext.stroke();
Any ideas - or completely different strategies for this use case?
Canvas will overdraw by default. For your animation you’ll need to clean the canvas at the start of each frame. Use something the following at the start of your drawing function:
analyserContext.clearRect(0,0,200,200);
assuming your canvas is 200 pixels wide and high. It’s worth pointing out that sometimes you don’t want to completely clear the animation field every frame. For example, if you were to draw a semi transparent rectangle over the frame at the beginning (instead of clearing it) then you’d end up with a basic ‘bullet time’ style effect.
It's a normal behavior. Once something it's drawn on the canvas, it's there forever. You have to think like if you were painting something: what has been done cannot be undone.
Luckily, you still have solutions:
1) redraw another circle on top of the first one with the background color. It's really not the recommend way, but it still can be useful
2) use clearRect method (see How to clear the canvas for redrawing)
There are numerous ways to clear a canvas pre drawing to create animation:
How to clear the canvas for redrawing
simplest in my mind:
canvas.width=canvas.width;
though can equally use clearRect (which is actually quicker and won't reset the entire canvas if that is an issue regarding transforms etc!) over the region or whole canvas.
Get the likes of:
http://jsfiddle.net/dw17jxee/
So, basically I have a piechart drawn with Raphael. Each segment corresponds to a different value and I want to have a unique tooltip popup for each segment. In this example I am trying to draw a circle every time one of the segments are hovered, but I can't figure out a way to do it dynamically so that I can set the position point relative to the segment that is being hovered. Sorry for poor and convoluted explanation, but you can see the example of my code here:
http://jsfiddle.net/DgrgC/2/
Thanks for your help!
Inside the hover callback, this refers to the current path you're drawing. So this.attrs contains the path attributes. Note that paths don't have cx and cy attributes, as you're trying to access in you example.
I'm not sure what you're trying to accomplish, but you can check my example on how to draw some circles based on path data:
http://jsfiddle.net/DgrgC/3/
Basically:
this.attrs.path[1] //second point of the path
this.attrs.path[1][1] //x coordinate of this point
this.attrs.path[1][2] //y coordinate of this point