Working with html/css and p5.js

p5.js Libraries
1

Hey all, So I’ve built my first app with p5.js, yippeee! It’s a simple music visualizer that I plan on building more on later. For now though, I would love to have instructions on my site that tell the user what to do.

My idea was to have something on the page that says “click to play and pause/move your mouse around for the filter effect.” After the message displayed, I wanted to hide it. So I was going to have it be visible with css, then once the user does what it says, hide. First off, I wanted to ask, is this possible to use vanilla javascript and p5.js together on one sheet to do this? Or should I make a separate .js page to do this.

anyway, aside from getting the logic to work, the BIG reason why I am here, is because I put an h2 at the top to test this, and it sits above my sketch. Is there a way to get the body of my html to blend with my p5.js sketch? code is below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\app.css">
    <title>Interactive sound</title>
</head>
<body> 
    <h2>click/move your mouse</h2>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h2 {
    text-align: center;
    background: rgb(126,164,179);
}

var volHistory = Array(360).fill(0);
var filter;
var filterRes;
var reverb;
var darkColor;
var lightColor;

function setup() {
    createCanvas(windowWidth, windowHeight);
    angleMode(DEGREES);
    mySound = loadSound('https://www.dl.dropboxusercontent.com/s/q33gc7cxmh3qieb/Changing%20it%20master.mp3?dl=0', loaded);
    mySound.setVolume(0.5);
    amp = new p5.Amplitude();
    reverb = new p5.Reverb();
    filter = new p5.LowPass();
    mySound.connect(reverb);
    mySound.connect(filter);
    darkColor = color(126,164,179);
    lightColor = color(206,221,226);
}

function mouseClicked() {
if (!mySound.isPlaying()) {
    mySound.play();
} else {
    mySound.pause();
}
}

function mouseMoved() {
    ellipse(mouseX, mouseY, 5, 5);
    // prevent default
    return false;
}

function isMouseOverCanvas() {
    var mX = mouseX, mY = mouseY;
    if (mX > 0 && mX < windowWidth && mY < windowHeight && mY > 0) {
      mySound.amp(1, 1.5);
    } else {
      mySound.amp(0.5, 1);
    }
  }
 
function mousePressed() {
    getAudioContext().resume()
}

function loaded() {
    console.log('song is loaded');
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight)
}
    
function draw() {
    var t = map(mouseX, 0, width, 0, 1.0);
    var c = lerpColor(darkColor, lightColor, t);
    background(c);
    var vol = amp.getLevel();
    volHistory.push(vol);
    stroke(255);
    noFill();
    translate(width / 2, height / 2);
    beginShape();
    for (var i = 0; i < 360; i++) {
        var r = map(volHistory[i], 0, 1, 175, 100);
        var x = r * cos(i);
        var y = r * sin(i);
        // var y = map(volHistory[i], 0, 1, height/2, 0);
        vertex(x, y);
    }
        endShape();

    if (volHistory.length > 360) {
        volHistory.splice(0, 1);
    }
    // ellipse(100, 100, 200, vol * 200);
     // set the BandPass frequency based on mouseX
    var freq = map(mouseX, 0, windowWidth, 20, 10000);
    filterRes = map(mouseY, 0, windowHeight, 15, 5);
    filter.set(freq, filterRes);
    // filter.freq(freq);
    // // give the filter a narrow band (lower res = wider bandpass)
    // filter.res(1);
    isMouseOverCanvas();
}
2

i not understand any of your working environment related questions,
but if you insist NOT to use processing to show some text
still can use the ( already loaded ) p5.dom.js for it
example:

var div;

function setup() {
  createCanvas(400, 400);
  div = createDiv('').size(200, 50);
  div.html('click/move your mouse');
  div.position(20,20);    // brings it inside the canvas, disable to show it below
}

function draw() {
  background(200,200,0);
  timer();
}

function timer() {
  if ( frameCount > 300 ) div.html('');     // 5 sec ?
}

as that is permanently active you can use it later for more info to user

1 Like
3

oh my goodness thank you so much! So I tweak the frameCount to change the time? Sorry I’m very new to JS and p5.js

I’m so used to tweaking my CSS through the DOM/vanilla JS. Not used to doing pretty much everything inside JS.

I’m guessing you can style the words through p5.js as well? Like color etc?

4

@Indieminor frameCount is a special keyword that returns the number of frames drawn by the draw function, it can be used to create a timer, especially if you set a framerate.

for example if you say

var seconds;

function setup() {
// do setuppy things here
seconds = 0;
frameRate(30);

then you can do

function draw() {
// do all kinds of stuff
seconds = frameCount / 30. ;

to get how many seconds have passed since you started the sketch.
( or loaded he page i just made the distinction in case of a noLoop() loop() scenario. )

1 Like
5

Some p5js online sketches w/ DOM styled text: :spiral_notepad: