I’m using Adobe Edge Animate and I am hoping to call sym.playReverse(); or sym.play(1000); on sym.$(“sam”) on a screen resize by bootstrapping with javascript. Can you help?
There is some confusion in your question. You want to call sym.playReverse() on a symbol which is the stage? Or is it the symbol "sam" inside the stage?
Let's assume you want to call playReverse() on a symbol named "sam" inside the stage.
Suppose your composition name is EDGE-12345678.
Javascript code:
$(window).resize(function() {
// Replace with your composition name. You read it in the proerties of the Stage.
var composition = AdobeEdge.getComposition("EDGE-12345678");
var stage = composition.getStage();
// Get the sam symbol, child of stage.
var symbolSam = stage.getSymbol("sam");
symbolSam.playReverse();
});
Related
I am having a blast learning electron/node.js. I am trying to use paper.js to "encode" a string into an image, sort of...
I am using a "paperscript" file like this:
<script type="text/paperscript" src="mainCanvas.js" canvas="mainCanvas">
Basically, I am looking at how I can wire up events from say, an input to the paper context.
What I would like is or whenever the target input changes ($("#input").on("change"...)) for something (the something is not the issue here) to happen.
I wiring up the event directly in the paperscript file:
$("#mainInput").on("change", function() {
path.moveTo(50, 25);
})
But that did not work. Reading the documentation, it seems the context should have access to any global objects.
Can someone point me in the right direction?
I don't know exactly where your problem is, but here is a working example demonstrating how it can be done.
// draw square
var square = new Path.RegularPolygon({
center : view.center,
radius : 50,
sides : 4,
fillColor : 'orange',
applyMatrix: false
});
// on input change
$('#input').change(function ()
{
// rotate it accordingly to input value
square.rotation = this.value;
});
I'm developing a addon library for p5.js and I need to setup several fill/stroke colors in certain functions.
Is there a way to get the current fill/stroke value so I can ensure that when the user calls said functions he doesn't have to worry about the colors that I set?
Something of this sort:
function foo(){
var tempColor = getFill(); //Hypothetical get color function
// ...
fill(color1); //Some color I use
// ...
fill(color2); //Another color I use
// ...
fill(tempColor); //Reset fill color to user set
}
Edit: Although undocumented, I found some references in p5.js to a curFillColor variable but I didn't find a way to use this.
Hey I don't know if its a bit late. I'm also trying to create an addon library for p5. So what I'm doing is I'm calling push just before I'm using the fill and after that call pop. So that I ensure that the fill is restored.
Refer
https://p5js.org/reference/#/p5/push
P5.js is open source, so you can see exactly what they do when you call the fill() function here:
p5.prototype.fill = function() {
this._renderer._setProperty('_fillSet', true);
this._renderer._setProperty('_doFill', true);
this._renderer.fill.apply(this._renderer, arguments);
return this;
};
Which takes you to the renderer-specific fill variable. You can track that down, but basically: there isn't an easy way to get the current fill color.
What you might want to do is to use a buffer in your library. Don't call fill() on the main sketch; call fill() on the buffer. Do all your drawing to the buffer, and then draw that buffer to the sketch.
I'm using three.js and OrbitControls.js in combination, in a 3D app. Sometimes WebGLRenderer.render gets called with an undefined camera. This happens when I use the mouse to navigate the 3D model, using the controls delivered by OrbitConrols.
The undefined camera argument is weird, as my animate function (see code below) always calls WebGLRenderer.render with a well defined camera. Also, when instantiating OrbitControls, I give it a well defined camera. So the question is - how can it be that WebGLRenderer.render is at some point called with an undefined camera?
NOTE: The source code for the WebGLRenderer.render function can be seen in line 20426 in the three.js source code.
I attempted to locate all the potential call sites by searching for the text string render(. There are 14 such matches on the string render(, but none of these gives an undefined camera as argument. Thus, the trail was cold.
I tried stack tracing from the callee (the function body of the WebGLRenderer.renderfunction), but this merely lead back to some mix-it-all event hub. But it gave me a hint that the caller might be Javascript itself, calling from its DOM event system. That would explain why I couldn't find the call site in the three.js source code.
Thus perhaps the problem is associated with the point at which OrbitControls interacts with the Javascript event system. When initialising my app, I register an event on my OrbitControls instance. See code below. Could this be causing trouble? No camera is given as argument when this happens though :/
var myControls = require('../../instances/three/myControls');
var myRenderer = require('../../instances/three/myRenderer');
myControls.damping = 0.2;
myControls.domElement.addEventListener( 'change', myRenderer.render );
EDIT:
I'm using these versions:
three.js 0.81.0
three-orbit-controls 72.0.0
So, indeed the wrong-doing call to render was coming from some event system (the Javascript DOM event system). This module shows where the render function is given as callback to an event listener:
var myControls = require('../../instances/three/myControls');
var myRenderer = require('../../instances/three/myRenderer');
myControls.damping = 0.2;
myControls.addEventListener( 'change', myRenderer.render );
module.exports = {};
( where the myControls module looks like this:
var THREE = require('three');
var orbitControls = require('three-orbit-controls');
var myRenderer = require('../../instances/three/myRenderer');
var myCamera = require('./myCamera');
require('../../sideeffects/three/addCamera');
// add orbitControls to THREE:
var OrbitControls = orbitControls( THREE );
// make controls:
var controls = new OrbitControls( myCamera, myRenderer.domElement );
module.exports = controls;
)
However, it seems that OrbitControls.js has been changed in such a way that instances of the OrbitControls constructor are no longer DOM-elements. Thus, one CANNOT register events on them, as I was doing with the line:
myControls.addEventListener( 'change', myRenderer.render );
Instead, instances of the OrbitControls constructor has a new property: domElement which, as you might have guessed, is indeed a DOM element. Thus, I can fix the problem by changing the target of my event attachment to myControls.domElement. Thus the above line comes to look like this:
myControls.domElement.addEventListener( 'change', myRenderer.render );
and that solved the problem :)
EDIT:
It turns out that this line can actually be omitted completely! It is only necessary if there is no animation loop (a perpetual loop that calls requestAnimationFrame on each loop step)
Also, dampening can be enabled by doing this:
myControls.enableDamping = true;
and then adding myControls.update(); somewhere in your animation loop.
I'd like to implement a map that zooms in on an area similar to Mike's click-zoom-example http://bl.ocks.org/mbostock/2206590
In fact I have this working fine already. My problem is that I can't rely on the click event to implement the zoom — the zoom will be triggered by another event (a link). So when I get to this part of Mike's code:
function clicked(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
...
I'm a bit of a loss as I don't have 'd'. So, I'm assuming that I can instead, manually pass 'd' to my click function when I call it. But how do I actually select the feature (which is what 'd' represents) I want from the map?
To be a bit more concrete, I have a map of the world. The paths within the SVG group contain class information (e.g. the one for France looks like):
<path class="subunit FXX FRA" id="FXX" data-subunit="FXX" data-countryName="France" data-countryCode="FRA" d="M153.88838704622088,519........"></path>
How would I pass the 'France object' to the clicked(d) function? Or is there another approach altogether that I should be trying.
Any tips or help greatly appreciated.
You can use D3's select for this purpose:
d3.select(".FRA").each(function(d) {
// same code as inside clicked
});
Get the data associated with the France object:
d3.select('.FXX.FRA').datum()
And pass it to clicked:
clicked(d3.select('.FXX.FRA').datum())
I use Raphael JS to create an SVG-map with area's and textlabels. I want the area to highlight when you move the mouse over it.
I have this working now, but when I move the mouse over the label (in the center of the area) the mouseout-event for that area is triggered, so the area is unhighlighted again.
Is there any way to prevent this from happening, or a workaround ?
Create a rect with opacity set to 0 over the text and attach the event handlers on that rect. You can calculate the dimensions of the rect using getBBox() of the text.
Creating a set via Paper#set was the approach that worked for me. e.g.:
var st = paper.set();
st.push.apply(st, vectors); // `vectors`: my array of "hoverable" vectors
st.push(text); // `text`: my text vector for `vectors`
st.hover(function () {
text.show();
}, function () {
text.hide();
});