I am stumped. I can't get EaselJS' AlphaMaskFilter to work. I don't think I'm doing anything wrong but it doesn't show what I'm expecting. It should look like you're pointing a flashlight at a google billboard. http://jsfiddle.net/mLn8e/
var stage = new createjs.Stage("c");
var mask = new createjs.Shape();
mask.graphics.beginRadialGradientFill(["rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0)"], [0, 1], 0, 0, 0, 0, 0, 20).drawCircle(0, 0, 20);
mask.cache(-20, -20, 40, 40);
mask.x = 100;
mask.y = 100;
var bg = new createjs.Shape();
bg.graphics.beginFill("#000000").rect(0, 0, 400, 400);
stage.addEventListener("stagemousemove", function(e) {
mask.x = e.stageX;
mask.y = e.stageY;
stage.update();
});
stage.addChild(bg, mask);
stage.update();
var img = new Image();
img.src = "https://www.google.nl/intl/en_ALL/images/logos/images_logo_lg.gif";
img.onload = function (e) {
var bmp = new createjs.Bitmap(e.target);
bmp.x = 0;
bmp.y = 0;
var amf = new createjs.AlphaMaskFilter(mask.cacheCanvas);
bmp.filters = [amf];
stage.addChild(bmp);
stage.update();
};
The two most important lines are de var amf = ... line and the bmp.filters = [amf]; line, those two break the program.
Thanks in advance!
Filters (like createjs.AlphaMaskFilter) are not included in the main package of CreateJS and EaselJS. You have to include them separatly. This information can be found in the docs: http://www.createjs.com/Docs/EaselJS/classes/Filter.html - I know, not very prominent, I had the same issue :)
And the 2nd thing, in the fiddle you var is called amff and in the line below you try to use amf (lines 28 + 29 of the fiddle)
*edit: And what I also just noticed, you don't cache the bmp - in order for a filter to take effect, you have to cache it after applying the filter initially and then use updateCache() in the stagemousemove-listener. Here is an example for a similar use of what you are trying to do: https://github.com/CreateJS/EaselJS/blob/master/examples/AlphaMaskReveal.html
Related
I have this function that simply crops the background from a picture of a coin and mostly works.
but for some reason "cv.fitEllipse" gives me an uncaught exception with this image:
bad image
but works fine with this image:
good image
I'm at a loss. any ideas? The size of the image that doesn't work is larger but that is the only thing I can figure out.
any ideas?
Ellipse_img = function(el) {
let src = cv.imread('imageChangeup');
let gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_BGR2GRAY);
let dst = new cv.Mat();
cv.threshold(gray, dst, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU)[1];
// apply morphology open and close
let morph = new cv.Mat();
kernel = cv.getStructuringElement(cv.MORPH_ELLIPSE, new cv.Size(5,5));
cv.morphologyEx(dst, morph, cv.MORPH_OPEN, kernel);
kernel = cv.getStructuringElement(cv.MORPH_ELLIPSE, new cv.Size(21,21));
cv.morphologyEx(morph, morph, cv.MORPH_CLOSE, kernel);
//find all the contours
let contours = new cv.MatVector();
let hierarchy = new cv.Mat();
cv.findContours(morph, contours, hierarchy, cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
//find largest contour
let area_max =0;
let i_max = 0;
let cnt_max = 0;
for (let i = 0; i < contours.size(); i++) {
let cnt = contours.get(i);
let area = cv.contourArea(cnt, false);
if(area >= area_max){
area_max = area;
i_max = i;
cnt_max = cnt;
}
}
let rotatedRect = cv.fitEllipse(cnt_max); //<<<<<<<<<<<<THE PROBLEM???
let ellipseColor = new cv.Scalar(255, 255, 255, 255);
let ellipseColor2 = new cv.Scalar(255, 255, 255, 255);
cv.ellipse1(src, rotatedRect, ellipseColor, 3, cv.LINE_8);
let mask = new cv.Mat.ones(src.size(), cv.CV_8UC3);
cv.ellipse1(mask, rotatedRect, ellipseColor2, -1, cv.LINE_8);
cv.cvtColor(mask, mask, cv.COLOR_BGR2GRAY);
cv.bitwise_and(src, src, dst, mask);
cv.imshow('imageChangeup', dst);
src.delete();
dst.delete();
gray.delete();
morph.delete();
contours.delete();
hierarchy.delete();
};
here is high level of cnt_max for good and bad -- must not be finding the circle but why?
cnt_max: data32S: Int32Array(2426)
cnt_max: data32S: Int32Array(8)
I'm far from knowledgeable enough to know why... but.. this had to do with the white around the object in the 'good' picture and the THRESH used.
This worked if I changed thresholds based on background
cv.threshold(gray, dst, 0, 255, cv.THRESH_BINARY_INV + cv.THRESH_OTSU)[1]; //for light backgrounds
cv.threshold(gray, dst, 0, 255, cv.THRESH_OTSU)[1]; //for dark backgrounds
so I changed to adaptiveThreshold and it seems to work for all scenarios
cv.adaptiveThreshold(gray, dst, 255, cv.ADAPTIVE_THRESH_MEAN_C, cv.THRESH_BINARY_INV,11,2)
I created a png picture and wanted it do display on a leaflet map.
I tried it like in the code below but it does not work.
(net::ERR_FILE_NOT_FOUND)
Any Ideas how i could do this? Here is the code.
var pic = new PNGlib(200, 200, 256);
var background = pic.color(23, 0, 0, 50);
var my_png = pic.getBase64()
var overlay = new L.ImageOverlay( my_png , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);
I think you have a URI problem. You need to add a "data:image" for your image to appear.
MDN data URLs
You can see an example that works on my codesandbox.
var pic = new PNGlib(200, 200, 256);
var background = pic.color(23, 0, 0, 50);
var my_png = pic.getBase64()
const b64ImgUrl = `data:image/png;base64,${my_png}`;
var overlay = new L.ImageOverlay( b64ImgUrl , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);
So I want my output something like this.
var circlePath = new Path.Circle(new Point(0, 0), 25);
circlePath.strokeColor = 'black';
var copy = [];
for(var i=0;i<=10;i++){
var j=100;
copy[i]= circlePath.clone();
copy[i].strokeColor = 'red';
copy[i].position = new Point(j, 0);
j=j+100;
}
Hence, I just used a variable to shift the copy to a new point. But it doesn't work and just displays a single circle.
I'm quite new in html5 and three.js. I've been experimenting a bit with it, and basically what I want done is to have a Mesh (I'm using planeGeometry, as the tutorial I followed used it). The Mesh shows different Textures, which can change later on.
Here's what my code looks like:
angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png");
angelTexture.offset.x = -0.75;
angelTexture.offset.y = -0.75;
angelMesh = new THREE.Mesh( new THREE.PlaneGeometry(79, 53, 79, 53), new THREE.MeshBasicMaterial( { map: angelTexture, wireframe: false } ));
angelMesh.position.x = 0;
angelMesh.position.y = 0;
scene.add(angelMesh);
The problem is that whenever I offset, the Mesh seems big enough to show all the other Sprites (I'm using the texture as a 2D Sprite that I offset to animate it). The result is quite disastrous and I am still figuring out how to control how big the Mesh is so that it shows only one snapshot of the Sprite. All my attempts seem only to resize the Mesh as well as the underlying Texture and still shows all the Sprites.
Can someone point me in the right direction? Thanks in advance.
...
My friend came up with a solution...
I missed the repeat property.
angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png");
angelTexture.offset.x = -0.75;
angelTexture.offset.y = -0.75;
angelTexture.repeat.x = 0.25;
angelTexture.repeat.y = 0.25;
scene.add(angelMesh);
Hope this helps others having the same problem.
I had the same question a while ago, and so I have written up a complete example of animating using a spritesheet as the texture for a PlaneGeometry, and then updating the texture at regular intervals -- check out the example at
http://stemkoski.github.io/Three.js/Texture-Animation.html
and view the commented source code for additional explanation.
Update (2021):
Here is an updated version of the function I recommend using. It fixes the issue with the incorrect tile display order, it automatically updates the next frame, and it returns an object you can use to stop and re-start the animation as desired.
function TextureAnimator(texture, tilesHoriz, tilesVert, tileDispDuration)
{
let obj = {};
obj.texture = texture;
obj.tilesHorizontal = tilesHoriz;
obj.tilesVertical = tilesVert;
obj.tileDisplayDuration = tileDispDuration;
obj.numberOfTiles = tilesHoriz * tilesVert;
obj.texture.wrapS = THREE.RepeatWrapping;
obj.texture.wrapT = THREE.RepeatWrapping;
obj.texture.repeat.set( 1/tilesHoriz, 1/tilesVert );
obj.currentTile = 0;
obj.nextFrame = function()
{
obj.currentTile++;
if (obj.currentTile == obj.numberOfTiles)
obj.currentTile = 0;
let currentColumn = obj.currentTile % obj.tilesHorizontal;
obj.texture.offset.x = currentColumn / obj.tilesHorizontal;
let currentRow = Math.floor( obj.currentTile / obj.tilesHorizontal );
obj.texture.offset.y = obj.tilesVertical - currentRow / obj.tilesVertical;
}
obj.start = function()
{ obj.intervalID = setInterval(obj.nextFrame, obj.tileDisplayDuration); }
obj.stop = function()
{ clearInterval(obj.intervalID); }
obj.start();
return obj;
}
I've noted in my comment to Lee Stemkoski that spritesheets that have more than one row do not work the same when using the newer THREE.TextureLoader().
I am using the following 4x4 sprite image in my tests.
With no modification to Lee Stemkoski's TextureAnimator function, assuming you have a full 16 tile spritesheet.
var texture = new THREE.TextureLoader().load('grid-sprite.jpg');
var annie = new TextureAnimator(texture, 4, 4, 16, 150);
The animated texture runs backwards.
Codepen Demo
So I made my own which I call 🎉🎉🎉 THREE.SpriteSheetTexture 🎉🎉🎉
THREE.SpriteSheetTexture = function(imageURL, framesX, framesY, frameDelay, _endFrame) {
var timer, frameWidth, frameHeight,
x = 0, y = 0, count = 0, startFrame = 0,
endFrame = _endFrame || framesX * framesY,
CORSProxy = 'https://cors-anywhere.herokuapp.com/',
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
canvasTexture = new THREE.CanvasTexture(canvas),
img = new Image();
img.crossOrigin = "Anonymous"
img.onload = function(){
canvas.width = frameWidth = img.width / framesX;
canvas.height = frameHeight = img.height / framesY;
timer = setInterval(nextFrame, frameDelay);
}
img.src = CORSProxy + imageURL;
function nextFrame() {
count++;
if(count >= endFrame ) {
count = 0;
};
x = (count % framesX) * frameWidth;
y = ((count / framesX)|0) * frameHeight;
ctx.clearRect(0, 0, frameWidth, frameHeight);
ctx.drawImage(img, x, y, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
canvasTexture.needsUpdate = true;
}
return canvasTexture;
}
And what you need to know about it
imageURL is the URL of your spritesheet
framesX is how many frames fit along the x axis (left and right)
framesY is how many frames fit along the y axis (up and down)
delay is how long it the texture waits to change to the next frame
_endFrame is optional - How many frames are there (in case it doesnt use a full row)
That all looks something like this
texture = new THREE.SpriteSheetTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68819/grid-sprite.jpg', 4, 4, 100, 16);
var material = new THREE.MeshBasicMaterial({
map: texture
});
geometry = new THREE.BoxGeometry( 200, 200, 200 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
And there was much rejoicing!!!
Codepen Demo Here
#Cmndo to make frames flow moves in the right order you just need to update this:
texture.offset.y = currentRow / this.tilesVertical;
to this:
texture.offset.y = this.tilesVertical - (currentRow / this.tilesVertical);
In this example:
https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Texture-Animation.html
To make frames move in the right direction use:
texture.offset.y = (1 - currentRow / _tilesVertical) - (1 / _tilesVertical);
instead of
texture.offset.y = currentRow / this.tilesVertical;
I am trying to apply different images to multiple canvas.
The images are passed into a json array that is generated in the code behind and then looped through drawing to there specific canvas.
Now this appears to work on occasion sometimes rendering sometimes not.
So here is the code.
function renderPlayer() {
var imagesList = <%=imageList %>;
var size = imagesList.length;
for(var key in imagesList)
{
var image = imagesList[key][1];
var gridPosition = imagesList[key][0];
var playerCanvas = document.getElementById(gridPosition);
window.context2 = playerCanvas.getContext("2d");
//context2.save();
playerCanvas.setAttribute("width", 97);
var imageObj = new Image();
imageObj.src = image;
context2.drawImage(imageObj, 0, 10, 97, 97);
}
}
The above code places them where I expect them to but no every time the page is rendered.
However the bellow code appears to only render the last image.
function renderPlayer() {
var imagesList = <%=imageList %>;
var size = imagesList.length;
for(var key in imagesList)
{
var image = imagesList[key][1];
var gridPosition = imagesList[key][0];
var playerCanvas = document.getElementById(gridPosition);
window.context2 = playerCanvas.getContext("2d");
//context2.save();
playerCanvas.setAttribute("width", 97);
var imageObj = new Image();
imageObj.onload = function(){
context2.drawImage(imageObj, 0, 10, 97, 97);
};
imageObj.src = image;
}
}
Does anyone have any suggestions why this may not be working?
Same old problem... all of your image onload methods refer to one and only imageObj that gets overwritten every time through the loop.
for(var key in imagesList)
{
var image = imagesList[key][1];
var gridPosition = imagesList[key][0];
var playerCanvas = document.getElementById(gridPosition);
window.context2 = playerCanvas.getContext("2d");
//context2.save();
playerCanvas.setAttribute("width", 97);
(function(){
var imageObj = new Image();
imageObj.onload = function(){
context2.drawImage(imageObj, 0, 10, 97, 97);
};
imageObj.src = image;
})();
}
by wrapping in a immediately executing function block, each imageObj becomes it's own variable, which each onload function captures.
The first example is failing because you need to wait for the image to be loaded before you can draw it in the canvas. The randomness is caused by the fact that sometimes the image will have loaded by the time you run the context2.drawImage(..) command and sometimes it won't, by placing this code inside the onload handler of the image you should guarantee that the image data is present.
The second example looks better, but you should change onLoad to onload and move the lines
var playerCanvas = document.getElementById(gridPosition);
var context2 = playerCanvas.getContext("2d");
outside the for loop, also note the change to the second line.