function resetDisplayImg(){
var tempImage = new Image();
tempImage.src=document.getElementById("myCanvas").toDataURL("image/png");
tempImage.onload=function(){
context.drawImage(tempImage1,0,0,Canvas_WIDTH,Canvas_HEIGHT);
}
}
Everytime when i call the function above, i have to call two times then it will function correctly. I know with function "onload" can solve this problem but the problem still occur even if i applied it. Is there any mistake that i had made?
put the .src line after the onload
BUT you shouldnt be doing this in the first place. You are allowed to directly draw one canvas to another, so instead you can just write:
context.drawImage(document.getElementById("myCanvas"), 0, 0); and be done!
Related
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 have a circle with PIXI and I need that when the touch is fulfilled another object said circle returns to its original position, but it happens that I do not know any function or method for the movement to be appreciable, all I have achieved is that it disappear and appear in its initial position. How did the transition happen?
Just add the movement into rendering loop
I use PIXI.tickerTicker() for loop
let ticker = new PIXI.ticker.Ticker();
the rendering loop in your situation should be
function loop(){
renderer.render(stageContainer);
yourCircle.position.x += moveSpeed; //your question
if(resetCirclePosition)
yourCircle.position.x = defaultPos;
}
and then to start ticker use
ticker.add(loop);
ticker.start();
Look at ticker documentation http://pixijs.download/dev/docs/PIXI.ticker.Ticker.html
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 want to render a texture on the background and the 3dscene in the foreground. i used the effectcomposer to do this.
how ever my first pass (the background) seems to be "overwritten" with the 2nd pass (the scene) the result only the scene gets drawn with a black background. it looks like the background of the second pass isnt drawn transparent or the transparancy is lost.
http://jsfiddle.net/mdwzx1f8/8/
var renderTex = new THREE.TexturePass(myTex);
var renderScene = new THREE.RenderPass(scene, camera);
composer.addPass(renderTex);
composer.addPass(renderScene);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;
composer.addPass(effectCopy);
i hope someone can take a quick look at it and point me in the right direction
thanks in advance
Updates:
07/07/2015
I tried clearing the zbuffer with renderer.clear(false, true, false);
Found a post on masking which i looked at but it wasnt added to
threejs as far as i can tell
https://github.com/mrdoob/three.js/issues/2448
08/07/2015
Found another interesting page https://github.com/mrdoob/three.js/issues/5979 not sure if this is related yet
Updated the fiddle if you comment line 53 you will see the 1st pass which should be visible if the scene background is drawn transparent
Bobafett in the threejs irc channel helped me out and he found my issue, it turns out that i called:
renderer.autoClear = false;
instead onrenderer.autoClearColor = false;
Here is the modified and working fiddle:
http://jsfiddle.net/mdwzx1f8/9/
I would like to thank all who have helped me in the search for the solution
I'm working with CreateJS and wondered if anyone here has examples of controlling tweens using the Ticker object. I'm trying to get a sprite to follow a path defined by waypoints but i don't want to control each tween (in between waypoints) by time. I want to have smooth movement between each waypoint controlled by the Ticker object. I tried this code which doesn't seem to work at all.
var index = 0;
function move(){
index++;
if (index < path.length) {
createjs.Tween.get(person)
.to({x:gridSize * path[index][0] - pathOffset,y:gridSize * path[index][1] - pathOffset})
.call(move);
}
}
move();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", function(event){
createjs.Tween.tick(1);
stage.update();
});
This code seems to only jump between waypoints and not tween at all. Any ideas what i may be doing wrong or any code/tutorials which might help?
You need to add a duration(in milliseconds) to your tween, otherwise it would default to 0, this will cause the "jump", e.g.: 500 for half a second
instead of: .to({x:..., y:...})
use: .to({x:..., y:...},500)
And a second thing: You don't NEED to call createjs.Tween.tick(1); this is usually called automatically by the Tween-class.
Here is some help and some small examples: http://www.createjs.com/Docs/TweenJS/classes/Tween.html
Advanced Examples:
https://github.com/CreateJS/TweenJS/tree/master/examples