Hi, I have a doubt and maybe someone can help me… 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);
}
}