Screensaver loads image in radom location after inactivity, restarts if user does anything

Question

I have the following two pieces of code (awful but I have no idea what I'm doing):

var stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", tick);

// Simple loading for demo purposes.
var image = document.createElement("img");
image.src = "http://dossierindustries.co/wp-content/uploads/2017/07/DossierIndustries_Cactus-e1499205396119.png";

var _obstacle = new createjs.Bitmap(image);
setInterval(clone, 1000);

function clone() {
    var bmp = _obstacle.clone();
    bmp.x= Math.floor((Math.random() * 1920) + 1);
    bmp.y = Math.floor((Math.random() * 1080) + 1);
    stage.addChild(bmp);
}

function tick(event) {
    stage.update(event);
}

<script>
$j=jQuery.noConflict();
jQuery(document).ready(function($){
    var interval = 1;

setInterval(function(){
   if(interval == 3){
       $('canvas').show(); 
       interval = 1; 
   }
   interval = interval+1;
    console.log(interval);
},1000);

$(document).bind('mousemove keypress', function() {
    $('canvas').hide();
    interval = 1; 
});
});

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="1920" height="1080"></canvas>

Basically what I'm hoping to achieve is that when a user is inactive for x amount of time the full page (no matter on size) slowly fills with the repeated image. When anything happens they all clear and it begins again after the set amount of inactivity.

The code above relies on an external resource which I'd like to avoid and needs to work on Wordpress.

Site is viewable at dossierindustries.co

Answer 1

Rather than interpret your code, I made a quick demo showing how I might approach this.

The big difference is that drawing new images over time is going to add up (they have to get rendered every frame), so this approach uses a cached container with one child, and each tick it just adds more to the cache (similar to the "updateCache" demo in GitHub.

Here is the fiddle. http://jsfiddle.net/dcs5zebm/

Key pieces:

// Move the contents each tick, and update the cache
shape.x = Math.random() * stage.canvas.width;
shape.y = Math.random() * stage.canvas.height;
container.updateCache("source-over");

// Only do it when idle
function tick(event) {
  if (idle) { addImage(); }
  stage.update(event);
}

// Use a timeout to determine when idle. Clear it when the mouse moves.
var idle = false;
document.body.addEventListener("mousemove", resetIdle);
function resetIdle() {
    clearTimeout(this.timeout);
    container.visible = false;
    idle = false;
    this.timeout = setTimeout(goIdle, TIMEOUT);
}
resetIdle();
function goIdle() {
    idle = true;
    container.cache(0, 0, stage.canvas.width, stage.canvas.height);
    container.visible = true;
}

Caching the container means this runs the same speed forever (no overhead), but you still have control over the rest of the stage (instead of just turning off auto-clear). If you have more complicated requirements, you can get fancier -- but this basically does what you want I think.