Chrome extensions with gif in canvas

Layzfat

Hi,

I'm follow Shiffman incredible lessons on using P5js with chrome extensions.

In the example of the Canvas sketch with chrome extensions I followed, I wanted to do some more. Add gifs in the canvas overlaying the top layer of the browser viewing.

My attempt was unsuccessful.. The gif doesn't play..

So what did I do. I used this example to import gif in to p5js put it in my sketch.js as this:

console.log('sketch blah');

var s = function(sketch) {
var img; //declare image

sketch.setup = function() {
  document.body.style['userSelect'] = 'none';
  let h = document.body.clientHeight;
  let c = sketch.createCanvas(sketch.windowWidth, h);
  img = sketch.loadImage("https://" + "media.giphy.com/media/xUOxfnlpG1tsYGFI40/giphy.gif");
  c.position(0,0);
  c.style('pointer-events', 'none');
  sketch.clear();
}

sketch.draw = function() {
  console.log('sketch Looping');
  sketch.image(img, 0, 0);
  //sketch.background(0);
  }
};

var myp5 = new p5(s);

My manifest.json looks like this.

  {
    "manifest_version": 2,
    "name": "Agent Extension",
    "version": "0.0002",
    "web_accessible_resources": [
      "gif/*.gif"
    ],
    "content_scripts": [
      {
        "matches": [
            "<all_urls>"
        ],
        "js": ["p5.js","p5.dom.js","p5.gif.js","p5.gif.min.js", "sketch.js"]

      }
    ],
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_icon": "img.png"
    }
  }

all the files are in the wright place.

I get this error in the browsers console

sketch.js:18 Uncaught ReferenceError: image is not defined
    at sketch.draw (sketch.js:18)
    at p5.redraw (p5.js:50266)
    at p5.<anonymous> (p5.js:44917)
    at p5.<anonymous> (p5.js:44812)
sketch.draw @ sketch.js:18
p5.redraw @ p5.js:50266
(anonymous) @ p5.js:44917
(anonymous) @ p5.js:44812

I did define it, my guess it is not defined for the browsers standards

I want to have a few 'objects' on the canvas and other types of code taking over the content as end goal.

GoToLoop

I used this example to import gif in to p5js...

That seems a bad example, b/c it loadImage() outside preload() w/o using a callback: :-&
https://p5js.org/reference/#/p5/preload

Here's a better example using loadImage() inside preload(): B-)

1. https://ThimbleProjects.org/gotoloop/97931/
2. https://ThimbleProjects.org/gotoloop/97931/sketch.js

GoToLoop

My attempt was unsuccessful... The gif doesn't play...

My advice for you is before trying it out as a Chrome extension, 1st make it as a regular sketch. L-)

Also, code it in global mode 1st. Only when you got it right, modify it for instance mode. :-B

You can check out old forum threads about instance mode below: O:-)
https://Forum.Processing.org/two/discussions/tagged?Tag=#instance+mode

koogs

image is not defined

image, not img. i'm guessing it means line 18

at sketch.draw (sketch.js:18)

oh look, line 18

kfrajer

Note:

"js": ["p5.js","p5.dom.js","p5.gif.js","p5.gif.min.js", "sketch.js"]

You only need one gif.js. hose are the same files, but the second one is a minified version aka. smaller file by minimizing usage of characters(short names, no spaces, etc.)

Also "version": "0.0002", should be "version": "0.1",

Remove console.log('sketch blah');

Last but not least: Do you have p5.js, p5.dom.js, etc in the same folder level as your sketch.js file? Do you also have a background.js file there?

I am able to load the file and show the first frame but I am not able to play the gif

Kf

Layzfat

@kfrajer I removed one of the gif.js files. Version also changed (it does it automatically when you look at the extensions page). Removing console.log has what relevance? And indeed all files and folders are in the same directory. And second on the fact that I'm able to load it and show it but it doesn't play.

@GoToLoop I remade the sketch with P5js in my browser, following a gif example from github, because I want a moving image. Strange that the P5js is a bad example, not?

