CROCHÊ DIGITAL4

/**

 * Crochê Digital 2_0.

 * por Marília Bergamo & André Luiz Silva.

 * Este código é baseado em um automato celular.

 * Versão utilizada como ferramenta na disciplina "tópicos em moda - renda de crochê" Design de Moda - UFMG, 2023.

 * Versão P5js.

 */

​

let e_radius;

let e_steps;

let e_gauge;

let e_counter;

let b_radius;

let circles;

let neighborhoods;

let changeNeighborhoodsButton; // Variável para o botão

let firstCirclePoints = 30; // para definir quantidade de pontos iniciais 30=12 pontos, 60=6 pontos

let circleArr = [];

let img1, img2;

let cross1Visible = false; // Variável para controlar a visibilidade da primeira cruz

let cross2Visible = false; // Variável para controlar a visibilidade da segunda cruz

let circleCounts = [];

let pointOrderList = []; // Lista para armazenar a ordem dos pontos por círculo

​

function preload() {

  img1 = loadImage("pontobaixo.png");

  img2 = loadImage("pontoalto.png");

  img3 = loadImage("conteudo.png");

  img4 = loadImage("logo.png")

  img5 = loadImage("receita.png")

  img6 = loadImage("legenda1.png")

  }

​

function keyPressed() {

  if (key === 's' || key === 'S') {

    saveCanvas('doilie', 'png');

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

   // Configuração da interface

  setupUI();

  // DEFINIR VALORES

  circles = 6; // QUANTIDADE DE CARREIRAS

  e_steps =19; // NÃO MUDAR

  e_radius = 48; // RAIO DO CÍRCULO INICIAL DE CORRENTINHAS

  e_gauge = 52; // DISTÂNCIAS ENTRE CARREIRAS

  e_counter = 0; // NÃO MUDAR

  frameRate(0.3); // VELOCIDADE EM QUE OS GRÁFICOS APARECEM

  drawCircles();

  // Crie um botão para ativar apenas a primeira cruz

  let rectw = windowWidth / 9;

  let recth = windowHeight-40;

   // Crie um botão para trocar o número de vizinhanças

  let changeNeighborhoodsButton = createButton('Nº de vizinhanças');

  changeNeighborhoodsButton.position(rectw/2.5, windowHeight * 0.35 ); // Posição do botão

  changeNeighborhoodsButton.mousePressed(changeNeighborhoods); // Função de callback quando o botão é clicado

  changeNeighborhoodsButton.style('background-color', 'red');

  changeNeighborhoodsButton.style('color', 'white');

  changeNeighborhoodsButton.style('text-align', 'center');

  changeNeighborhoodsButton.style('text-size', '16px');

  changeNeighborhoodsButton.style('border', 'none');

  changeNeighborhoodsButton.style('border-radius', '10px'); // Cantos arredondados

  changeNeighborhoodsButton.style('padding', '5px 12px'); // Preenchimento interno

  let button1 = createButton('Grid 4 vizinhanças');

  button1.position(rectw/2.5, windowHeight * 0.41); // Posição do botão

  button1.mousePressed(toggleCross1Visibility); // Função de callback quando o botão é clicado

  button1.style('background-color', 'red');

  button1.style('color', 'white');

  button1.style('text-align', 'center');

  button1.style('text-size', '16px');

  button1.style('border', 'none');

  button1.style('border-radius', '10px');

  button1.style('padding', '5px 10px'); // Preenchimento interno

  // Crie um botão para ativar ambas as cruzes

  let button2 = createButton('Grid 8 vizinhanças');

  button2.position(rectw/2.5, windowHeight * 0.47); // Posição do botão

  button2.mousePressed(activateBothCrosses); // Função de callback quando o botão é clicado

  button2.style('background-color', 'red');

  button2.style('color', 'white');

  button2.style('text-align', 'center');

  button2.style('text-size', '16px');

  button2.style('border', 'none');

  button2.style('border-radius', '10px'); // Cantos arredondados

  button2.style('padding', '5px 10px' ); // Preenchimento interno

​

  // Crie um botão para desativar ambas as cruzes

  let button3 = createButton('Sem Grid');

  button3.position(rectw/2.5, windowHeight * 0.53); // Posição do botão

  button3.mousePressed(deactivateCrosses); // Função de callback quando o botão é clicado

  button3.style('background-color', 'red');

  button3.style('color', 'white');

  button3.style('text-align', 'center');

  button3.style('text-size', '16px');

  button3.style('border', 'none');

  button3.style('border-radius', '10px'); // Cantos arredondados

  button3.style('padding', '5px 38px'); // Preenchimento interno

}

​

function toggleCross1Visibility() {

  cross1Visible = !cross1Visible; // Inverte o valor da variável cross1Visible

  if (cross1Visible) {

    cross2Visible = false; // Certifique-se de que apenas uma cruz está ativada

  }

}

​

​

function activateBothCrosses() {

  cross1Visible = true;

  cross2Visible = true;

}

​

// Função de callback para desativar ambas as cruzes

function deactivateCrosses() {

  cross1Visible = false;

  cross2Visible = false;

}

​

 function changeNeighborhoods() {

  // Solicite ao usuário que insira o número de vizinhanças

  let input = prompt("Digite o número de vizinhanças desejado:");

​

  // Verifique se o usuário inseriu um valor válido

  if (input !== null && !isNaN(input) && input >= 0) {

    // Converta o valor de entrada para um número inteiro

    neighborhoods = int(input);

     // Imprima a quantidade de vizinhanças atual no console

    print(`Número de vizinhanças atual: ${neighborhoods}`);

​

    // Redesenhe as vizinhanças com o novo número

    redrawNeighborhoods();

  } else {

    alert("Por favor, insira um número válido de vizinhanças.");

  }

}

​

​

function redrawNeighborhoods() {

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

    let thisCirc = circleArr[i];

    thisCirc.numberOfNeighborhoods = neighborhoods; // Atualiza o número de vizinhanças para cada círculo

  }

  // Redesenhe os círculos com base no novo número de vizinhanças

  background(255);

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

    let thisCirc = circleArr[i];

    thisCirc.updateMe(); // Atualiza os círculos com o novo número de vizinhanças

  }

}

