I'm very new to javascript and EaseLJS but I don't understand how this doesnt work.
I have a html file:
<!DOCTYPE html>
<html>
<head>
<script src="easeljs-0.7.1.min.js" type="text/javascript"></script>
<script src="game.s.js" type="text/javascript"></script>
<script>
function init() {
renderLevel();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>
The game.s.js file looks like:
function renderLevel()
{
var stage = new createjs.Stage("canvas");
var bitmap = new createjs.Bitmap("brick.png");
stage.addChild(bitmap);
bitmap.x = 32;
bitmap.y = 32;
stage.update();
alert(stage.canvas);
alert(bitmap.name);
}
The alert I just put there to check the values. stage.canvas rightly points to the HTML5Canvas element but the image won't show!
What am I missing here? :)
Thank you
The problem is that you are adding the image to stage before it loads, then there's no image yet. You need to wait for the image to load before adding it to the stage.
You can do this by using a preload(); function to load all the images before calling init(); or renderLevel();. Here's what this function should look like:
function preload(images, callback) {
var count = images.length;
if (count === 0) {
callback();
}
var loaded = 0;
$(images).each(function () {
$('<img>').attr('src', this).load(function () {
loaded++;
if (loaded === count) {
callback();
}
});
});
}
...and then you can use it like so:
preload(["image1.png", "image2.png"], init());
Related
I was converting my p5js code to instance mode to run 2 canvases in the same DOM but my p5.AudioIn() function is not working. The error I get is referencing Failed to construct 'AudioWorkletNode'. I have uploaded a screenshot of the error below because it has more information about it. Why isn't AudioIn not working when converted to instance mode but works on global mode.
let s2 = function(sketch) {
sketch.quinnListenMic;
sketch.setup = function() {
let cnv = sketch.createCanvas(300, 300);
cnv.mousePressed(sketch.userStartAudio);
sketch.quinnListenMic = new p5.AudioIn(); //ERROR HERE
sketch.quinnListenMic.start();
}
sketch.draw = function() {
sketch.background(100)
sketch.micLevel = quinnListenMic.getLevel();
console.log(micLevel)
}
}
var myp5_2 = new p5(s2);
<html>
<head>
<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.js"></script>
</head>
<body>
</body>
</html>
There were a couple of issues, fixed below with comments:
let s2 = function(sketch) {
// sketch.quinnListenMic; doesn't make sense. 1) You don't want to store your variables on the p5 instance, and 2) that statement doesn't actually do anything
// This is how you declare a local variable for use in setup/draw functions:
let quinnListenMic;
sketch.setup = function() {
let cnv = sketch.createCanvas(300, 300);
cnv.mousePressed(sketch.userStartAudio);
quinnListenMic = new p5.AudioIn(); //ERROR HERE
quinnListenMic.start();
}
sketch.draw = function() {
// Fixed local variable declaration again
// Note: there is a bug with AudioIn.getLevel not working in all browsers
let micLevel = quinnListenMic.getLevel();
// Let's not spam the console log
// console.log(micLevel)
sketch.background(sketch.map(micLevel, 0, 1, 0, 255));
}
}
var myp5_2 = new p5(s2);
<html>
<head>
<!-- Your script tags were not valid -->
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.js"></script>
<!-- For some reason p5.sound does not work with the defer attribute -->
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/addons/p5.sound.min.js"></script>
</head>
<body>
</body>
</html>
I was looking in other posts for the answer, but the answers never seem to work in my favor. I'm trying to make an image fade when the page finishes loading. I've figured out I can loop until the counter reaches 0 (when image is invisible) and fade the image slowly.
The problem is, the setTimeout() function doesn't seem to be working.
Here's the code:
function timeout() {
setTimeout(function () {
//A comment said something about looping,
//but it was confusing to understand...
}, 50);
}
function setup() {
var load = document.getElementById('img');
load.style.opacity = 0 //Start at being visible
for (var i = 10; i > 0; i = i - 0.1) { //For loop
load.style.opacity = i; //Use the index variable and use that to set the opacity
setTimeout(); //Set the timeout, but this function does not pause the program for some reason...
//I need to pause for 0.05 seconds.
}
}
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body>
<div id="img">
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
</div>
</body>
</html>
I put the javascript in a seperate file, I just can't access it from Stack Overflow...
Can someone help? And also, sometimes the image can be finicky at times as well, like sometimes it won't hide like it's supposed to do. Thanks!
You declared a setTimeout without arguments, hence the error:
'Window': 1 argument required, but only 0 present."
Give it the appropriate amount of arguments:
for (var i = 10; i > 0; i = i - 0.1) { //For the loop
load.style.opacity = i;
setTimeout(functionName, milliseconds);
}
If you intended to use your timeout() function instead, call it. You're just instantiating a new setTimeout from the one you already created in the timeout() function.
You can use a recursive function instead of a loop
var load = document.getElementById('img');
function setup() {
load.style.opacity = "1"; //Start at being visible
timeout(1);
}
function timeout(i) {
setTimeout(function() {
i -= 0.1;
if(i<=0)
return;
load.style.opacity = i.toString();
timeout(i);
}, 200);
}
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body>
<div>
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150" id="img">
</div>
</body>
</html>
Basically you want to countdown the opacity with a recursive call. Here we are going from 1 down to 0 in 0.01 increments. The setTimeout will trigger the next recursive call after pausing for 50 msecs. These values, can of course, be adjusted as needed but the opacity needs to be a number from 1 (visible) to 0 (invisible).
function setOpacity(el, lvl) {
el.style.opacity = lvl;
}
function countDown(el, lvl) {
function action(el, lvl) {
return function () {
countDown(el, lvl);
}
}
setOpacity(el, lvl);
if (lvl > 0) {
lvl -= 0.01
setTimeout(action(el, lvl), 50);
}
}
function setup() {
var load = document.getElementById('img');
load.style.opacity = 1; //Start at being visible
countDown(load, 1);
}
window.addEventListener('load', setup, true);
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
</head>
<body>
<div id="img">
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
</div>
</body>
</html>
function setup() {
var load = document.getElementById('img');
(function(){
var i = 1;
setTimeout(function () {
i -= 0.1;
load.style.opacity = i;
if (i > 0) {
setTimeout(arguments.callee, 100);
}
}, 100);
})();
}
window.addEventListener('load', setup, true); //Add event listener for when the page is done loading
<div id="img">
<img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" width="200" height="150">
</div>
Getting an error saying too much recursion. The actually has to move the image. Its giving the same error even if I am trying to clear the timeout.
Note: I found out that the_image.style.left is not moving the image whatsoever.
<!DOCTYPE HTML>
<html>
<head>
<style>
.image_style{left:x}
</style>
<script>
var the_timer, x_position = 0, my_image;
function move_image(){
my_image = document.getElementById("imag");
x_position = x_position+1;
my_image.style.left = x_position;
the_timer = setTimeout(move_image(), 200);
}
</script>
</head>
<body onclick="move_image()">
<img src = "desert.jpg" id = "imag"
style="position:obsolute; width:300px; height:400px; left:0">
<script>
my_image = document.getElementById("imag");
alert(my_image.style.left);
</script>
</body>
</html>
You need to call setInterval instead of setTimeOut. Right now you are calling function within function which is a never ending process that's why you are getting error.
Also left property needs value in px while you are assigning only a number which will not move the image.
setInterval(function () { move_image() }, '1000');
function move_image() {
my_image = document.getElementById("imag");
x_position = x_position + 1;
my_image.style.left = x_position + "px";
console.log(x_position);
}
I want to change an image after some seconds.
I have this code that works fine with images:
<script language="javascript">
var x = 0,
images = [
"images/product/8f0165121827ee27e9ae4645988e3742.png",
"images/product/f227c25f3cc58ab2af04a5da27879f17.png"
];
setInterval(function() {
document.getElementById('ad').src = images[x];
if (x<1) {
x+=1;
} else if (x=2) {
x=0;
}
}, 1000);
</script>
<img id='ad' type='text' src="images/product/8f0165121827ee27e9ae4645988e3742.png" />
The problem is that I have one image and one swf file.
Can I change the code to change the image and swf file at specific time?
To incorporate an SWF file, your best bet would be to use SWFObject.
It is a simple open-source Javascript library that is easy-to-use and standards-friendly method to embed Flash content. Then place this in the body of your HTML code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
images = new Array;
images[0] = "images/product/8f0165121827ee27e9ae4645988e3742.png";
images[1] = "images/product/f227c25f3cc58ab2af04a5da27879f17.png";
setInterval(function() {changeImage()},1000);
x = 0;
function changeImage() {
if (x<2) {
document.getElementById('ad').src = images[x];
x+=1;
}
else if (x == 2) {
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
x+=1;
}
else {
x=0;
}
}
</script>
<img id='ad' type='text' src="images/product/8f0165121827ee27e9ae4645988e3742.png" />
With myContent.swf being the name of the SWF file you want to add. A good tool to use along with this is the SWFObject HTML and Javascript generator. It basically generates the HTML and Javascript you need to embed the Flash using SWFObject.
#Pies I also recommend using swfObject. However, Flash can accept most media files directly as a parameter. If you're already using flash on your page, and you know it exists, you can send an image or a swf file to it:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>
<bod>
<div id="ad"></div>
<script language="javascript">
images = new Array;
images[0] = "https://media.giphy.com/media/wLrdNV4YclpmM/giphy.gif";
images[1] = "http://samples.mplayerhq.hu/SWF/test.swf";
setInterval(function() {changeImage()},4000);
var x = 0;
var el = document.getElementById("ad");
function changeImage() {
swfobject.embedSWF(images[x], "ad", 600, 300, "10.0.0", null,{ bgcolor:"#000000" });
x+=1;
if (x > images.length-1) {
x=0;
}
}
changeImage();
</script>
</body>
I'd have fiddled this, but it seems jsfiddle blocks swfObject.
I have a simple HTML page that when is load runs a javascript code that makes a preload of a numbers of images. When all images are loaded the java script show the result: a simple timelapse/slideshow make with the images:
that's the code:
<HTML>
<HEAD>
<TITLE>Video</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<img name="foto">
<SCRIPT LANGUAGE="JavaScript">
var Pic = new Array();
Pic[0] = '/images/image1.jpg'
Pic[1] = '/images/image2.jpg'
Pic[2] = '/images/image3.jpg'
//this part in real code is replaced with a PHP script that print image location dinamically
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
//all images are loaded on client
index = 0;
function update(){
if (preLoad[index]!= null){
document.images['foto'].src = preLoad[index].src;
index++;
setTimeout(update, 1000);
}
}
update();
</script>
</BODY>
</HTML>
My question is: how can i put an image that can it be show before the script end?
Is there a way to do it?
Is possible to print somewhere in the page the current number of image loaded in the script?
Thanx
P.S. all my test don't give me any positive feedbak: each thing i put on html page will be shown after scripts end...
Launch the code on the onLoad event and add a src to your empty image tag:
<img name="foto" src="/images/image0.jpg">
This will load image0 at the beggining.
<HTML>
<HEAD>
<TITLE>Video</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" onLoad="preload()">
<img name="foto">
<SCRIPT LANGUAGE="JavaScript">
preLoad[i] = new Image();
function preload() {
var Pic = new Array();
Pic[0] = '/images/image1.jpg'
Pic[1] = '/images/image2.jpg'
Pic[2] = '/images/image3.jpg'
//this part in real code is replaced with a PHP script that print image location dinamically
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i].src = Pic[i];
}
}
//all images are loaded on client
index = 0;
function update(){
if (preLoad[index]!= null){
document.images['foto'].src = preLoad[index].src;
index++;
setTimeout(update, 1000);
}
}
update();
</script>
</BODY>
</HTML>
To add a counter, in the main loop write a string to the document with the i value, for example..
you need to have an event registered for when the image is actually fully loaded. I believe jquery has support for that.