Anyways, I've found the working answer ! for p5js no chrome extension. https://forum.processing.org/two/discussion/12736/animated-gif-support-in-p5.

I managed to get it to work in P5js browser extension as well but with an url and not with an image. It gives me the broken thumbnail

var s = function(sketch) {
var gif;

  sketch.preload = function()
  {
    gif = sketch.createImg('https://media.giphy.com/media/LXY5ljDMDJ0Ig/giphy.gif');
  }

  sketch.setup = function()
  {
    document.body.style['userSelect'] = 'none';
    let h = document.body.clientHeight;
    let c = sketch.createCanvas(sketch.windowWidth, h);
    c.position(0,0);
    c.style('pointer-events', 'none');
    sketch.clear();


  }

  sketch.draw = function()
  {
    gif.position(50,100);
  }
};

var myp5 = new p5(s);


  {
    "manifest_version": 2,
    "name": "Agent Extension",
    "version": "0.3",
    "web_accessible_resources": [
      "gif/*.gif"
    ],
    "content_scripts": [
      {
        "matches": [
            "<all_urls>"
        ],
        "js": ["p5.js","p5.dom.js","sketch.js"]

      }
    ]

  }

kfrajer

This post reflects on your observation, and indeed, using createImg is the proper way to do it: https://forum.processing.org/two/discussion/12736/animated-gif-support-in-p5

As a matter of fact, Shiffman uses it in his The Giphy API video (Check 11:30) , link here which was published about 2 years ago.

The p5.gif.js hasn't seen much action in the last two years: https://github.com/antiboredom/p5.gif.js and indeed there is an issue that it doesn't work in Firefox: https://github.com/antiboredom/p5.gif.js/issues/1

The library uses a p5.image object as pointed out by GoToLoop:
https://github.com/antiboredom/p5.gif.js/blob/master/p5.gif.js#L705
https://p5js.org/reference/#/p5/createImage

From the reference: https://p5js.org/reference/#/p5.Image, a p5.image should be able to play a gif:

Creates a new p5.Image. A p5.Image is a canvas backed representation of an image. p5 can display .gif, .jpg and .png .

So it is unfortunate it is not working as advertised.

An observation: From the library's GitHub repo, the example uses loadGif() instead of loadImage() as depicted in your original post. However, using the syntax from the website didn't solve the problem.

Thank you for sharing your solution.

Kf

GoToLoop

"p5.gif" example: "http://p5js.SketchPad.cc/sp/pad/view/ro.COx$0Iy6rWpzsc/latest

GoToLoop

A p5.Image is a canvas backed representation of an image.
@kfrajer: "So it is unfortunate it is not working as advertised."

Although using a somewhat cryptic explanation, it is nonetheless what's been advertised. :-?

It is stated that it is a "canvas backed representation".
Meaning it is a <canvas> tag, not an <image> 1. :-\"

Thus these functions: createImage(), loadImage(), createGraphics(), createCanvas(), etc., all create an object which wraps up an HTMLCanvasElement:
https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

Now, createImg(), not createImage() or loadImage(), indeed instantiates a p5.Element which wraps up a HTMLImageElement instead: :>
https://Developer.Mozilla.org/en-US/docs/Web/API/HTMLImageElement

kfrajer

@GoToLoop I was referring to:

p5 can display .gif,

Now, it is being used by the lib as I pointed it out in the p5.gif.js source code above: createImage()

I am not an expert in js or p5.js but if createImage, which returns a p5.image, was used in the library above, then I would expect it would play a gif. At this point, I have no clue if the issue is the library (likely) or p5.js or indeed bc it is a canvas instead of an image element. I was interested to get the p5.gif/js lib working... the above solution is enough for the extension demo.

Kf

GoToLoop

I haven't perused p5.gif.js yet, only p5.js. b-(

Regardless, I believe that "p5.gif.js" merely extracts each frame outta ".gif" as an array of p5.Image objects; which are <canvas> wrappers, not <image> 1s. :-B

Layzfat

@kfrajer Thanks for the link!