​

​

function draw() {

    let crossSize = 800; // Tamanho da cruz

  let rotationAngle = radians(45); // Ângulo de rotação em radianos

    let rectw = windowWidth / 8;

  let recth = windowHeight-40;

    background(255);

   // Atualize os círculos

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

    let thisCirc = circleArr[i];

    thisCirc.updateMe();

  }

  // Atualize as contagens para a geração atual

  updateCircleCounts();

  // Exiba as contagens da geração atual na tela

  displayCircleCounts();

  // Configuração da interface

  setupUI();

  if (cross1Visible) {

   // Desenha a primeira cruz no centro

  push();

  stroke(0, 255, 50);

  strokeWeight(1.5);

  line(width / 2, height / 2 - crossSize / 2, width / 2, height / 2 + crossSize / 2);

  line(width / 2 - crossSize / 2, height / 2, width / 2 + crossSize / 2, height / 2);

  pop();

  }

if (cross2Visible) {

     // Desenha a segunda cruz rotacionada

  push(); // Salva a matriz de transformação atual

  stroke(0, 255, 50);

  strokeWeight(1.5);

  translate(width / 2, height / 2); // Move o ponto de origem para o centro

  rotate(rotationAngle); // Aplica a rotação

  line(-crossSize / 2, 0, crossSize / 2, 0); // Desenha a linha horizontal rotacionada

  line(0, -crossSize / 2, 0, crossSize / 2); // Desenha a linha vertical rotacionada

  pop(); // Restaura a matriz de transformação original

  }

​

   //  EXIBE O NÚMERO DE VIZINHANÇAS DE CADA CÍRCULO

  fill(50); // Define a cor do texto para preto

  textSize(8);

  textAlign(CENTER); 

​

​

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

    let thisCirc = circleArr[i];

    let x = rectw * 7.35;

    let y = 50 + i * 22; // Posição vertical separada para cada círculo

    text(`Círculo ${i + 1}: ${thisCirc.numberOfNeighborhoods} vizinhanças`, x, y);

}

}

​

