#1153 ✓ checked-in
David Humphrey

Calling background() with image different size than sketch throws in p5

Reported by David Humphrey | March 16th, 2011 @ 12:09 PM | in 1.2

I notice that p5 will throw if you try to use a PImage that is a different size than the current sketch:

"background image must be the same size as your application."

We seem to just not do anything, and show a gray background. That might be OK, so we can skip the extra if check on every call to background, but we might also want to do the same thing. Filing just in case we want to change.

Comments and changes to this ticket

  • Daniel H

    Daniel H March 16th, 2011 @ 02:56 PM

    Hmmm.. I handled this in code a long time ago. I wonder why it doesn't anymore.

  • cgomes7

    cgomes7 March 22nd, 2011 @ 04:43 PM

    When I ran this sketch in processing.js I get:

    PImage b;
    b = loadImage("http://scotland.proximity.on.ca/dxr/tmp/processing-js/examples/sene...;
    background(b);

    Error! Error was:Unable to execute pjs sketch: Background image must be the same dimensions as the canvas.

  • mbrzuzy

    mbrzuzy March 22nd, 2011 @ 07:59 PM

    cgomes7, I also tried running that code but specified the dimensions of the canvas to match the exact dimensions of the image and I still got that error. I also tried saving the image locally in case there was an issue with loading the image from a remote location, but I still got the error "Error was:Unable to execute pjs sketch: Background image must be the same dimensions as the canvas.".

  • Daniel H

    Daniel H April 7th, 2011 @ 10:22 PM

    • Milestone order changed from “20” to “0”

    see below

    [22:19] <@dhodgin>         if (!img.pixels || img.width !== p.width || img.height !== p.height) {
    [22:19] <@dhodgin>           throw "Background image must be the same dimensions as the canvas.";
    [22:19] <@dhodgin>         }
    [22:19] <@dhodgin> this means if the pixels aren't loaded because you didn't preload an image it will throw here if the image isn't ready or for whatever other reason the pixels aren't there
    [22:20] <@dhodgin> should we change it to throw 2 different errors one for background size and one for "Pixels do not exist yet" or something?
    [22:20] <@dhodgin> this is whats causing the confusion in this bug i think
    
  • Daniel H

    Daniel H April 8th, 2011 @ 11:33 PM

    • State changed from “bugs” to “peer-review-requested”
    • Assigned user changed from “Daniel H” to “David Humphrey”

    changed to first check if image is loaded and throw a proper error if not.
    then throw if dimensions dont match.

    tested on my pimage/background example by removing the preload statement to throw not loaded error, then changing size() call to throw on wrong dimensions.

    branch: https://github.com/dhodgin/processing-js/tree/1153
    commit: https://github.com/dhodgin/processing-js/commit/8783da796ab8e808368...

  • annasob

    annasob May 9th, 2011 @ 02:55 PM

    • State changed from “peer-review-requested” to “super-review-requested”
    • Milestone order changed from “23” to “0”

    So if we in fact want nothing to happen and throw an error message this patch does that. Not sure if we want to say what the actual dimensions should be to help the user out. This gets a PR+ for me
    - Unit tests pass

    • the example cgomes7 posted in comment 2 throws correctly however do we want a unit test for this?
  • David Humphrey

    David Humphrey May 11th, 2011 @ 11:59 AM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “David Humphrey” to “Daniel H”

    SR-

    I don't agree with the !loaded error message, consider something like:

    "Error using image in background(): {filename} not loaded."

  • Daniel H

    Daniel H May 12th, 2011 @ 10:26 PM

    [22:20] <@dhodgin> humph re: #1153 background throw error

    [22:21] <@dhodgin> how about "Error using image in background(). Could not access pixels: {filename} not loaded."
    [22:21] <@dhodgin> id like to put something in there about not being able to access the pixels because just error loading background would drive me nuts if i was a new dev
    [22:21] <@dhodgin> first thing id say is WHY
    [22:21] <@dhodgin> and then make some reference to the cryptic errors of github
    [22:22] <@humph> it hasn't got anything to do with pixels though
    [22:22] <@humph> that's what I don't like
    [22:22] <@humph> it's just that it isn't loaded
    [22:23] <@humph> and it's not really an error "using" it.  it's just not loaded
    [22:23] <@dhodgin> hmm i suppose
    [22:24] <@dhodgin> pasting this in ticket so i remember tomorrow. gonna fix it in the morning with the blur ticket
    
  • Daniel H

    Daniel H May 13th, 2011 @ 01:28 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “Daniel H” to “David Humphrey”

    updated here
    commit: https://github.com/dhodgin/processing-js/commit/ac25c8872737eaf6a82...
    branch: https://github.com/dhodgin/processing-js/tree/1153

    unfortunately there is no way that I can figure out to get the filename from within background its only passed the PImage reference which has no filename property and I dont want to go messing around with the properties of PImage just to add a filename.

    There is only one background call per sketch even in the draw loop so really as long as the message identifies that its background() failing you can know from your sketch which file it is anyway.

  • David Humphrey

    David Humphrey May 16th, 2011 @ 09:18 PM

    • State changed from “super-review-requested” to “review-looks-good”
    • Assigned user changed from “David Humphrey” to “annasob”

    SR+

  • annasob

    annasob May 17th, 2011 @ 03:46 PM

    • State changed from “review-looks-good” to “staged”
    • Milestone order changed from “24” to “0”

    Staged in annasob/processing-js commit

  • Jon Buckley

    Jon Buckley June 4th, 2011 @ 11:50 PM

    • State changed from “staged” to “checked-in”

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Shared Ticket Bins

Referenced by

Pages