Passing image object into function - javascript

Im playing around with a particle emitter (all creds: scurker.com)
Fiddle here: http://jsfiddle.net/4REVD/
Im trying to create my own image object that can be used with the framework. Im supposed to be a able to do this with:
particles.update(myObject);
What ive tried so far is:
var myImage = new Image();
myImage.src = "images/_cloud.gif";
particles.update(myImage);
However that doesnt seem to do anything - besides ruining the current default flame animation
Any suggestions?

Related

White screen when loading texture with Three.js

Im working with three.js and i have some animations going, now i want to have a texture on a point, im running a local host with vite, and everything is working fine but as soon as i write this code my html page goes white? Even if i have not added the letter variable to ANYTHING yet?
const loader = new THREE.TextureLoader().load();
const letter = loader.load('img/q.png');
There is an error in your code (you are calling load() twice). Try it like so:
const loader = new THREE.TextureLoader();
const letter = loader.load('img/q.png');

EaselJs and TweenJs: Change image of Bitmap in tweening

I'm trying to create an animation with a flask image. I want to pour the flask, then replace the flask with an empty one, and then return the flask to its original location. The code I have right now looks like this:
var renderPour = function (flask, index){
// Using a Motion Guide
curX = flask.x;
curY = flask.y;
createjs.Tween.get(flask)
.wait(2000*index)
.to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
.to({image:'/assets/empty_flask'+(index+1)+'.svg'}, 0)
.to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);
}
According to the documentation, it says
Non-numeric properties will be set at the end of the specified duration.
So I expect the image src property to be changed. But when I run my code, the Bitmap just disappears and I have a 'invisible' Bitmap there. I know it's still there because I have an array that keeps track of all Bitmaps and it's still there, and I just can't see it. When I check the image's src value in the console, it's changed and correct.
I did some research and guessed that it's probably because the stage is not updated. Here is my update stage code:
createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
createjs.MotionGuidePlugin.install();
function tick(event) {
stage.update(event);
console.log('x: ', flaskArr[1].x, 'y', flaskArr[1].y);
}
And I tried to run stage.update() in the console as well, but the Bitmap is still invisible.
Additionally it seems that the later half of the animation is still working, except that the Bitmap is not showing according to the log.
I'm wondering is there a correct way to replace the image in TweenJs? Or is there another way to replace the image in the middle of the animation? Very much appreciated!
I figured out the solution on my own, so i'll just post it. I have to pass a new image instead of just a src string:
var emptImage = new Image();
emptImage.src = emptyFlaskPath(id);
createjs.Tween.get(flask)
.wait(2000*(flask.id-1))
.to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
.to({image: emptImage}, 0)
.to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);

Overlap two png images with javascript and save new image as file

In a javascript script I need to superimpose two png images into one and then save the new image as a single file. My script does not work inside a webpage but completely batch.
The function that I imagined was something like this:
newPng = mergePng(png1, png2);
I have long searched for a javascript library that would allow me to get the result I wanted, but I did not find it. I've also tried among the previous questions here on Stackoverflow, but I have not found any solutions.
Does anyone know if the function I'm looking for exists?
Thank you.
You can draw png files inside a canvas like this:
drawing = new Image();
drawing2 = new Image();
drawing2.src = "draw2.png";
drawing.src = "draw.png";
drawing.onload = function() {
context.drawImage(drawing,0,0);
context.drawImage(drawing2,0,0);
};

Texture not displayed on object Forge Three.js

I am trying to display a textured plane with Three.js. I'm working with Forge RCDB.
At first, I managed to display the plane, but instead of being textured, it was completely black... I made some changes and now nothing is displayed anymore...
Here is my code :
render () {
var viewer=NOP_VIEWER;
var scene=viewer.impl.scene;
var camera = viewer.autocamCamera;
var renderer = viewer.impl.renderer();
renderer.render( scene, camera );
}
and in the function supposed to display the textured plane :
new THREE.TextureLoader(texture).load(texture, this.render);
tex.wrapS = THREE.RepeatWrapping //ClampToEdgeWrapping //MirroredRepeatWrapping
tex.wrapT = THREE.RepeatWrapping //ClampToEdgeWrapping //MirroredRepeatWrapping
tex.mapping = THREE.UVMapping
At the beginning I used loadTexture(). I managed to display my plane, but it was all black, and no texture was applied on it.
Then, I use THREE.TextureLoader().load(), in this case, I believe it is trying to find the image on localhost. The image is downloaded, I can see it on the console.
But now I get these errors :
Uncaught TypeError: scope.manager.itemStart is not a function
and :
Uncaught TypeError: renderer.render is not a function
Now the object is not displayed, even in black.
So I think this may be linked to render, but I don't understand how...
I found this, and it answers my question partially.
Finally, I decided to keep THREE.ImageUtils.loadTexture(), and I replaced MeshLambertMaterial by MeshBasicMaterial.
No need for render.

Graphics BitMapFill TypeError

I'm working with the easeljs javascript to make a sort of game.
I'm using this example: http://www.createjs.com/#!/EaselJS/demos/game
As you can see there are spacerocks. This are graphics objects:
this.graphics.beginStroke("#FFFFFF");
I would like to fill the background with an image like this:
var bitmap = new createjs.Bitmap("http://nielsvroman.be/twitter/root/easeljs/image.png");
this.graphics.beginBitmapFill(bitmap, "no-repeat");
But I always get this error:
Uncaught TypeError: Type error
Does anybody know what I'm doing wrong?
Use a reference to an HTML Image, and not a Bitmap instance.
var image = new Image();
image.srce = "http://nielsvroman.be/twitter/root/easeljs/image.png";
this.graphics.beginBitmapFill(image, "no-repeat");
Note that you have to ensure the image is loaded, otherwise it may not show up on the first stage update. You can either tick the stage, or listen for image onload, and refresh the stage then.
image.onload = function() {
stage.update();
}

Categories