adding p5.js

[Lea_Naisberg]

Hi! I’m trying to add p5.js to my code but can’t seem to figure it out. Nothing ends up showing up on the page. Wondering if anyone can help!

I’m adding this to the section:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

and this code from the p5.js get started page to “before ”:

<script>

function setup() {createCanvas(400, 400);}function draw() {background(220);ellipse(50,50,80,80);}

</script>

[HEADLESS.HORSE]

Hi @Lea_Naisberg, looks like the code is all good and works in my editor. I presume it’s because this will likely show up in the body of the project so it’s technically set to the back of the z-index. I suggest adding the following code to a code embed element and turning on iframe to have it show.

[Lea_Naisberg]

hi @HEADLESS.HORSE ! hm, i don’t seem to see the code you mention. I updated my widget code to this and selected iframe:

* {z-index:100000;}

still doesn’t work for me

[Lea_Naisberg]

here’s a pic. for some reason i think some text isn’t showing up on the forum

[HEADLESS.HORSE]

Hi @Lea_Naisberg I have just copied your code into a code element and it works for me, I suggest making a new project and trying it on a blank project and seeing if that works?

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>

and this code from the p5.js get started page to "before ":

<script>

function setup() {createCanvas(400, 400);}function draw() {background(220);ellipse(50,50,80,80);}

</script>

[Ivan_Bezerra]

Hi, I have a similar doubt… I am using an iframe with an interactive script to make the background of my website. But when I try to resize the window the iframe remains with a gap and doesn’t resize as expected.

Here is my code

let numLines; // Number of lines
let lineLength = 10; // Length of each line
let angleOffsets = ; // Array to store individual angle offsets
let spacing; // Spacing between lines

function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES);

// Initialize number of lines based on canvas size
numLines = floor(min(width, height) / 20); // Adjust the divisor for desired spacing

// Initialize spacing between lines
spacing = width / numLines;

// Initialize angle offsets for each line
for (let i = 0; i < numLines; i++) {
angleOffsets.push(0);
}
}

function draw() {
background(0);

// Draw lines in a grid
for (let i = 0; i < numLines; i++) {
for (let j = 0; j < numLines; j++) {
let x = i * spacing;
let y = j * spacing;

  // Calculate angle based on mouse position
  let angle = atan2(mouseY - y, mouseX - x);

  // Draw line
  push();
  translate(x, y);
  rotate(angle + angleOffsets[i]);
  stroke(255);
  line(-lineLength / 2, 0, lineLength / 2, 0);
  pop();
}

}

// Update individual angle offsets based on mouse distance
for (let i = 0; i < numLines; i++) {
let mouseDist = dist(mouseX, mouseY, i * spacing, height / 2);
angleOffsets[i] = map(mouseDist, 0, width / 2, -90, 90);
}

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

}