Great news! 
Have fun, and feel free to show us what you are doing.
1 Like
Bad news.
I thought I had the problem beaten but I haven’t.
It wasn’t the Adblocker afterall. I started by PC up this today and tried the code that was working the day before (no changes made) and its back to blank screens. I uninstalled the Adblocker and it made no difference. I’ve played around with various Antivirus (web blocking) setting and still nothing.
Surely someone has an idea of what might be going on here.
Regards,
Hi @Kiliad,
Sorry to learn of the bad news.
If you post the exact code that gave you trouble today, formatted so that we can copy and paste it on our own systems, we would be glad to come up with suggestions regarding what might be causing the problem. Though it might not cause problems on our own systems, we may notice something that could relate to the issue on yours.
Ok. This code was working yesterday.
It should load in a 300x300 image (below), and display it as is at the top left hand corner of the canvas and also put an inverted copy of it right next to it.
I have looked at the browser console and web developer tools in the Firefox browser and the code appears to have executed without causing any errors. There’s just nothing to see.
let img;
let x;
let y;
function setup() {
createCanvas(600, 300);
img = loadImage("frac01.jpg");
noLoop();
}
function processit() {
for (let x = 0; x < 300; x++) {
for (let y = 0; y < 300; y++) {
col = img.get(x, y);
stroke(col);
point(x, y);
point(x+300,300-y);
}
}
}
function draw() {
processit();
Try the following:
Comment out the noLoop() call.
Replace this:
stroke(col);
with this:
stroke(red(col), green(col), blue(col));
Also make sure you have a closing } at the end of the code.
Loading functions should be moved into preload() instead:
1 Like
Both @GoToLoop’s and my suggested changes worked on my system. But follow @GoToLoop’s suggestion regarding the preload() function, to make sure the image has a chance to load before you try to process it. Specifically, move this to preload():
img = loadImage("frac01.jpg");
@javagar @GoToLoop
Alrighty… I made the changes and it still showed a blank screen.
However, after opening up the Firefox settings page (I didn’t change anything) and closing it again, I got a message at the top of the screen saying, “This page is slowing down Firefox. To speed up your browser, stop this page.”
I decided to just let it go for awhile. I did some Googling of that message and a few minutes later looked back at the output page and the correct image had been displayed.
It seems as it the code is either running very slowly or is temporarily being blocked from displaying.
How long does it take to display the image on your systems?
This is the code…
let img;
let x;
let y;
function preload() {
img = loadImage("frac01.jpg");
}
function setup() {
createCanvas(600, 300);
//noLoop();
}
function processit() {
for (let x = 0; x < 300; x++) {
for (let y = 0; y < 301; y++) {
col = img.get(x, y);
stroke(red(col), green(col), blue(col));
point(x, y);
point(x+300,300-y);
}
}
}
function draw() {
processit();
}
Try uncommenting this:
//noLoop();
Otherwise, you are unnecessarily reconstituting the same image repeatedly, perhaps 60 times per second, which may be bogging down your system.
2 Likes
Hello,
I did some tests with Processing p5.js mode.
The default browser was changed with Windows 10 setup.
The sketch was launched from Processing with the run button.
It works with processit() in draw() or in keyPressed().
Don’t forget to press a key!
I added a random function so you can see some changes.
I added the data folder:
img = loadImage("/data/frac01.jpg"); // Look here!
Try this:
let img;
let x;
let y;
let ranX;
function preload() {
img = loadImage("/data/frac01.jpg"); // Look here!
}
function setup() {
createCanvas(600, 300);
//noLoop();
}
function processit() {
background(255);
ranX = random(0, 300);
for (let x = 0; x < 300; x++) {
for (let y = 0; y < 301; y++) {
col = img.get(x, y);
stroke(red(col), green(col), blue(col));
//point(x, y);
//point(x+300,300-y);
point(x+ranX, y);
}
}
}
function draw() {
//processit();
}
function keyPressed() {
processit();
}
It worked with Google Chrome and Microsoft Edge.
With FireFox I get this:
:)
1 Like
Oh! Thank you thank you!!!
Finally someone else gets the same problem. The universe isn’t playing silly games with me after all lol.
Looks like I may just have to use MS Edge… groan.
2 Likes
… or Chrome
Well, it’s good that you have options that work.
This is actually fine:
stroke(col);
However, separating out the color components may be useful for some of your work.
The following, which does separate out the color components, was tested with Chrome on a MacBook Air:
let img;
function preload() {
img = loadImage("data/frac01.jpg");
}
function setup() {
createCanvas(600, 600);
noLoop();
}
function processit() {
let r, g, b;
for (let x = 0; x < 300; x++) {
for (let y = 0; y < 300; y++) {
col = img.get(x, y);
stroke(col);
point(x, y);
r = red(col);
g = green(col);
b = blue(col);
stroke(r, g, b);
point(599 - x, y);
stroke(b, r, g);
point(599 - x, y);
stroke(g, b, r);
point(x, 599 - y);
stroke(...shuffle([r, g, b]));
point(599 - x, 599 - y);
}
}
}
function draw() {
processit();
}
It took a second or two for the image to appear, but it does work. Notice this in the setup() function:
noLoop();
With draw() including nested for loops, it is worth cutting out the unnecessary repeated redrawing of the same image.
Note that the image is in a data folder.
img = loadImage("data/frac01.jpg");
Have fun with your work, @Kiliad.
1 Like
The spread ... operator there is cool but unneeded b/c all p5.js color-related functions can deal w/ a passed array argument even though that’s not mentioned anywhere on its reference: 
stroke(...shuffle([r, g, b])); → stroke(shuffle([r, g, b]));
2 Likes