function updateCircleCounts() {

  // Limpe o array de contagens

  circleCounts = [];

  pointOrderList = []; // Limpe a lista de ordem dos pontos

​

  // Percorra cada círculo

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

    let circle = circleArr[i];

    let counts = { 0: 0, 1: 0, 2: 0 }; // Inicialize as contagens para cada tipo

​

    // Percorra os pontos do círculo e conte os elementos em ordem cronológica

    let pointOrder = []; // Lista para armazenar a ordem dos pontos neste círculo

​

    for (let j = 0; j < circle.pointArr.length; j++) {

      let point = circle.pointArr[j];

      counts[point.state]++;

      pointOrder.push(point.state); // Adicione o estado do ponto à lista de ordem

    }

​

    // Converta as contagens em uma matriz ordenada por tipo

    let orderedCounts = [];

    for (let type = 0; type <= 2; type++) {

      orderedCounts.push(counts[type]);

    }

​

    // Adicione as contagens ordenadas do círculo ao array de contagens

    circleCounts.push(orderedCounts);

​

    // Adicione a lista de ordem dos pontos para este círculo à lista principal

    pointOrderList.push(pointOrder);

  }

}

​

// MOSTRA NA TELA A QUANTIDADE DE PONTOS

function displayCircleCounts() {

  textSize(8);

  fill(0);

    let rectw = windowWidth / 8;

  let recth = windowHeight - 40;

​

  // Percorra cada círculo e exiba as contagens e a ordem dos pontos

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

    let counts = circleCounts[i];

    let formattedCounts = `CÍRCULO ${i + 1}: `;

    formattedCounts += `${counts[0]} Tipo0, ${counts[1]} Tipo1, ${counts[2]} Tipo2`;

​

    // Exiba a string formatada na tela

    let x = windowWidth - 30;

    let y = recth * 0.70 + i * 35; // Posição vertical separada para cada círculo

    textAlign(RIGHT); // Alinhe o texto à direita

    text(formattedCounts, x, y);

​

    // Exiba a ordem dos pontos para este círculo

    let pointOrder = pointOrderList[i];

    let pointOrderText = `ORDEM: ${pointOrder.join(", ")}`;

    y += 15; // Aumente a posição vertical para a ordem dos pontos

    text(pointOrderText, x, y);

  }

}

​

function windowResized() {

  // Redimensiona o canvas quando a janela do navegador for redimensionada

  resizeCanvas(windowWidth, windowHeight);

}

​

function drawCircles() {

  // MADE UP FUNCTION

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

    if (e_counter == 0) {

      // Create the first circle with a different number of points

      let thisCirc = new Circle(firstCirclePoints, e_radius, true, neighborhoods);

      thisCirc.drawMe();

      circleArr.push(thisCirc);

    } else if (e_counter < circles) {

      // Create all the other circles

      let thisCirc = new Circle(e_steps, e_radius, false, neighborhoods);

      thisCirc.drawMe();

      circleArr.push(thisCirc);

      e_radius += e_gauge;

      b_radius = e_radius - e_gauge;

      e_steps -= 3;

    }

    e_counter++;

  }

}

​

class Circle {

  constructor(s, r, f, n) {

    this.steps = s;

    this.radius = r;

    this.first = f;

    this.numberOfNeighborhoods = n;

    this.pointArr = []; // Array de Celular Automata

     // Aplique um offset negativo para o primeiro círculo

    if (this.first) {

      this.radius += -25; // Ajuste esse valor conforme necessário

    }

  }

​

