Search code examples
javascripthtml5-canvasp5.js

Background image in p5.js 3D sketch

I have a p5.js 3D sketch. I have to set its background image. I know that we can easily implement it with same background() function in a 2D sketch, but it is not possible in a 3D sketch.

I googled for some hacks and found that I can have a plane with the dimensions of the canvas at the back and then use texture() to set its background image like the below example.

var img;
function preload() {
  img = loadImage("img.png");
}

function setup() { 
  createCanvas(600, 600, WEBGL);
} 

function draw() { 
  background(220);
  
  push();
  texture(img);
  plane(600, 600);
  pop();
}

But the issue is - I have to use orbitControl() in my sketch. Due to this, the background (plane) also moves when I drag around. I want my background to be static (it should not move when I move other objects).

Finally, I resorted to css background-image property to set the background image of the canvas and remove background(255) in the draw() function. But due to this, the background (previous frames) were not overlapped when I dragged objects and were also visible.

How can I implement background image in this case?

My sketch is available at https://editor.p5js.org/praneetdixit1234/sketches/9pN4lA8KB

Solution

  • I think your CSS approach is good, just not sure why use cover on the size ...
    Your image is 1365px wide but your canvas is only 600px, with cover most of it will be hidden, and the text will not be fully seen, but in the future if you change the image using cover might be fine.

    Here is what I used

    canvas {
  display: block;
  background-image: url("https://static.vecteezy.com/system/resources/previews/000/118/983/original/free-vector-cityscape.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

    ...and don't remove background, set the alpha background(0,0,0,0);
    Here is the working sample:
    https://editor.p5js.org/heldersepu/sketches/ll8txfcs0

    I also added smooth() on my sample:

    The difference is noticeable, read more about it here:
    https://p5js.org/reference/#/p5/smooth