I am trying to create my first website using the p5.js library, with the end goal being an online digital portfolio. I am currently working on a splash screen, in which I have some large title text filling the center of the screen on a simple black background, which actively resizes to fill the window.

I would like to place a simple doodle in the background to add some interest. My challenge is that I would not like this doodle to draw on top of my text, but instead place it underneath my text. Initially I was thinking of infinitely redrawing the text so it stays at the top, however I have deduced there is no way to do this while still animating something beneath it.

My knowledge of HTML / CSS is minimal, however I was thinking of making the background of the title sketch transparent, a separate sketch with the doodle, and use the z index property in CSS to place the doodle beneath the title, is this even possible?

Thanks!

Further edits based on remendations:

function preload() {
  myFont = loadFont('assets/HighTide.otf');
}

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);
  title = text("Wele", width/2, height/2);
  background(30);
  fsize = window.innerHeight/4;
  pg = createGraphics(window.innerWidth, window.innerHeight);
}

function draw() {
  background(30);

  pg.fill(random(0,255), random(0,255), random(0,255));
  //pg.translate(width/2, height/2);
  pg.ellipse(random(window.innerWidth), random(window.innerHeight), 60, 60)

  image(pg, 0, 0);

  textFont(myFont);
  textSize(fsize);
  textAlign(CENTER);
  fill(255);
  text("Wele", width/2, height/2);
  }

window.onresize = function() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  canvas.size(w,h);
  fsize = window.innerHeight/4;
  title.textSize(fsize);
  width = w;
  height = h;
}

I am trying to create my first website using the p5.js library, with the end goal being an online digital portfolio. I am currently working on a splash screen, in which I have some large title text filling the center of the screen on a simple black background, which actively resizes to fill the window.

I would like to place a simple doodle in the background to add some interest. My challenge is that I would not like this doodle to draw on top of my text, but instead place it underneath my text. Initially I was thinking of infinitely redrawing the text so it stays at the top, however I have deduced there is no way to do this while still animating something beneath it.

My knowledge of HTML / CSS is minimal, however I was thinking of making the background of the title sketch transparent, a separate sketch with the doodle, and use the z index property in CSS to place the doodle beneath the title, is this even possible?

Thanks!

Further edits based on remendations:

function preload() {
  myFont = loadFont('assets/HighTide.otf');
}

function setup() {
  canvas = createCanvas(window.innerWidth, window.innerHeight);
  title = text("Wele", width/2, height/2);
  background(30);
  fsize = window.innerHeight/4;
  pg = createGraphics(window.innerWidth, window.innerHeight);
}

function draw() {
  background(30);

  pg.fill(random(0,255), random(0,255), random(0,255));
  //pg.translate(width/2, height/2);
  pg.ellipse(random(window.innerWidth), random(window.innerHeight), 60, 60)

  image(pg, 0, 0);

  textFont(myFont);
  textSize(fsize);
  textAlign(CENTER);
  fill(255);
  text("Wele", width/2, height/2);
  }

window.onresize = function() {
  var w = window.innerWidth;
  var h = window.innerHeight;
  canvas.size(w,h);
  fsize = window.innerHeight/4;
  title.textSize(fsize);
  width = w;
  height = h;
}

• javascript
• css
• p5.js

Share Improve this question Follow edited Jan 3, 2017 at 3:49 Arkadelic asked Jan 2, 2017 at 23:06 ArkadelicArkadelic 10522 silver badges1111 bronze badges 1

• HTML/CSS has a position property that I think is what you want. In conjunction with z-index you mention, you can position elements on top of one another and get the effect you are looking for. css-tricks./absolute-positioning-inside-relative-positioning – willoller Commented Jan 2, 2017 at 23:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

It depends on exactly how you're drawing everything, but if you're doing this all in P5.js then you've already described exactly what you need to do.

Step 1: Each frame, clear out old frames by calling the background() function.

Step 2: Then draw your doodle.

Step 3: Finally, draw your text. Since you're drawing the text after the doodle, it shows up "on top" of the doodle.

This is how most P5.js sketches work: every frame, you clear out the old frames and then draw the next frame.

Edit: If you need a sketch that doesn't clear out old frames but still shows two different layers (your doodle and your text), then what you could do is draw your doodle to a buffer, then draw that buffer each frame, then draw the text on top of the buffer. Check out the createGraphics() function in the reference.