Cubes tess _f

let col1, col2;

let cool1 = "https://coolors.co/c2efb3-97abb1-746f72-735f3d-594a26".split("/").pop().split("-").map((a) => "#" + a);

let cool11 = "https://coolors.co/f1fbee-c5d0d3-a5a1a4-b2986c-9d8243".split("/").pop().split("-").map((a) => "#" + a);

let cool2 = "https://coolors.co/e2dadb-dae2df-a2a7a5-6d696a-ffffff".split("/").pop().split("-").map((a) => "#" + a);

let cool21 = "https://coolors.co/f6f4f4-f4f6f5-cacecc-9b9798-c2c2c2".split("/").pop().split("-").map((a) => "#" + a);

let cool3 = "https://coolors.co/a63446-fbfef9-0c6291-000004-7e1946".split("/").pop().split("-").map((a) => "#" + a);

let cool31 = "https://coolors.co/ce6474-d0f3b9-129ae2-000066-cc2872".split("/").pop().split("-").map((a) => "#" + a);

​

let gS = 5; 

let pD = 2;

let ar = 1;

​

let x, y, xp, yp, xx, yy;

let drawBGCubes = true;

let sizeMod = 12;

let _size = 10;

let traceCubeLines = false;

let roundIt = false;

let squareIt = true;

let noStroke = false;

let nosh = true;

let nosColor = true;

let showCoord = false;

let fillIt = true;

​

let tesseracts = [];

let cascadeBand;

let customLayout;

​

function setup() {

  background(20, 10);

  seed = int(Math.random() * 9999999);

  randomSeed(seed);

  noiseSeed(seed);

​

  let ih = 1000;

  let iw = 1000;

​

  if (iw / ih < ar) {

    createCanvas(iw, iw / ar);

    wisW = iw;

    wisH = iw / ar;

  } else {

    createCanvas(ih * ar, ih);

    wisW = ih * ar;

    wisH = ih;

  }

  let rwis = wisW / sizeMod;

  m = min(iw, ih) / 1000;

​

  angleMode(DEGREES);

  p5grain.setup();

  pixelDensity(pD);

​

  col1 = random([cool1, cool2, cool3]);

  col2 = random([cool11, cool21, cool31]);

​

  background(30);

  applyMonochromaticGrain(gS);

​

  customLayout = generateRandomLayout();

​

  for (let i = 0; i < customLayout.length; i++) {

    let { x, y } = customLayout[i];

    let cubeColor = color(random(col1));

    cubeColor.setAlpha(30);

    let tesseract = new Tesseract(x, y, _size, cubeColor, sizeMod);

    tesseracts.push(tesseract);

  }

  cascadeBand = new CascadeBand(tesseracts);

}

​

function draw() {

  frontDraw = 0;

  background(30, 10);

  randomSeed(seed);

  for (let tesseract of tesseracts) {

    tesseract.draw();

  }

​

  cascadeBand.moveNext();

  cascadeBand.draw();

​

  if (frontDraw = 0) {

    drawTessClass();

    frontDraw = 1;

  }

}

​

function generateRandomLayout() {

  let layout = [];

  let numRows = random(2, 6); // Nombre aléatoire de lignes entre 2 et 4

  let numCols = random(2, 6); // Nombre aléatoire de colonnes entre 2 et 4

  let tesseractSize = _size * sizeMod; // Taille fixe des tesseracts

​

  let colSpacing = width / (numCols + 1);

  let rowSpacing = height / (numRows + 1);

​

  let xOffset = colSpacing / 2;

  let yOffset = rowSpacing / 2;

​

  // Générer les positions initiales des cubes

  for (let row = 0; row < numRows; row++) {

    for (let col = 0; col < numCols; col++) {

      let x = col * colSpacing + random(-xOffset, xOffset);

      let y = row * rowSpacing + random(-yOffset, yOffset);

      layout.push({ x, y, connected: false });

    }

  }

​

  // Vérifier les connexions entre les cubes et former des hypercubes

  for (let i = 0; i < layout.length; i++) {

    let cube = layout[i];

    if (!cube.connected) {

      let connectedCubes = [cube];

      for (let j = i + 1; j < layout.length; j++) {

        let otherCube = layout[j];

        if (!otherCube.connected && areCubesConnected(cube, otherCube)) {

          connectedCubes.push(otherCube);

          otherCube.connected = true;

          if (connectedCubes.length === 4) {

            break;

          }

        }

      }

      if (connectedCubes.length === 4) {

        // Aligner les cubes pour former un hypercube

        alignCubesToHypercube(connectedCubes, tesseractSize);

      }

    }

  }

​

  return layout;

}

​

function areCubesConnected(cube1, cube2) {

  let distanceThreshold = 1.5;

  let distance = dist(cube1.x, cube1.y, cube2.x, cube2.y);

  return distance <= distanceThreshold;

}

​

