Fixed backgroud in webpage

p5.js Coding Questions
1

Hi friends!

I’m trying to add a p5js script as a background on a wordpress page. I did it but the problem I have is when I scroll the page the p5 is moving too and I want to get it fix.

I tried by a CSS way using

background-attachment: fixed

I tried various things like adding into my p5 script into setup()

canvas.style('background-attachment','fixed');

It doesn’t work.

The HTML Code

<!DOCTYPE html>
<html lang="">

<head>
<p style="color:red;">This is a paragraph.</p>
  <meta charset="utf-8">
  <title>p5js Background</title>
  <link rel="stylesheet" href="style.css">
  <script src="p5.js"></script>
  <script src="01.js"></script>
</head>

<body>
TEXT TEXT ......
</body>

</html>

The 01.js Processing sketch

// By Roni Kaufman
// inspired by https://twitter.com/beesandbombs/status/1290072545069334530?s=09

let t = 0;
let step = 1.5;

let dotSize = 24;
let dots;

let margin = 0;

var canvas;

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function setup() {
  canvas = createCanvas(windowWidth, windowHeight);
  canvas.position(0,0);
  canvas.style('z-index','-1');
  colorMode(HSB, 100);
  angleMode(DEGREES);
  
  initDots();
}

function draw() {
  background(60, 75, 15);
  
  for (let dot of dots) {
    dot.draw();
  }
  
  t += step;
}

function initDots() {
  dots = [];
    
  let countLines = 0;
  let xSep = dotSize * 2;
  let ySep = xSep * sqrt(3)/2;
  let x = 0;
  let y = -ySep / 4;
  while (y < height + dotSize) {
    if (countLines % 2 === 0) {
      x = xSep / 4;
    } else {
      x = -xSep / 4;
    }
    while (x < width + dotSize) {
      dots.push(new Dot(x, y));
      x += xSep;
    }
    countLines++;
    y += ySep;
  }
  
}

function Dot(x_, y_) {
  this.x = x_;
  this.y = y_;
	
	let alpha = 0.2;
	this.dist = dist(this.x, this.y, width/2, height/2)*alpha;
  
  this.draw = function() {
		let v = (cos(this.dist - t) + 1)/2;
    let hue = (100*(1-v)/3 + 80)%100;
    stroke(hue, 100, 100);
		strokeWeight((1-v)*2 + 2);
		fill(hue, 100, 100, 50*v + 10);
		let size = map(v, 1, 0, dotSize*2 - margin, dotSize*4 - margin);
    circle(this.x, this.y, size);
  }
}

Regards :slight_smile: :slight_smile:

2

There can be many solutions depending on what should happen in your HTML or JS, but here is a simple way:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            overflow-y: scroll;
        }

        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>Title</h1>
        <p>regular html stuff, text, images...</p>
        <p>place some very looooong text to test the scrolling behavior</p>
    </div>

    <script>
        function setup() {
            createCanvas(windowWidth, windowHeight)
            background(220)
        }

        function draw() {
            fill(255, 0, 0)
            ellipse(width / 2 + random(-50, 50), height / 2 + random(-50, 50), 100, 100)
        }

        function windowResized() {
            resizeCanvas(windowWidth, windowHeight)
            background(220)
        }
    </script>
</body>

</html>

The key is to place all the html elements within the container div so it can scroll within itself. All the elements’ heights are inherited from html/body 100% - down to the container and the canvas.

3

It works!

Thanks a lot! :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: