So I want to preload every image inside one folder and to do so I made a loop which makes an address as a variable using a concat() and tries to load the image, but when I put that variable inside the loadImage() I'm getting the error.
I also tried to find the function which would've gotten every file in the folder in array and load images that way, but I couldn't find anything for p5.js
Code works when I do this:
var address = 'ones/one_1.png';
var img = loadImage(address);
Code doesn't work when I do this:
var str = 'ones/one_';
var n = 1;
var address = str.concat(n.toString(),'.png');
var img = loadImage(address);
Error:
p5.js says: It looks like there was a problem loading your image.
Related
I'm kind of newbie and and I'm starting to be very fascinated by GSAP animations...
I found this with the code and everything: https://codepen.io/GreenSock/pen/QWjjYEw.
My problem is that in this animation I have some random pictures, but I want to use some local images that I have instead. Any suggestion of what to change?
I'm using Vue 2 and I put already the JS in the mounted :)
Thanks in advance!
I know that I should change this part but I don't know how
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;
I tried to duplicate this
part:section.bg = section.querySelector(".bg");
with:
section.bg = section.querySelector(".bg");
section.bg = section.querySelector(".bg2")
section.bg = section.querySelector(".bg3");
and then here :
section.bg.style.backgroundImage = "url('myImagePath')";
section.bg2.style.backgroundImage = "url('myImagePath')";
section.bg3.style.backgroundImage = "url('myImagePath')";
Nothing happens...if I put the imagepath inline style on the html I lose the animation.
First, your Q not related to vue.
Next inspect your code (For errors -- your main mistake section.bg is item inside a forEach loop - the path should be related to each iteration).
One way (DRY) to change the images from random images is to get the data-attribute of each bg item inside the forEach "section" loop.
One way to solve this.
Change the path from random path:
section.bg.style.backgroundImage = `url(https://picsum.photos/1600/800?random=${i})`;
To specific one for each iteration:
/*#### NEW CODE ####*/
let image_path = section.bg.dataset.image;
// Get images path from data attribute
section.bg.style.backgroundImage = `url(${image_path})`;
Read more:
Use_data_attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
GSAP UtilityMethods: https://greensock.com/docs/v3/GSAP/UtilityMethods/toArray()
querySelector: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I created HTML5-canvas and added Rectangle like Movie (Movie1)
Then I created Animate for Movie1
But I don't know how works JS, when I try to stop Animate.
AS3 Action:Frame1
trace (this.Movie1);
this.Movie1.gotoAndStop(1);
How I need to write it on JS ?
I check different way but all of them doesn't work.
this.Movie1.gotoAndStop(1);
Movie1.gotoAndStop(1);
I opened console IE and saw
SCRIPT5007: Unable to get property 'gotoAndStop' of undefined or null reference
also I wrote second Example
this.stop();
alert(this.Movie1);// output: MovieClip (name=null)
//this.Movie1.gotoAndStop(1);
this.addEventListener('click', alertpopup);
function alertpopup(){
//this.Movie1.gotoAndStop(1);
alert(this.Movie1); // output: undefined ???
}
So, I decided this task only when I inserted code in generated HTML file at the end Function Init(). Something like this
var canvas, stage, exportRoot;
function init() {
// --- write your JS code here ---
canvas = document.getElementById("canvas");
exportRoot = new lib.ExAS3_Canvas();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
Update(exportRoot);
}
function Update(root){
<!-- write your code here -->
root.stop();
//this.Movie1.name = 'Movie1';
console.log("m=" + root.Movie1);
root.Movie1.stop();
root.Movie1.addEventListener('click', alertpopup);
function alertpopup(){
root.Movie1.gotoAndStop(1);
console.log("r=" + root.Movie1);
}
}
Why the code is not working from the IDE ?
I try to change this on my first frame on exportRoot and it works partially
//this.Movie1.stop(); // it doesn't work
//exportRoot.Movie1.stop(); // it doesn't work
this.Movie1.addEventListener('click', alertpopup);
var i = 0;
function alertpopup(){
i++;
if(i==2) i = 0;
exportRoot.Movie1.gotoAndStop(i);
}
I found that writing your code in the first frame gives a problem getting in touch with movieclips on the Stage (this.Movie1) - but putting the code in the second frame helps. Also I found, that the use of "this" inside a function sometimes gives the usual js-error: "this" refers to the function, and not to the object you are "inside" (Stage). Solve this problem by a variable "var that=this;" and use "that" instead of "this" inside the function.
I tried to set the includeDefaultValues:false every time I create an object, however, the save string for an image is still:
[{"type":"image","originX":"center","originY":"center","left":396.16,"top":108.16,"width":2475,"height":675,"fill":"rgb(0,0,0)","overlayFill":null,"stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.32,"scaleY":0.32,"angle":0,"flipX":false,"flipY":false,"opacity":1,"selectable":true,"hasControls":true,"hasBorders":true,"hasRotatingPoint":true,"transparentCorners":true,"perPixelTargetFind":false,"shadow":null,"visible":true,"clipTo":null,"src":"http://localhost/fabricjstest/designs/images/ds130814014834.png?t=1376502517","filters":[]}],"background":"#FFF"}
I am pretty sure most of those are default values, so how can I get it to work?
Maybe I am saving wrong, so this is my save code:
var obj = canvas.toObject();
var jsn = JSON.stringify(obj);
alert(jsn);
Here is the version directly from the js file: var fabric=fabric||{version:"1.2.9"};
So the question is: How do I disable default values.
I am using the file.saveURL in a loop and its working good but I am seeing some strage things. Basically I loop over about 70 images and then grab the uri to them after they are saved and store that locally so I can then use it to display in the app
What happens is that once the loop is done I display the images out but randomly some of the images are the same. I have validated the correct URL is being passed but its as if and I don't know for sure but maybe the function is not done with the previous and is somehow overwriting it?
This makes the most sence because the issue usually happens with images right next to each other.
So I guess my question is, does the file.saveURL only work on a one to one aspect, like it has to by synchronous?
If that is the case what would be the recommended approach for looping over and saving these images.
Thanks!
EDIT
This is a basic sample (I have some conditional stuff in there but this is the main part)
I have the JSON object stored and I loop over it
$(data).each(function(i){
var slcval = 'speaker' + this.SID;
var imageID = 'simageid' + this.IMAGE;
var speakerImage = "http://mydomain.com/users/images/speakers/" + this.IMAGE;
//then I call the save url function
saveURLImage(speakerImage,slcval,'speaker',this.SID,imageID);
}
this loops over my images and calls the save image function that then does the save URL function
function saveURLImage(url,ID,type,extraVal,imageID){
forge.file.saveURL(url, function (file) {
forge.file.URL(file, function (url) {
var fileObject = JSON.stringify(url);
localStorage.setItem(ID, fileObject);
})
});
}
This is a simple version of it, I have some other parts that set some localstorage vars but this is the main call.
So my problem was a scoping issue
so if anyone else comes arrocss this I found this thred that helped out
Javascript: function in setTimeout and references
Basically what I did was creat a function that has an announmous function in it so the scope would be correct
function saveURLImage(url,ID,type,extraVal,imageID) {
(function() {
saveURLImageScoped(url,ID,type,extraVal,imageID)
})();
}
so the function name is still the same as before but I renamed the main function saveURLImageScoped and now it has its own variable scope
When I use:
loader = new MovieClipLoader();
_root.createEmptyMovieClip("level1",getNextHighestDepth());
_root.level1.createEmptyMovieClip("image",getNextHighestDepth());
loader.loadClip("http://someimage.jpg",_root.level1.image);
...it works and the image shows up.
But when I use:
loader = new MovieClipLoader();
_root.createEmptyMovieClip("level1",getNextHighestDepth());
_root.level1.createEmptyMovieClip("level2",getNextHighestDepth());
_root.level1.level2.createEmptyMovieClip("image",getNextHighestDepth());
loader.loadClip("http://someimage.jpg",_root.level1.level2.image);
...the image doesn't show up. Can anyone tell me why? How can I make this work?
the depth you are supplying is going to be '1'. is that what you are expecting?
each movie clip has it's own set of depths, so the nextHighestDepth() of the newly create 'image' mc, will be 1. it should not prevent loading the image though.
As gthmb says, you should call getNextHighestDepth() on the same MovieClip as you do the createEmptyMovieClip() on. So your code example should be more like:
loader = new MovieClipLoader();
_root.createEmptyMovieClip("level1",_root.getNextHighestDepth());
_root.level1.createEmptyMovieClip("level2",_root.level1.getNextHighestDepth());
_root.level1.level2.createEmptyMovieClip("image",_root.level1.level2.getNextHighestDepth());
loader.loadClip("http://someimage.jpg",_root.level1.level2.image);
Also, I would recommend storing references to the created MovieClips, so you won't have to use the full path in each occurrence in the code, something in the lines of this:
loader = new MovieClipLoader();
var level1:MovieClip = _root.createEmptyMovieClip("level1",_root.getNextHighestDepth());
var level2:MovieClip = level1.createEmptyMovieClip("level2",level1.getNextHighestDepth());
var image:MovieClip = level2.createEmptyMovieClip("image",level2.getNextHighestDepth());
loader.loadClip("http://someimage.jpg",image);