Displaying an image web-editor openprocessing.org

yes your post shows that and you have explained later how to create image folder

@jafal and @svan:

OK, thanks for your posts. The screenshots were especially helpful. I now understand the crux of the problem. I thought that @svan and I were talking about the same web-based editor, but we weren’t.
Both of you, @svan and @jafal, are taking about the editor at https://editor.p5js.org, but I’m talking about the web-based editor at https://openprocessing.org. (And yes, I’m using a Mac instead of a Windows machine.)

My sketch is at [Magritte Tribute - OpenProcessing (Magritte Tribute - OpenProcessing). If you look at my code you’ll see that it’s nothing more than an exact copy of the first example at the top of the p5.js image documentation page https://p5js.org/reference/#/p5/image, with the filename of the image changed to ‘computer.jpg’. If you look in the right sidebar of the page with my sketch, under the Files tab, you’ll see that I uploaded a file named ‘computer.jpg’, which is the 1624 × 1934 image file I try to open in my sketch. But, if you see the same thing I see when you look at the sketch, then you see a small image in the center of the screen instead of a large image with it’s upper-left corner in the upper-left corner of the screen, which is what I expect.

So, if I need to put my image in a folder, then I need to know how to either create or upload a folder in the web-editor at openprocessing.org. Do either of you have any idea how to do this?

Thanks,
–Ken

createCanvas(img.width, img.height);

1 Like

We’re having trouble getting on the same page. If I understand correctly you’ve already uploaded a file to openprocessing.org. How did you do that (I need to know)? If you already have a file in your system and can display it, then you probably don’t need a folder. That editor may be doing things differently than p5.js. It seems like you just need to have better control of the size and placement of the image; is that correct? I tried to setup an account on open processing but it seems like everything I post there is in the public domain and someone wants 40 dollars a year to keep it private. Not too happy about that.

Ken,

You should be able to use the same code that I already posted. Just change the preload() filename so that it’s for your file instead of the one for your Mac. The same code should work in either editor.

hi
here is how to upload image @svan posted it watch it

@jafal That’s for p5.js and he just told us he wants to use openprocessing.

Ken,

Copy/paste this into your open processing editor:

let img;
let c;

function preload() {
  img = loadImage('computer.jpg');
}

function setup() {
  // setup() waits until preload() is done
  createCanvas(800,800);
  img.loadPixels();
  // get color of middle pixel
  c = img.get(img.width / 2, img.height / 2);
}

function draw() {
  background(c);
  image(img, 40, 40, 720, 720);
}

You should see this:

Ken,

You don’t need to create an image folder with openprocessing. Save your source code file first (button in right upper corner), fill out some form that pops up (fill in filename) and hit ‘submit’, and then you should be able to go under ‘Files’ on the right hand side and drag and drop your image there (see below).

op

Here’s the output:

1 Like

look at this sketch its working because the image link was provided

l found what you found

1 Like

I added one line to the code on OpenProcessing link provided and it works:

let img;
function preload() {
  img = loadImage('computer.jpg');
}
function setup() {
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
	createCanvas(img.width, img.height);  //Added this line
  image(img, 0, 0);
}

:)

1 Like

Could you please explain how you got the image from a website to load? I don’t see a URL in preload(). Thanks.

Whew! @svan, @jafal, @GoToLoop, @Chrisir, and @glv, thank you so much for the help! My mistake was thinking that the example at the top of page https://p5js.org/reference/#/p5/image was meant to be a full working example. In fact, it is missing a createCanvas() statement. All I needed to do was to add this one statement. In retrospect, it seems pretty stupid not to think of trying to add such a statement, but I had blinders on because I was focused on the fact that the most basic example code from the docs didn’t work. Well, thank you all!

@svan, as for your question about how I loaded the image file into the openprocessing.org editor: See the sidebar on the right? If it’s collapsed, open it. Click on the File tab. There you see two ways to upload a file from your local computer. I clicked on “select” instead of using drag-and-drop. Then I used Finder (on Windows I assume it would be File Explorer) to navigate to the file “computer.jpg” and select it. Once the file was uploaded I could refer to it by name in my program.

2 Likes

I have requested a change to the example code by adding the createCanvas() line to prevent confusion in the future. Thanks for the post.

2 Likes

Response to request to add createCanvas() line:

By default p5 makes a canvas that is 100x100 when createCanvas() is absent.
This is outlined in the createCanvas reference. This means that the 
loadImage() example works currently.

That’s probably why you saw the little itty bitty image in the center of the screen when you ran the example code as is.

Thanks for making the request!

OK, now I understand why I saw what I saw.

What an interesting reply to your request. Basically, if you have a comprehensive understanding of the entire document set you shouldn’t have any problem understanding the behavior of any sketch. Not a very helpful attitude, it seems to me. A little bit of redundancy can greatly aid understanding. Is simply adding a createCanvas() statement to the example too difficult a thing to do?

If redundancy wasn’t needed why would the way we use natural languages contain so much of it? (A rhetorical question.)

Oh well, thanks again for asking!

Not a very helpful attitude, it seems to me.

I agree with you! I just asked to make it better for the unsuspecting user.

1 Like
2 Likes

In retrospect I should have said work ‘as expected’. If it had worked as expected by the poster this thread would have never occurred in the first place.

1 Like