Processing - logo banner not loading on website

Question

I saved the processing code into visual studio code as a plain text file, i added the images/gradient.jpg as well as for the logo. I replaced the img code to canvas code and yet no animated logo appears. I have tried everything up to this point and nothing has worked. The logo is just not appearing.

@pjs preload="gradient.jpg,BRICKSxMORTAR_logo_transparentX.png";


PImage gradient;
PImage logo;




void setup(){
 size(792, 150);
 background(0);
 gradient = loadImage("gradient.jpg");
 logo = loadImage("BRICKSxMORTAR_logo_transparentX.png");
 }

void draw(){
  for(int i = 0; i < 10; i++){
  float x = random(width);
  //ellipse(x, 20, 300, 200);
  image(gradient,300,11);
  ellipse(x, 200, x, 300);
  image(logo,1,9);
  //ellipse(x, x, 30, 20);{




 }
}


    <canvas id="logo" data-processing-sources="BxM_animatedLogo.pde"></canvas>
</div>

Answer 1

It looks like you're trying to conver a sketch from processing-java to processingjs (which is deprecated).

Using the WayBackMachine here is the ProcessingJS loadImage() reference. Just in case, here's the description:

Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may be loaded. To load correctly, images must be located in the data directory of the current sketch, the images must be preloaded using @pjs preload specifying the path to the image. In most cases, load all images in setup() to preload them at the start of the program. Loading images inside draw() will reduce the speed of a program. You can also load images from a data URI, such as "data:image/jpg;base64,{base 64 encoded data block}" which does not require any preloading.

The filename parameter can also be a URL to a file found online. For security reasons, a Processing sketch found online can only download files from the same server from which it came.

The extension of the filename parameter is used to determine the image type. In cases where the image filename does not end with a proper extension, specify the extension as the second parameter to loadImage(), as shown in the third example on this page.

If an image is not loaded successfully, the null value is returned and an error message will be printed to the console. The error message does not halt the program, however the null value may cause a NullPointerException if your code does not check whether the value returned from loadImage() is null.

NOTE: Some browers will not allow you to load images from file:// URIs. It is recommended that you use a webserver for your development and testing to avoid any problems with file:// URIs.

I've emphasised the important part in italics and here's one the example snippets:

// @pjs preload must be used to preload the image

/* @pjs preload="laDefense.jpg"; */

PImage b;

void setup() {

  b = loadImage("laDefense.jpg");

  noLoop();

}



void draw() {

  image(b, 0, 0);

}

Hopefully, in your case it would be a matter of adding the @pjs preload comment:

/* @pjs preload="gradient.jpg,BRICKSxMORTAR_logo_transparentX.png"; */

PImage gradient;
PImage logo;

void setup() {
  size(792, 150);
  background(0);
  gradient = loadImage("gradient.jpg");
  logo = loadImage("BRICKSxMORTAR_logo_transparentX.png");
}

void draw() {
  for (int i = 0; i < 10; i++) {
    float x = random(width);
    image(gradient, 300, 11);
    ellipse(x, 200, x, 300);
    image(logo, 9, 11);
  }
}

I haven't tested this, but hopefully it works. The source code indicates it should handle multiple images.

As a side note, in the future please post code snippets as formatted text. For HTML/CSS in some cases you can uses stackoverflow's code JS/HTML/CSS snippet feature or if it's simpler/more flexible use one of the many online services such as jsfiddle, codepen, glitch. Sketchpad.cc might also work. Images will take longer to load (and may even cost more money on a mobile device with a data plan) while text is lighter and easier to run/test. Overall it will make it much easier for others to support you.