  updateMe() {

    let dis = map(sin(radians(0)), 0, 1, this.radius, width);

    push();

    translate(width / 2, height / 2);

    fill(0);

    ellipse(dis, 0, 6, 6); // Closing point of the piece

    noFill();

    smooth();

    let count = 0;

    for (let deg = 0; deg < 360; deg += this.steps) {

      if (this.first && count < this.pointArr.length) {

        this.pointArr[count].drawMe(0); // state 0 == correntinha

      } else if (!this.first && count < this.pointArr.length) {

        let numberOfCarreirinhas = 0;

        let numberOfPontosBaixos = 0;

        let numberOfPontosAltos = 0;

        //-------------------------------*-----------------------------------//

        //                        LÓGICA GENERATIVA

        //-------------------------------*-----------------------------------//

        // CONFERE O ESTADO DOS VIZINHOS

        this.pointArr[count].checkMyNeighbours();

        // Count the type of neighbors

        let thisNeighborhood = this.pointArr[count].myNeighbours;

        for (let x = 0; x < thisNeighborhood.length; x++) {

          if (thisNeighborhood[x] == 0) {

            numberOfCarreirinhas++;

          } else if (thisNeighborhood[x] == 1) {

            numberOfPontosBaixos++;

          } else if (thisNeighborhood[x] == 2) {

            numberOfPontosAltos++;

          }

        }

​

        // AUTOMATO CELULAR

        if (numberOfPontosBaixos + numberOfPontosAltos > (3 * this.pointArr[count].myNeighbours.length) / 4) {

          this.pointArr[count].drawMe(0); // O PONTO VIRA PONTO CORRENTINHA SE A QUANTIDADE VIZINHOS PONTOS BAIXOS + PONTOS ALTOR FOR MAIOR QUE 75% (3/4= 0,75%)

        } else if (numberOfCarreirinhas < (2 * this.pointArr[count].myNeighbours.length) / 5) {

          this.pointArr[count].drawMe(1); // O PONTO VIRA PONTO BAIXO, SE A QUANTIDADE VIZINHOS CORRENTINHAS FOR MENOR QUE 66% (2/3= 0,66%)

        } else if (numberOfCarreirinhas + numberOfPontosBaixos > (2 * this.pointArr[count].myNeighbours.length) / 2) {

          this.pointArr[count].drawMe(2); // O PONTO VIRA PONTO ALTO, SE A QUANTIDADE VIZINHOS CORRENTINHAS + PONTOS BAIXOS FOR MAIOR QUE 66% (2/3= 0,66%)

        } else {

          // PARA FAZER ELE MUDAR AUTOMÁTICO

          this.pointArr[count].drawMe(floor(random(3)));

        }

      }

      rotate(radians(this.steps));

      count++;

    }

    pop();

  }

​

  drawMe() {

    let dis = map(sin(radians(0)), 0, 1, this.radius, width);

    let angulo = 360 / this.numberOfNeighborhoods;

    let thisAngulo = 0;

    push();

    translate(width / 2, height / 2);

    fill(0);

    ellipse(dis, 0, 6, 6); // Closing point of the piece

    smooth();

    for (let deg = 0; deg < 360; deg += this.steps) {

      if (this.first) {

        let thisPoint = new Point(dis, 0);

        thisPoint.drawMe(0);

        this.pointArr.push(thisPoint);

      } else {

        if (deg <= thisAngulo) {

          // Creates point by petals

          let thisPoint = new Point(dis, this.numberOfNeighborhoods);

          this.pointArr.push(thisPoint);

          thisPoint.addMyNeighbours();

          thisPoint.drawMe(floor(random(3)));

        } else {

          thisAngulo += angulo;

          this.numberOfNeighborhoods--;

          let thisPoint = new Point(dis, this.numberOfNeighborhoods);

          this.pointArr.push(thisPoint);

          thisPoint.addMyNeighbours();

          thisPoint.drawMe(floor(random(3)));

        }

      }

      rotate(radians(this.steps));

    }

    pop();

  }

}

​

class Point {

  constructor(d, n) {

    this.state = 0;

    this.dis = d;

    this.neighborhood = n;

    this.myNeighbours = []; // Array of states of neighbors close to me

  }

​

  addMyNeighbours() {

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

      let thisCirc = circleArr[i];

      for (let j = 0; j < thisCirc.pointArr.length; j++) {

        let thisPoint = thisCirc.pointArr[j];

        if (thisPoint !== this && thisPoint.neighborhood == this.neighborhood) {

          this.myNeighbours.push(thisPoint.state);

        }

      }

    }

  }

​

  checkMyNeighbours() {

    let count = 0;

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

      let thisCirc = circleArr[i];

      for (let j = 0; j < thisCirc.pointArr.length; j++) {

        let thisPoint = thisCirc.pointArr[j];

        if (thisPoint !== this && thisPoint.neighborhood == this.neighborhood && count < this.myNeighbours.length) {

          this.myNeighbours[count] = thisPoint.state;

          count++;

        }

      }

    }

  }

​

  stopMe() {

    switch (this.state) {

      case 0:

        noFill();

        ellipse(this.dis, 0, 8, 8);

        break;

      case 1:

        image(img1, this.dis, -5);

        break;

      case 2:

        image(img2, this.dis, -5);

        break;

    }

  }

​

  drawMe(s) {

    this.state = s;

    switch (this.state) {

      case 0:

        noFill();

        ellipse(this.dis, 0, 8, 8);

        break;

      case 1:

        image(img1, this.dis, -6);

        break;

      case 2:

        image(img2, this.dis, -7);

        break;

    }

  }

}