I am simply trying to display an image and I’m not getting what I expect.
The 1624 × 1934 image is displayed as a small brown square in the middle of the screen. I have two questions:
Why isn’t the image displayed in the upper-left corner of the screen and how do I get the upper-left corner of the image to display in the upper-left corner of the screen? (I am positioning it at 0,0 and I haven’t changed the default imageMode.)
Why is the image so small and how do I make it bigger???
I’m doing things a little differently because I’m using p5.js instead of Java-based Processing. As you can see by looking (unless you can spot a mistake!), I’m doing a straight copy of the simple code at the top of reference | p5.js , except for changing the variable name. The code is about as simple as I gets. I am really puzzled!
As it turns out the image(s) need to be inside of a folder titled ‘images’ inside of your sketch folder. Then something like this should work and allow you to create a canvas and then position the image wherever you want.
let img;
let c;
function preload() {
// preload() runs once
img = loadImage('images/bradley.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);
}
Thanks, svan! I never would have guessed. I didn’t see anything about a folder in the docs! One more question. How do you create a folder using the openprocessing.org IDE?
Just saw this message. Don’t know what’s going on with the web editor when you try to use it. I went to the Files tab in the right sidebar and clicked on “select” and uploaded the image from my computer.
How do you create a folder using the openprocessing.org
I’m new to all this just like you; the following video uses drag and drop from your system to the other web editor (p5.js). My initial demo was using the Processing editor. https://www.youtube.com/watch?v=rO6M5hj0V-o
I didn’t watch the entire video, but did not see anything about the open processing editor. I clicked on the link that you provided and quickly looked for a place to upload an image but couldn’t find it. They probably have a way to do it, but I just missed it, not being familiar with it. At any rate, my best guess is that you’ll either have to use drag and drop of the image file from your system or pass a URL of a website which stores images.
I appreciate all the help you’ve tried to give me, but I’m still stuck. In the p5.js web editor I am unable to either drag-and-drop or select a folder into the Files tab. I’ve also been googling and searching this forum and I’ve been able to find instructions that tell you to select a file from a folder, but nothing about how to actually create a folder. I’ll leave this question open for now and hope for further help, but I might also start another topic asking how to create a folder. Anyway, thanks again for your help!
Keep working with those arrows in the left upper corner of the editor. First create a folder entitled ‘images’ and then upload a file by dragging and dropping your image into it. Easy, peasy - no need to start another thread!
@jafal The same p5 code may be run either in Processing or the web editor; he is trying to use the web editor. I already posted a demo similar to yours in about the eighth post from the top.
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?
