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.
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).
Here’s the output:
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