function alignCubesToHypercube(cubes, tesseractSize) {

  let centerX = (cubes[0].x + cubes[1].x + cubes[2].x + cubes[3].x) / 4;

  let centerY = (cubes[0].y + cubes[1].y + cubes[2].y + cubes[3].y) / 4;

​

  for (let i = 0; i < cubes.length; i++) {

    let cube = cubes[i];

    let angle = i * (360 / cubes.length);

    let x = centerX + cos(angle) * tesseractSize;

    let y = centerY + sin(angle) * tesseractSize;

    cube.x = x;

    cube.y = y;

  }

}

​

function drawTessClass() {

  let _size = 8;

  let rwis = wisW / sizeMod;

  let offsetY = _size / 2 * sizeMod;

  for (let i = 0; i < rwis; i++) {

    for (let j = 0; j < rwis; j++) {

      let x = i * _size * sizeMod/2;

      let y = j * _size * sizeMod/2;

      if (i % 2 === 0) {

        y += offsetY;

      }

      let cubeColor = color(random(col1));

      cubeColor.setAlpha(10);

      let tesseract = new Tesseract(x, y, _size, cubeColor, sizeMod);

      tesseract.draw();

      tesseract.animeRotate();

    }

  }

}

​

class CascadeBand {

  constructor(tesseracts) {

    this.tesseracts = tesseracts;

    this.currentIndex = 0; // Index du cube actuel

    this.progress = 0; // Progression du mouvement du bandeau

    this.tracePoints = []; // Points de trace du passage du bandeau

    this.currentPos = createVector(width / 2, 0); // Position actuelle de la cascade

    this.targetPos = createVector(0, 0); // Position cible de la cascade

    this.isFalling = false; // Indique si la cascade est en train de tomber sur un cube

  }

​

  moveNext() {

    let currentCube = this.tesseracts[this.currentIndex];

​

    if (!this.isFalling) {

      // La cascade se déplace vers le cube actuel

      this.targetPos = createVector(currentCube.outerCube.x, currentCube.outerCube.y);

      let distance = p5.Vector.dist(this.currentPos, this.targetPos);

​

      if (distance > 1) {

        // Calculer la direction et la vitesse du mouvement

        let direction = p5.Vector.sub(this.targetPos, this.currentPos).normalize();

        let speed = 0.01 * distance; // Vitesse de déplacement (ajustable)

​

        // Déplacer la cascade vers la position cible

        this.currentPos.add(direction.mult(speed));

      } else {

        // La cascade est arrivée sur le cube

        this.isFalling = true;

      }

    } else {

      // La cascade tombe sur le cube actuel

      let cubeTop = currentCube.outerCube.y - currentCube.outerCube._size / 2;

      let cubeBottom = currentCube.outerCube.y + currentCube.outerCube._size / 2;

​

      if (this.currentPos.y < cubeBottom) {

        // La cascade coule le long de la face du cube

        this.currentPos.y += 1; // Vitesse de descente (ajustable)

      } else {

        // La cascade a atteint le bord inférieur du cube

        this.currentPos.y = cubeBottom;

​

        // Passer au prochain cube

        this.currentIndex = (this.currentIndex + 1) % this.tesseracts.length;

        currentCube = this.tesseracts[this.currentIndex];

        this.isFalling = false;

      }

    }

​

    // Ajouter la position actuelle à la trace du passage de la cascade

    this.tracePoints.push(this.currentPos.copy());

  }

​

  draw() {

    push();

//    noStroke();

    beginShape();

    for (let i = 0; i < this.tracePoints.length; i++) {

      fill(255, 0, 0);

      vertex(this.tracePoints[i].x, this.tracePoints[i].y);

    }

    endShape();

    pop();

  }

}

​

​

class Tesseract {

  constructor(x, y, _size, fillCol, sizeMod) {

    this.outerCube = new Cube(x, y, _size, fillCol, sizeMod);

    this.innerCube = new Cube(x + _size / random(0, 2.5) * sizeMod, y + _size / random(0, 2.5) * sizeMod, _size / random(0, 2.5), fillCol, sizeMod);

    this.fillCol = fillCol;

    this.frame = 0;

  }

​

  draw() {

    this.outerCube.draw();

    this.innerCube.draw();

​

    let outerVertices = this.outerCube.getVertices();

    let innerVertices = this.innerCube.getVertices();

​

    stroke(this.fillCol);

    for(let i = 0; i < outerVertices.length; i++) {

      let [x1, y1] = outerVertices[i];

      let [x2, y2] = innerVertices[i];

      line(x1, y1, x2, y2);

    }

  }

  animeRotate() {

    this.frame++;

    let dx = Math.cos(this.frame / 20) * 10;

    let dy = Math.sin(this.frame / 20) * 10;

    this.innerCube.x += dx;

    this.innerCube.y += dy;

  }

}

​

​

function drawClassCubes() {

  let _size = 8;

  let rwis = wisW / sizeMod;

  let offsetY = _size / 2 * sizeMod;

  for (let i = 0; i < rwis; i++) {

    for (let j = 0; j < rwis; j++) {

      let x = i * _size * sizeMod;

      let y = j * _size * sizeMod;

      if (i % 2 === 0) {

        y += offsetY;

      }

      let cubeColor = color(random(col1));

      cubeColor.setAlpha(100);

      let cube = new Cube(x, y, _size, cubeColor, sizeMod);

      cube.draw();

      let vertices = cube.getVertices();

      console.log(cube.getVertices());

    }

  }

}

