My sketch which is just basically coding challenge 5 works great in the web editor. I used some of my own art in it and it works fine with my art. When i try to share online it has a problem. i saw in inspect element a differernt path to the water can vs the flower images and i wonder if it has something to do with it. When i try to present my sketch it just says loading.
I took out the flowers and then it would present. I think it has something to do with accessing the flower images in an array.
1 Like
sharing a p5js sketch that includes images shouldn’t be a problem. are there any error messages in the console (browser or sketch)?
hi thanks for answering
in the console it works just fine but when i go to present it then it says it cant load the flower images
it says says loading i saw this in the inspect console
posting a link to the code might be easier
main sketch.js file
var p;
var f = [];
var drops = [];
var img = [];
var watercan;
function preload() {
watercan = loadImage("can.png");
for (var i = 0; i < 6; i++) {
img[i] = loadImage("flower" + i + ".png");
}
}
function setup() {
createCanvas(600, 400);
p = new player();
// drop = new water(width/2, height/2);
for (var i = 0; i < 6; i++) {
var kitten = img[i];
f[i] = new flower(i * 80 + 80, 60, kitten);
}
}
function draw() {
background(55, 155, 100);
p.show();
p.move();
for (var i = 0; i < drops.length; i++) {
drops[i].show();
drops[i].move();
for (var j = 0; j < f.length; j++) {
if (drops[i].hits(f[j])) {
f[j].grow();
drops[i].evap();
//console.log("hit");
}
}
}
var edge = false;
for (var i = 0; i < f.length; i++) {
f[i].show();
f[i].move();
if (f[i].x > width || f[i].x < 0) {
edge = true;
}
if(f[i].y > height) {
f[i].y =0;
}
}
if (edge) {
for (var i = 0; i < f.length; i++) {
f[i].shiftDown();
}
}
// how to go through an array backwards. start at the end //length -1, go down by one and start at 0
for (var i = drops.length - 1; i >= 0; i--) {
if (drops[i].toDelete) {
drops.splice(i, 1);
}
}
}
function keyReleased() {
if (key != ' ') {
p.setDir(0);
}
}
function keyPressed() {
if (key === ' ') {
var drop = new water(p.x, height - 60);
drops.push(drop);
}
if (keyCode === RIGHT_ARROW) {
p.setDir(1);
} else if (keyCode === LEFT_ARROW) {
p.setDir(-1);
}
}
html file:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js" type="text/javascript"></script>
<script src="player.js" type="text/javascript"></script>
<script src="flower.js" type="text/javascript"></script>
<script src="water.js" type="text/javascript"></script>
</body>
</html>
my flower.js file
typ
function flower(x,y,img ){
this.x= x;
this.y = y;
this.kitten= img;
this.r = 30;
this.xdir = 1;
//this.ydir= 0;
this.grow =function (){
this.r = this.r+1;
}
this.move= function (){
this.x =this.x +this.xdir;
//this.y = this.y+ this.ydir;
}
this.shiftDown = function (){
this.xdir *= -1;
this.y +=this.r;
}
this.show = function () {
//fill (225,0,200);
// ellipse(this.x, this.y, this.r*2, this.r*2);
image (this.kitten, this.x, this.y, this.r*2,this.r*2 );
}
}e or paste code here
1 Like
just gonna have a look but you know you can just share the link to the editor and people can view your sketch like mySketch
2 Likes
2 Likes
that link works fine for me. how were you sharing the sketch? were you just offering a download and expecting lauching index.html to work? if so then cors is an issue as GoToLoop said but a hacky little way to work around that you can just encode the images into a base64 string using a site like this and using the base64 string like this but it all depends on how you are sharing the sketch. if you just give the link anyone should be able to use it if you want to offer downloads base64 embedding may be a better options and you can put all of the base64 strings in another .js file to keep stuff tidy. a bit hacky but it works.
edit: ofc if you just host it on your own server you can fix those problems or put it on gamejolt itch or newgrounds
3 Likes
ok im might share the link to share then until i get my hackerman skills up then.
Thanks for the help!! 
2 Likes
awesome ill try that!