Image not appearing... JS (p5.js)

Question

This is coded in a javascript library called p5.js see: https://p5js.org/reference/

So I set up a basic code to try and get a custom cursor...

var img;

function setup() {
  createCanvas(1000, 650);
  img = loadImage("assets/arrowmouse.png");
  image(img, mouseX, mouseY);
}

function draw() {
  background(20, 155, 255);
  fill(0, 0, 0);
}

No image appears so I'm getting a blue screen (my background)

Note this is copy-paste syntax exactly as done in the documentation — Coding King2, Apr 30 '18 at 00:56
Why not use `css` to set the custom cursor? For example [**CodePen Demo**](https://codepen.io/anon/pen/deNQeY) — NewToJS, Apr 30 '18 at 01:26
well js fiddle isnt even running it although the library is available but here look at this on the reference page — Coding King2, Apr 30 '18 at 01:26
You haven't called any of these functions in your code. So do setup();draw(); Does it change anything?? — ibrahim tanyalcin, Apr 30 '18 at 01:26
No it doesn't because it is default called in the library the draw function repeats until otherwise told to stop. — Coding King2, Apr 30 '18 at 01:31
well about that cs thing.. its not just the cursor. I need to be able to call multiple images for a game im making. in fact i need these images a lot — Coding King2, Apr 30 '18 at 01:32
I see in the references that loadImage gets an optional callback, so what would happen if you do `loadImage("assets/arrowmouse.png",image(img, mouseX, mouseY))` — ibrahim tanyalcin, Apr 30 '18 at 01:33

score 1 · Accepted Answer · edited Apr 30 '18 at 01:51

1

Solved

Its a google chrome security block. I used firefox and it worked fine.

Solved in a YouTube comment: 7.8: Objects and Images - p5.js Tutorial

had to tweak syntax too it looks like this now:

var img; function preload(){ 
arrowMouse = loadImage("assets/arrowmouse.png"); 
} 
function setup(){ 
createCanvas(1000,650); 
} 
function draw(){ 
background(20,155,255); 
fill(0,0,0); cursor("none"); 
image(arrowMouse, mouseX, mouseY,20,30); 
}

but that wont work in chrome.

This also may help: Disable same origin policy in Chrome

Thanks to all that tried to help!

edited Apr 30 '18 at 01:51

NewToJS

2,664
3
12
22

answered Apr 30 '18 at 01:36

Coding King2

37
1
9

1

Could you explain more about this Chrome security block? This might help others in future who are experiencing the same or similar problem. – NewToJS Apr 30 '18 at 01:41
solved in a youtube comment of a comment https://www.youtube.com/watch?v=FVYGyaxG4To look for the comment from Márk Molnár – Coding King2 Apr 30 '18 at 01:43
had to tweak syntax too it looks like this now: var img; function preload(){ arrowMouse = loadImage("assets/arrowmouse.png"); } function setup() { createCanvas(1000,650); } function draw() { background(20,155,255); fill(0,0,0); cursor("none"); image(arrowMouse, mouseX, mouseY,20,30); } but that wont work in chrome – Coding King2 Apr 30 '18 at 01:43
this also may help? https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome – Coding King2 Apr 30 '18 at 01:46
If this is the answer to the question, please mark it as accepted so your answer stop showing up as needing an answer. – Kevin Workman Apr 30 '18 at 16:22
Seems like firefox is also blocking this. – krenerd Apr 15 '21 at 01:54

Image not appearing... JS (p5.js)

1 Answers1