​

​

class Cube {

  constructor(x, y, _size, fillCol, sizeMod) {

    this.x = x;

    this.y = y;

    this._size = _size * sizeMod;

    this.fillCol = fillCol;

    this.sizeMod = sizeMod;

  }

​

  draw() {

    push();

    translate(this.x, this.y);

    //rotate(frameCount * 0.1);

    //let pseudoRotation = sin(frameCount * 0.01); // Simuler une rotation sur l'axe Y en utilisant la fonction sin

    //scale(1, pseudoRotation);

    if (noStroke == true) {

      noStroke();

    } else if (nosColor == true) {

      stroke(random(col2));

    }

    if (fillIt == true) {

      fill(this.fillCol);

    }

    if (squareIt == true) {

      quad(0, 0, this._size / 2, this._size / 4, 0, this._size / 2, -this._size / 2, this._size / 4);

    }

    if (roundIt == true) {

      beginShape();

      vertex(0, 0);

      quadraticVertex(0, 0, this._size / 2, this._size / 4);

      quadraticVertex(0, this._size / 2, -this._size / 2, this._size / 4);

      quadraticVertex(this._size / 4, 0, 0, this._size / 2);

      endShape();

    }

    if (showCoord == true) {

      push();

      translate(this._size / 4, 0);

      if (fillIt == true) {

        fill(this.fillCol);

      }

      textSize(8);

      let showPosX = "x:" + round((this.x + Number.EPSILON) * 1000) / 1000;

      let showPosY = "y:" + round((this.y + Number.EPSILON) * 1000) / 1000;

      text(showPosX, -this._size / 2, this._size / 4);

      text(showPosY, -this._size / 2, this._size / 3);

      pop();

    }

    if (fillIt == true) {

      fill(this.fillCol);

    }

    for (let ll = 0; ll < this._size; ll += this._size / 3) {

      push();

      if (nosh == true) {

        strokeWeight(0.35 * m);

        stroke(random(col1));

      }

      drawingContext.setLineDash([5, 15, 25, 2, 12, 100]);

      line(-this._size / 2, (this._size / 4) + ll / 2, 0, (this._size / 2) + ll / 2);

      pop();

    }

    beginShape();

    if (squareIt == true) {

      vertex(-this._size / 2, this._size / 4);

      vertex(0, this._size / 2);

      vertex(0, this._size);

      vertex(-this._size / 2, this._size / 4 * 3);

    }

    if (roundIt == true) {

      curveVertex(-this._size / 2, this._size / 4);

      curveVertex(0, this._size / 2);

      curveVertex(0, this._size);

      curveVertex(-this._size / 2, this._size / 4 * 3);

    }

    endShape(CLOSE);

    for (let l = 0; l < this._size; l += this._size / 5) {

      push();

      if (nosh == true) {

        strokeWeight(0.45 * m);

        stroke(random(col1));

      }

      drawingContext.setLineDash([3, 5, 15]);

      line(0, (this._size / 2) + l / 2, this._size / 2, (this._size / 4) + l / 2);

      pop();

    }

    beginShape();

    if (squareIt == true) {

      vertex(this._size / 2, this._size / 4);

      vertex(0, this._size / 2);

      vertex(0, this._size);

      vertex(this._size / 2, this._size / 4 * 3);

    }

    if (roundIt == true) {

      curveVertex(this._size / 2, this._size / 4);

      curveVertex(0, this._size / 2);

      curveVertex(0, this._size);

      curveVertex(this._size / 2, this._size / 4 * 3);

    }

    endShape(CLOSE);

    if (traceCubeLines == true) {

      if (xp !== null && yp !== null) {

        push();

        strokeWeight(random(0.015, 0.075) * m);

        drawingContext.setLineDash([0, 3, 0, 2, 1]);

        if (random() < 0.4) {

          line(0, 0, xp - this.x, yp - this.y);

          line(this._size / 2, this._size / 4, xp - this.x + this._size / 2, yp - this.y + this._size / 4);

        }

        drawingContext.setLineDash([1, 0, 3, 1, 2]);

        random() < 0.1 ? line(0, xp - this.x, 0, yp - this.y) : null;

        pop();

      }

    }

    xp = this.x;

    yp = this.y;

    pop();

  }

​

  getVertices() {

    return [

      [this.x, this.y],

      [this.x + this._size / 2, this.y + this._size / 4],

      [this.x, this.y + this._size / 2],

      [this.x - this._size / 2, this.y + this._size / 4],

      [this.x - this._size / 2, this.y + this._size * 3/4],

      [this.x, this.y + this._size],

      [this.x + this._size / 2, this.y + this._size * 3/4],

      [this.x, this.y + this._size / 2],

    ];

  }

}

​

  function keyPressed() {

    if (keyCode === 83) {

      saveCanvas('cubes_tess_f' + floor(random(100)), 'png');

    }

  }