Trouble with z-index and body

p5.js Coding Questions
1

Hey all, I am fairly new to programming (3.5 months in) and I came across p5.js and decided to implement it into a little project of mine.

My main idea is to have random circles generate on keypress or click with random colors and sizes. I decided to test to see if p5.js was working on my site, which it is…but…for some reason, my little drawing stays behind the body element of my site. It shows top and bottom, but not on the meat of my site. Right now it’s just a simple click event to draw a line with the mouse.

could anyone help please? I’ll put all of my code below

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

<head>
  <link rel="stylesheet" type="text/css" href="Resources\css\style.css">
  <title>Pressn.Listen</title>
</head>
<body>
  <h1>Pressn.Listen</h1>

    <section>
    <ul id="image-list" style="list-style-type: none">
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/v4mfc9ql89q60hn/DSCF8693.jpg?dl=0" alt="pink-flowers"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/ywri0sg4i16nbc2/DSCF7307.jpg?dl=0" alt="overpass-sky"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/xpslama3reuniwz/DSCF6953.jpg?dl=0" alt="home-doorway"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/73xltoeeoyq78y7/20181029-DSCF6165.jpg?dl=0" alt="garage"></input></li>
    </ul>
    </section>
    <footer>
      <nav>
        <ul id="nav-bar" style="list-style-type: none">
          <li>
            <a class="links" target="_blank" href="https://mobile.twitter.com/eddiepearson">Twitter</a>
          </li>
             <li>
            <a class="links" target="_blank" href="https://github.com/eddiepearson">Github</a>
          </li>
        </ul>
      </nav>
     </footer>

     <audio id="song1" src="Resources\sounds\loopy loop 1.mp3"></audio>
     <audio id="song2" src="Resources\sounds\Automation city master.mp3"></audio>
</body>
<script type="text/javascript" src="Resources\js\app.js"></script>
<script src="Resources\js\p5.js"></script>
<script language="javascript" type="text/javascript" src="Resources\js\p5.dom.js"></script>
</html>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace;
}

body, html {
  background-color: #f2f2f2;
}

header {
  text-align: right;
  margin: 3rem;
}

h1 {
  margin: 5rem 0 5rem 7rem;
  background: linear-gradient(90deg, rgba(0,25,36,1) 0%, rgb(118, 181, 211) 0%, rgba(255,206,249,1) 36%);
  -webkit-background-clip: text;
   background-clip: text;
  -webkit-text-fill-color: transparent;
}

#image-list {
  margin: 8rem auto 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  max-width: 1000px;
}

.images {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: none;
}

.ease {
  transition: transform 2.5s ease-out;
  transform: translateY(4px);
  transform: scale(2);
}

input:hover {
    -webkit-filter: brightness(70%);
    filter: brightness(70%);
    transition: 0 3s ease;
}

#nav-bar {
  display: flex;
  justify-content: center;
  margin: 5rem;
}

#nav-bar li {
  margin: 2rem;
}

.links {
  text-decoration: none;
  padding: 1rem;
  color: black;
  box-shadow: 5px 5px 0 0 rgba(19, 19, 19, 0.15);
  border-radius: 10px;
  transition: 0s;
}

.links:hover {
	color: white;
	background: linear-gradient(90deg, rgba(0,25,36,1) 0%, rgba(54,123,156,1) 0%, rgba(198,153,192,1) 70%);
  transition:.5s;
}


.links:after {
  transform: translateY(4px);
}

@media screen and (max-width: 600px) {
  #image-list {
    margin: 3rem;
  }
  
  h1 {
    margin: 5rem 3rem 10rem 3rem;
  }
}

@media screen and (max-width: 1000px) {
  #image-list {
    margin: 3rem;
  }
}

//select images
let animation = document.querySelector('.ease');
let img1 = document.querySelector('li:nth-child(1)');
let img2 = document.querySelector('li:nth-child(2)');
let song1 = document.querySelector('#song1');
let song2 = document.querySelector('#song2');

//play pause and also animation function
img1.addEventListener('click', function() {
    if(song1.paused) {
        song1.play();
        this.classList.toggle('ease');
    } else {
        song1.pause();
        this.classList.toggle('ease');
    }
});

img2.addEventListener('click', function() {
    if(song2.paused) {
        song2.play();
        this.classList.toggle('ease');
    } else {
        song2.pause();
        this.classList.toggle('ease');
    }
});


//p5.js
let canvas;

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

function setup() {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.position(0, 0);
    canvas.style('z-index', '-1');
    background(242, 242, 242);
  }

  function keyPressed() {
      clear();
  }

  function draw() {
    if (mouseIsPressed) {
        line(pmouseX, pmouseY, mouseX, mouseY);
    }
  }
1 Like
2

I believe you z-index should be positive. Check this

Kf

3

when I make it positive, the p5.js sketch takes over the site and you can’t see my site. Unless the user presses spacebar, which is kind of annoying. I’ve seen someones site that has a similar idea https://www.alispit.tel/

which you click, random shapes show up behind her content. On my site, it’s like the sketch won’t register behind my content as if it’s blocking it. It only shows outside of my body element, on the very top and bottom.

4

figured it out. I had to make the z-index of my body element 2 and the z-index of the sketch, -1.

2 Likes
5

Perfect. Thxs for sharing your solution.

Kf

6

no problem. Thank you for trying to help.