Cleyson Reinhold

Corrente - Experimentos em Programação Criativa - 12

Thu, 04 Jul 2024 22:00:00 GMT

Essa é mais uma tentativa de reproduzir uma imagem utilizando computação criativa. Como nas últimas vezes, o objetivo dessa tentativa é de utilizar uma inspiração para aprender técnicas e conceitos novos. Esses artigos são principalmente criados como uma forma de catalogar o processo de implementação para referencia futura quando eu estiver desenvolvendo novas coisas.

Inspiração

Desta vez, uma das imagens que eu tinha salvo como inspiração é a seguinte:

Assim como o projeto anterior, esse também é criado por Roni Kaufman, onde conseguimos encontrar rascunhos semelhantes para entender como o autor criou.

Implementação

Usarei novamento o editor do p5 para essa implementação.

Da mesma forma como no artigo anterior, vou usar um projeto do autor original para entender como criar um rascunho semelhante. Usarei esse projeto como base, mas desta vez criarei a minha versão do zero, usando o código original como referência.

Passo 1

O código completo do projeto de Roni Kaufman pode ser visto abaixo.

Código original completo

Hexagonos - Experimentos em Programação Criativa - 11

Thu, 20 Jun 2024 22:00:00 GMT

Inspiração

Desta vez, uma das imagens que eu tinha salvo como inspiração é a seguinte:

No caso dessa imagem, lembrei que tinha encontrado através do canal Birb’s Nest no discord, então fui atrás da origem. Não encontrei a exata imagem, mas encontrei esse ótimo artigo do Gorilla Sun, e esse projeto de Roni Kaufman no Open Processing, que por sinal é o mesmo autor da imagem de inspiração.

Implementação

Usarei novamento o editor do p5 para essa implementação.

Neste artigo, diferentemente dos outros dessa série, vou analisar e alterar o projeto acima para tentar chegar no resultado da imagem de inspiração. Isso irá facilitar chegar no resultado, e é algo que geralmente faço em outros projetos (alterar códigos prontos para chegar em novos resultados)

Passo 1

O código completo do projeto de Roni Kaufman pode ser visto abaixo, assim como o resultado, mas vamos analisá-lo passo a passo

Código completo

Xadrez - Experimentos em Programação Criativa - 10

Wed, 12 Jun 2024 22:00:00 GMT

Inspiração

Desta vez, uma das imagens que eu tinha salvo como inspiração é a capa do album Wings da banda BTS:

Nessa imagem, quatro círculos são desenhados com diferentes estilos. A proposta não é desenvolver algo 100% fiel, mas que relembre essa capa.

O resultado foi o seguinte:

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Começando pelo grid, vamos criar uma matriz que guardará cada uma das células. Os valores serão 1 para células pretas e 0 para células brancas.

const matrix = []

const WIDTH = 60
const CHECKED_SIZE = 6

function setup() {
  createCanvas(WIDTH * (CHECKED_SIZE + 2), WIDTH * (CHECKED_SIZE + 2))
  
  new Array(CHECKED_SIZE).fill(0).map((_, i) => {
    matrix.push([])
    new Array(CHECKED_SIZE).fill(0).map((_, j) => {
      const v = i % 2 === 0 ? (j % 2 === 0 ? 1 : 0) : (j % 2 === 0 ? 0 : 1)
      matrix[i].push(v)
    })
  })
}

E pintamos eles na tela como um grid de quadrados


function draw() {
  background(220)
  stroke(0)
  strokeWeight(2)
  
  for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
      fill(matrix[i][j] === 1 ? 0 : 220)
      const x = WIDTH * i + WIDTH
      const y = WIDTH * j + WIDTH
      square(x, y, WIDTH)
    }
  }
}

Com isso temos o seguinte resultado:

Passo 2

Para o próximo passo, vamos adicionar os pequenos círculos nas quatro pontas do tabuleiro. Basta verificarmos se o quadrado faz parte de uma das pontas, e adicionar um círculo na posição central

...


function draw() {
  background(220)
  stroke(0)
  strokeWeight(2)
  
  for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
      ...
      
      const isXWall = i === 0 || i === CHECKED_SIZE - 1
      const isYWall = j === 0 || j === CHECKED_SIZE - 1
      if (isXWall && isYWall) {
        fill(matrix[i][j] === 1 ? 220 : 0)
        circle(x + WIDTH/2, y + WIDTH/2, WIDTH / 2)
      }
    }
  }
}

Resultando no seguinte:

Passo 3

Neste último passo, vamos adicionar a ação do clique. O próprio p5.js já possui uma função interna que observa o método mouseClicked() para facilitar o desenvolvimento, por isso podemos só implementar esse método e usar as variáveis mouseX e mouseY para detectar a posição do canvas que foi clicado.

function mouseClicked() {
  const isLeftWall = mouseX < WIDTH
  const isRightWall = mouseX > WIDTH * 7
  const isTopWall = mouseY < WIDTH
  const isBottomWall = mouseY > WIDTH * 7
  if (isLeftWall || isRightWall) {
    const row = floor(mouseY * (CHECKED_SIZE + 2) / width)
    // Mover a linha para a direita ou esquerda
  }
  if (isTopWall || isBottomWall) {
    const column = floor(mouseX * (CHECKED_SIZE + 2) / width)
    // Mover a coluna para baixo ou para cima
  }
}

E com uma lógica um pouco mais elaborada, podemos fazer o deslocamento das células para a direção desejada.

function mouseClicked() {
  ...
  if (isLeftWall || isRightWall) {
    ...
    rotateMatrix(row - 1, 'x', isLeftWall ? 'right' : 'left')
  }
  if (isTopWall || isBottomWall) {
    ...
    rotateMatrix(column - 1, 'y', isTopWall ? 'bottom' : 'top')
  }
}

function rotateMatrix(index, axis, direction) {
  if (index < 0 || index >= CHECKED_SIZE) return
  if(axis === 'y') {
    if (direction === 'bottom') {
      matrix[index].unshift(matrix[index].pop())
    } else {
      matrix[index].push(matrix[index].shift())
    }
  } else {
    const cells = matrix.map(row => row[index])
    if (direction === 'right') {
      cells.unshift(cells.pop())
    } else {
      cells.push(cells.shift())
    }
    matrix.forEach((row, i) => row[index] = cells[i])
  }
}

Produzindo nosso resultado final:

Próximos passos

Para um resultado mais fiel ao original, seria legal adicionar uma animação para visualizar as linhas e colunas movendo para a direção que estão sendo deslocadas, além de linhas delimitando quais direções podem ou não ser clicadas.

Código completo

Wings - Experimentos em Programação Criativa - 9

Thu, 06 Jun 2024 22:00:00 GMT

Inspiração

Desta vez, uma das imagens que eu tinha salvo como inspiração é a capa do album Wings da banda BTS:

Nessa imagem, quatro círculos são desenhados com diferentes estilos. A proposta não é desenvolver algo 100% fiel, mas que relembre essa capa.

O resultado foi o seguinte:

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Começando pelo círculo do canto inferior direito, que é representado apenas como um círculo preto com gradiente, podemos iniciar o nosso canvas apenas desenhando um círculo na posição correta.

const diameter = 150

function setup() {
  createCanvas(450, 450)
}

function draw() {
  background(255)
  
  drawGradientCircle(width / 3 * 2, height / 3 * 2)

  noLoop()
}

function drawGradientCircle(x, y) {
  ellipse(x, y, diameter, diameter)
}

Com esse código inicial criamos um círculo na posição correta do canvas

Para gerar a sensação de gradiente, vamos simplesmente adicionar círculos menores na frente deste círculo, diminuindo a cor interna de cada um

function drawGradientCircle(x, y) {
  let h = 0
  noStroke()
  for (let r = diameter; r > 0; --r) {
    fill(h);
    ellipse(x, y, r, r);
    h += 0.6
    y += 0.2
    x += 0.1
  }
}

Resultando no nosso primeiro círculo completo:

Passo 2

O segundo círculo será o superior direito, com as listras. O desafio nesse círculo é que as listras fazem um ziguezague.

Para isso, vamos criar uma função que calcula um ponto no canvas com base em 1. um ponto inicial, 2. uma distancia do ponto inicial, e 3. o ângulo em que o novo ponto estará posicionado. Com isso, podemos criar uma forma de quatro pontos que se assemelha ao objetivo.

function draw() {
  ...
  drawLineCircle(width / 3 * 2, height / 3)
  ...
}

function drawLineCircle(x, y) {
  noFill()
  stroke(0)
  strokeWeight(8)
  
  beginShape()
  const firstPoint = { x: x - diameter/2, y }
  vertex(firstPoint.x, firstPoint.y)
  const secondPoint = calculatePoint(firstPoint, 60 * (PI/180), 50)
  vertex(secondPoint.x, secondPoint.y)
  const thirdPoint = calculatePoint(secondPoint, -20 * (PI/180), 140)
  vertex(thirdPoint.x, thirdPoint.y)
  const forthPoint = calculatePoint(thirdPoint, 60 * (PI/180), 50)
  vertex(forthPoint.x, forthPoint.y)
  endShape()
}

function calculatePoint(initialPoint, angle, distance) {
    return {
      x: initialPoint.x + distance * Math.cos(angle),
      y: initialPoint.y + distance * Math.sin(angle)
    }
}

Na sequência, fazemos um loop para desenhar esse ziguezague algumas vezes no canvas

function drawLineCircle(x, y) {
  noFill()
  stroke(0)
  strokeWeight(8)
  
  let bufferY = y - 100
  let bufferX = x - diameter/2 + 10
  for(let i = 0; i < 16; i++) {
    beginShape()
    const firstPoint = { x: bufferX, y: bufferY }
    vertex(firstPoint.x, firstPoint.y)
    const secondPoint = calculatePoint(firstPoint, 60 * (PI/180), 50)
    vertex(secondPoint.x, secondPoint.y)
    const thirdPoint = calculatePoint(secondPoint, -20 * (PI/180), 140)
    vertex(thirdPoint.x, thirdPoint.y)
    const forthPoint = calculatePoint(thirdPoint, 60 * (PI/180), 50)
    vertex(forthPoint.x, forthPoint.y)

    endShape()
    bufferY += 15
    bufferX -= 5
  }
}

E por fim, fazemos um clip no drawingContext

function drawLineCircle(x, y) {
  fill(255)
  noStroke()
  drawingContext.save()  
  ellipse(x, y, diameter, diameter)
  drawingContext.clip()
  ...

Passo 3

Para o primeiro círculo, utilizei esse tutorial do Coding Train. A explicação em vídeo é bastante clara, e o código final é disponibilizado para p5.js. O código para esse projeto ficou simplesmente assim:

function draw() {
  ...
  drawBlobCircle(width / 3, height / 3)
  ...
}

function drawBlobCircle(x, y) {
  noStroke()
  fill(10)
  beginShape();
  let xoff = 0
  let yoff = 0
  for (var a = 0; a < TWO_PI; a += 0.1) {
    let offset = map(noise(xoff, yoff), 0, 1, -25, 25)
    let r = diameter / 2 + offset
    let newX = r * cos(a)
    let newY = r * sin(a)
    vertex(x + newX, y + newY)
    xoff += 0.03
    yoff += 0.01
  }
  endShape()
}

Passo 4

Para o último círculo usaremos um algoritmo de pixel sorting. Vamos então criar uma lista e adicionar diversos pontos de cor aleatória (entre 0 e 150, ou preto e cinza). Para definir os pontos aleatórios vamos utilizar o algoritmo de noise, disponível no p5.js.


function drawPixelSortCircle(x, y) {
  let areaPixels = []
  for(let i = 0; i < diameter; i++) {
    for (let j = 0; j < diameter; j++) {
      if (!areaPixels[i]) areaPixels[i] = []
      const noiseX = 0.05
      const noiseY = 0.1
      const n = noise(noiseX + noiseX*i, noiseY + noiseY*j + 5)
      const c = map(n, 0, 1, 0, 150)
      areaPixels[i].push(round(c))
    }
  }
  
  areaPixels.forEach((column, ic) => {
    column.forEach((p, ir) => {
      const newX = x + ic - diameter / 2
      const newY = y + ir - diameter / 2
      if (dist(newX, newY, x, y) < diameter/2) {
        set(newX, newY, p)
      }
    })
  })
  updatePixels()
}

Com esse código estamos adicionando todos os pixels em colunas na área do tamanho do círculo, e posteriormente desenhando na tela apenas os pixels que estão dentro do raio do círculo.

O resultado disso fica assim:

Agora vamos ordenar os pixels por coluna. Não queremos ele 100% ordenado, então cada vez que a diferença de cor entre dois pixels for muito grande, eles não serão odernados, resultando num efeito semelhante ao qoue procuramos. O código fica mais ou menos assim:

function drawPixelSortCircle(x, y) {
  ...
  
  const colorTreshold = 60
  areaPixels.forEach(column => {
    column.sort((a,b) => abs(a-b) < colorTreshold ? a - b : b - a)
  })
  
  ...
}

E esse é o resultado:

Próximos passos

O resultado final não é exatamente igual a capa, e para tentar um resultado mais fiel poderiamos melhorar cada círculo com algoritmos que relembrem mais a capa original.

Código completo

Dithering - Experimentos em Programação Criativa - 8

Wed, 29 Nov 2023 22:00:00 GMT

Inspiração

Desta vez, uma das imagens que eu tinha salvo como inspiração é a seguinte:

Por mais que pareça usar um algoritmo diferente, decidi usar ela como inspiração para aprender a implementar algoritmos de dithering. Dithering é uma forma de ruído, usado para “melhorar” a qualidade de imagens quando utilizando uma quantidade limitada de cores. Em nosso exemplo, usaremos apenas preto e branco.

Implementação

Usarei novamento o editor do p5 para essa implementação, usando como inspiração esse artigo e essa implementação, também em Javascript.

O artigo consegue explicar muito melhor como cada artigo funciona, então aqui descreverei apenas como fiz para representar o mesmo usando o editor do p5 e também usar como referência caso eu pretenda usálo em outros projetos.

Passo 1

Ao invés de usar um simples gradiente, camos usar a própria câmera do laptop como input para o nosso algoritmo. Isso pode ser feito facilmente com p5 da seguinte forma:

let capture;

function setup() {
  createCanvas(600, 450);
  capture = createCapture(VIDEO);
  capture.hide()
}

function draw() {
  background(220);
  image(capture, 0, 0, width, height);
}

Com esse código exebimos no canvas a imagem da câmera

Fazendo um loop nos pixels da imagem podemos calcular qual o valor médio de cor em cada pixel e atribuir 0 (preto) ou 255 (branco) para o pixel, fazendo assim a imagem monocromática.

function draw() {
  ...
  applyMonochrome();
}

function applyMonochrome() {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    const blackAndWhite = Math.floor((pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3);
    const c = blackAndWhite < 129 ? 0 : 255
    pixels[i] = c;
    pixels[i + 1] = c;
    pixels[i + 2] = c;
  }
  updatePixels();
}

Interessante notar que a lista the pixels gerada pelo p5 contem 4 itens para cada pixel, respectivamente os canais RGBA. Por isso precisamos atualizar os três primeiros para que a cor seja definida.

Para testarmos diferentes níveis de limear, podemos usar também um slider.

let slider;


function setup() {
  ... 

  slider = createSlider(0, 255, 129);
}

...


function applyMonochrome() {
  ...
    const c = blackAndWhite < slider.value() ? 0 : 255
  ... 
}

Passo 2

O segundo algoritmo que implementaremos será o de Floyd-Steinberg, que utiliza uma matriz de difusão para distribuição de erro aos pixels vizinhos.

O algoritmo final fica desta forma

function applyFloydSteiberg() {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    const blackAndWhite = Math.floor((pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3);
    const c = blackAndWhite < slider.value() ? 0 : 255;

    const err = Math.floor((blackAndWhite - c) / 16);
    
    for (let j = 0; j < 3; j++) {
      pixels[i + j] = c;
      pixels[i + j + 4] += err * 7;
      pixels[i + j + 4 * width - 4] += err * 3;
      pixels[i + j + 4 * width] += err * 5;
      pixels[i + j + 4 * width + 4] += err * 1;
    }
  }
  updatePixels();
}

A imagem aparenta até ter tons de cinza, mas olhando próximo é possível perceber que são pixeis pretos e brancos intercalados.

Para facilitar o teste, podemos adicionar radio buttons para alternar entre os métodos.

let radio;

function setup() {
  ...
  radio = createRadio();
  radio.option('monochrome');
  radio.option('Floyd-Steinberg');
  ...
}

function draw() {
  ...
  
  switch(radio.value()) {
    case 'monochrome': {
      applyMonochrome();
      break;
    }
    case 'Floyd-Steinberg': {
      applyFloydSteiberg();
      break;
    }
  }
}

Passo 3

Sem muitas explicações, os seguintes algoritmos são o de Bill Atkinson e Bayer

function applyBillAttkinson() {
  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    const blackAndWhite = Math.floor((pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3);
    const c = blackAndWhite < slider.value() ? 0 : 255

    const err = Math.floor((blackAndWhite - c) / 8);
   
    for (let j = 0; j < 3; j++) {
      pixels[i + j]= c;
      pixels[i + j + 4] += err;
      pixels[i + j + 8] += err;
      pixels[i + j + 4 * width - 4] += err;
      pixels[i + j + 4 * width] += err;
      pixels[i + j + 4 * width + 4] += err;
      pixels[i + j + 8 * width] += err;
    }
  }
  updatePixels();
}

function applyBayer() {
  const bayerThresholdMap = [
    [  15, 135,  45, 165 ],
    [ 195,  75, 225, 105 ],
    [  60, 180,  30, 150 ],
    [ 240, 120, 210,  90 ]
  ];

  loadPixels();
  for (let i = 0; i < pixels.length; i += 4) {
    const blackAndWhite = Math.floor((pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3);
    
    const x = i/4 % width;
    const y = Math.floor(i/4 / width);
    const mapped = Math.floor( (blackAndWhite + bayerThresholdMap[x%4][y%4]) / 2 );
    const c = (mapped < slider.value()) ? 0 : 255;
    
    pixels[i] = c;
    pixels[i + 1] = c;
    pixels[i + 2] = c;
  }
  updatePixels();
}

Próximos Passos

Esses não são os únicos. Outros algoritmos de dithering também podem ser aplicados. A ideia de próximo passos é implementar novos algoritmos e talvez pensar em quais peojetos seria divertido aplicá-los.

O código completo está abaixo e é uma forma rápida de começar a testar e brincar com esses filtros.

Código completo

Skate - Experimentos em Programação Criativa - 7

Fri, 03 Nov 2023 22:00:00 GMT

Inspiração

A imagem que usarei como inspiração desta vez é a seguinte:

E o meu resultado é o seguinte:

Implementação

Usarei novamento o editor do p5 para essa implementação, dessa vez com a modalidade WEBGL.

Passo 1

Desta vez, achei que seria mais fácil alcançar o resultado utilizando WEBGL, criando cada elemento da tela de forma 3D, facilitando assim o posicionamento de cada um em frente do outro.

Utilizar WEBGL com o p5js é bastante simples, bastando adicionar um novo parâmetro para função de criação do canvas createCanvas(400, 400, WEBGL). Criar um cubo pode ser feito de forma simples:

function setup() {
  createCanvas(400, 400, WEBGL)
}

function draw() {
  background(220)

  // As funções de rotação serão apenas para debug, mas não serão necessárias para esse código
  rotateX(frameCount * 0.01)
  rotateY(frameCount * 0.01)

  box(50, 50, 50)
}

Para o resultado final não usaremos as funções rotateX e rotateY, mas durante a implementação usarei em alguns momentos para depurar a posição de cada elemento da tela.

Um conceito interessante de notar, é que todos os elementos 3D adicionados em tela são posicionados no centro da tela. Portanto, quando quisermos mudar a posição de algum elemento, devemos usar as funções de transformação, como translate e rotate.

Para o resultado que estamos buscando, usaremos vários paralelepípedos posicionados lado a lado. Para isso, podemos criar um loop que adicionará os elementos e fazer um translate após isso.

const LINES_COUNT = 26
const LINE_WIDTH = 10

function setup() {
  createCanvas(400, 400, WEBGL)
}

function draw() {
  background(220)

  // As funções de rotação serão apenas para debug, mas não serão necessárias para esse código
  rotateX(frameCount * 0.01)
  rotateY(frameCount * 0.01)

  push()
  translate(LINES_COUNT / 2 * LINE_WIDTH * -1, 0)
  for (let i = 0; i < LINES_COUNT; i++) {
    box(LINE_WIDTH, 300, 5)
    translate(LINE_WIDTH, 0, 0)
  }
  pop()
}

Com esse resultado sem rotação:

Transladando o eixo Z, fazemos com que cada paralelepípedo fique em posições diferentes, por onde as linhas horizontais passarão nas próximas etapas. Decidi fazer a translação duas vezes, voltando para a origem no eixo Z, para que usarmos 3 níveis diferentes (gerados de forma aleatória).

...
function draw() {
  ...

  push()
  translate(LINES_COUNT / 2 * LINE_WIDTH * -1, 0)
  for (let i = 0; i < LINES_COUNT; i++) {
    const zIndex = int(random(1, 4)) * 10
    translate(0, 0, zIndex)
    box(LINE_WIDTH, 300, 5)
    translate(LINE_WIDTH, 0, -zIndex)
  }
  pop()
}

Passo 2

Antes de adicionar os paralelepípedos horizontais, vamos ajustar algumas outras coisas no código até agora. Primeiro, podemos adicionar cores.

O p5 permite várias configurações de luzes e materiais. Para o nosso caso, usaremos o emissiveMaterial(), que é usado para definir uma cor com sua força total, ignorando qualquer configuração de luz. Essa função deve ser chamada antes de renderizar algum elemento na tela, com a cor desejada.

...
function draw() {
  ...

  push()
  translate(LINES_COUNT / 2 * LINE_WIDTH * -1, 0)
  for (let i = 0; i < LINES_COUNT; i++) {
    emissiveMaterial(random(100,255), random(100,255), random(100,255))
    const zIndex = int(random(1, 4)) * 10
    translate(0, 0, zIndex)
    box(LINE_WIDTH, 300, 5)
    translate(LINE_WIDTH, 0, -zIndex)
  }
  pop()
}

Além disso, usamos o noStroke() para remover as bordas.

Por fim, precisamos ajustar a camera para o modo ortogonal. Com isso, todos os objetos de mesmas dimensões terão o mesmo tamanho, independetemente da distância até a câmera. Com isso, o resultado ficará bem mais parecido com o que buscamos.

...
function setup() {
  createCanvas(400, 400, WEBGL)
  ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500)
}
...

Por mais que não pareça, se rotacionarmos o canvas conseguímos ver que o eixo Z ainda está diferente para cada elemento.

Parte 3

A última etapa será adicionar as linhas horizontais que atravessam as verticais. Isso pode ser feito com um loop semelhante ao anterior, apenas invertendo o desenho do cubo para horizontal, e definindo a cor padrão como preto.

...

function draw() {
  ...

  emissiveMaterial(0, 0, 0)
  
  translate(-5, -165, 5)
  for (let i = 0; i < 10; i++) {
    const zIndex = int(random(1, 4)) * 10
    translate(0, 30, zIndex)
    box(300, LINE_WIDTH, 5)
    translate(0, 0, -zIndex)
  }
}

Como estamos adicionando os elementos aleatoriamente no eixo Z, conseguimos ver as faixas horizontais passando em frente e atrás das verticais.

Por fim adicionamos algumas faixas verticais para conectar as horizontais, e o resultado está pronto.

function draw() {
  ...

  for (let i = 0; i < 10; i++) {
    const zIndex = int(random(1, 4)) * 10
    translate(0, 30, zIndex)
    box(300, LINE_WIDTH, 5)
    if (i === 9) break
    translate(i % 2 === 0 ? 145 : -145, 15, 0)
    box(LINE_WIDTH, 30, 5)
    translate(i % 2 === 0 ? -145 : 145, -15, -zIndex)
  }
}

Próximos passos

Algumas ideias para um próximo passo seria brincar com o tamanho e larguras das faixas, além de alterar mais as formas como o eixo Z é trabalhado, tentando alcançar algo mais entrelaçado.

Código completo

Diretório de bibliotecas para computação criativa

Sun, 29 Oct 2023 22:00:00 GMT

Esta página é um diretório de bibliotecas, linguagens e ferramentas que podem ser usadas para computação criativa. A principal motivação para eu manter esse diretório, é a de salvar materiais de ensino e poder usar como inspiração para quando quiser construir ou praticar algo novo.

1. p5.js

O p5.js é a biblioteca que eu mais tenho usado nessa lista. É uma biblioteca JavaScript que facilita a criação de animações e visuais interativos e criativos. É frequentemente usado para projetos artísticos, arte generativa e fins educacionais.

Referências

2. three.js

O three.js é uma biblioteca gráfica 3D popular para JavaScript. Ele permite que os desenvolvedores criem visualizações e jogos 3D impressionantes no navegador, tornando-o uma escolha ideal para projetos 3D baseados na web.

Referências

Exemplo de códigos usando pixel art
React Three Fiber, utilizado para construir projetos com three.js em react

3. Sonic Pi

O Sonic Pi é um sintetizador de música com codificação ao vivo. Ele foi escrito em Ruby e projetado para criação e experimentação musical em tempo real, tornando-o uma ferramenta única para codificação criativa baseada em áudio.

4. ShaderToy

O ShaderToy é uma plataforma para criar e compartilhar shaders em tempo real. Ele usa principalmente GLSL para escrever shaders, permitindo que artistas e desenvolvedores criem efeitos visuais e animações impressionantes.

Referências

The Book of Shaders

5. pico-8

O pico-8 é um console retrô para criar, compartilhar e jogar pequenos jogos e gráficos interativos. Ele é construído em torno da linguagem de programação Lua e incentiva o desenvolvimento de pequenos jogos de inspiração retro.

Referências

6. ORCA

ORCA é uma linguagem de programação visual para música e recursos visuais de codificação ao vivo. Seu código é compilado para WebAssembly, permitindo codificação criativa em tempo real com foco na composição algorítmica e recursos visuais generativos.

Referências

Learn ORCA

7. paper.js

O paper.js é uma biblioteca de gráficos vetoriais para a web. Ele simplifica a criação de gráficos vetoriais complexos e animações interativas no navegador, tornando-o ideal para arte baseada na Web e visualização de dados.

8. handsfree.js

O handsfree.js é uma biblioteca JavaScript para criar interações mãos-livres com aplicativos da web. Ele usa visão computacional e aprendizado de máquina para permitir o controle baseado em gestos de projetos de codificação criativos e aplicativos da web interativos.

9. Zdog js

O Zdog.js é uma biblioteca de modelagem e animação pseudo-3D para a web. Ele permite a criação de gráficos 3D simples e estilizados com foco na facilidade de uso, tornando-o uma ótima opção para arte 3D baseada na web.

10. Hydra

O Hydra é uma plataforma para codificação visual ao vivo no navegador. É baseado em JavaScript e é conhecido por seus recursos de shader e manipulação gráfica em tempo real, tornando-o uma escolha popular para performances ao vivo e instalações de arte interativas.

11. Pure Data

O Pure Data é uma linguagem de programação visual para áudio e multimídia em tempo real. É utilizado para a criação de instalações audiovisuais interativas, composição musical e síntese sonora.

12. ml5.js

O ml5.js é uma biblioteca de aprendizado de máquina para projetos de codificação criativos. Ele simplifica a integração de modelos de aprendizado de máquina em aplicativos JavaScript, permitindo criações visuais e de áudio interativas e baseadas em IA.

13. pts.js

O pts.js é uma biblioteca leve de gráficos vetoriais 2D para JavaScript. É usado para criar visuais dinâmicos e expressivos, geralmente para visualização de dados, arte generativa e aplicações web interativas.

15. Oimo.js

O Oimo.js é um mecanismo de física para a web. Ele permite a simulação realista da física em jogos baseados na web, simulações e experiências interativas em 3D.

16. Theater.js https://github.com/ariaminaei/theatre

O Theatre.js é uma estrutura JavaScript para codificação criativa que se concentra na criação de narrativas interativas e narrativas visuais no navegador. É frequentemente usado para contar histórias baseadas na web e experiências imersivas.

17. tixy.land

tixy.land é uma plataforma online para codificação criativa usando a linguagem Tixy. Tixy é uma linguagem minimalista projetada para criar código artístico pequeno, conciso e visualmente atraente.

18. Electron

O Electron é uma estrutura para construção de aplicativos de desktop multiplataforma usando tecnologias da web como HTML, CSS e JavaScript. É uma interessante alternativa para criar projetos que utilizam das interfaces gráficas do sistema operacional de formas criativas.

19. Thixels

O Thixels é uma plataforma interessante para live-coding.

20. ASCII play

ASCII Play é um playground para criação de animações em ASCII.

23. matter.js

O Matter.js é um mecanismo de física 2D para a web, escrito em JavaScript. É usado principalmente para simular física realista e colisões em aplicativos interativos da web, jogos, simulações e projetos de arte interativos.

Campo de Fluxo - Experimentos em Programação Criativa - 6

Thu, 21 Sep 2023 22:00:00 GMT

Essa é mais uma tentativa de reproduzir uma imagem utilizando computação criativa, puramente para aprender coisas novas e passar o tempo. Esses artigos são principalmente criados como uma forma de catalogar o processo de implementação para referencia futura quando eu estiver desenvolvendo novas coisas.

Inspiração

A imagem que tentei replicar através de código desta vez é a seguinte:

E o meu resultado é o seguinte:

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Seguindo a mesma onde do artigo anterior, utilizei como base o código do Daniel Shiffman ensinado neste vídeo. No vídeo, um algoritmo para flow fields é ensinado, e essa é a principal parte necessária para o resultado final.

Seguindo o tutorial, conseguimos o seguinte código como base para o nosso projeto:

const inc = 0.02
const scl = 10
let cols, rows

function setup() {
  createCanvas(600, 600)
  cols = floor(width / scl)
  rows = floor(height / scl)
  
  background(0)
  noLoop()
}

function draw() {
  noStroke()
  let yoff = 0
  for (let y = 0; y < rows; y++) {
    let xoff = 0
    for (let x = 0; x < cols; x++) {
      const index = x + y * cols
      const angle = noise(xoff, yoff) * TWO_PI * 4
      const v = p5.Vector.fromAngle(angle)
      xoff += inc
      stroke(255)
      strokeWeight(2)
      push();
      translate(x * scl, y * scl)
      rotate(v.heading())
      line(0, 0, scl, 0)
      pop()
    }
    yoff += inc
  }
}

Retornando esse resultado

Passo 2

Na sequência podemos adicionar as cores e ajustar um pouco as linhas.

Começando pelas cores, podemos adicionar cores aleatórias para as linhas com base em uma lista de cores pré-selecionadas, e atualizar o background

const colors = ['#ff0026', '#ff3400', '#ea3d96', '#7a62a4', '#ffea00', '#98398f', '#839db2', '#0ead00', '#578400']


function setup() {
  ...  
  background('#ffd000')
}

function draw() {
  ...
  for (let y = 0; y < rows; y++) {
    ...
    for (let x = 0; x < cols; x++) {
      ...
      
      const c = colors[int(random(0, colors.length))]
      stroke(c)
      fill(c)
      strokeWeight(2)

      ...
    }
    ...
  }
}

Podemos também alterar a função que desenha a linha para adicionar algumas colas e um pouco de aleatoriedade em quando as linhas devem ou não aparecer

function draw() {
  ...
  for (let y = 0; y < rows; y++) {
    ...
    for (let x = 0; x < cols; x++) {
      ...
      drawLine(scl)
      ...
    }
    ...
  }
}

function drawLine(size) {
  if (random() < 0.9) {
    line(0, 0, size, 0)
  }
  
  if (random() < 0.7) {
    circle(0, 0, 2)
  }
}

Passo 3

Agora, vamos adicionar uma máscara para que o flow field apareça apenas dentro de um círculo, e não on canvas inteiro.

O p5.js não possui nenhuma função específica para isso, mas como o código é executado em um canvas HTML, podemos utilizar a própria função dele para isso. Essa discussão nas issues do p5.js explica melhor como isso pode ser usado.

No nosso código, podemos adicionar da seguinte forma:

function draw() {
  drawingContext.save()  
  fill('#bfc187')
  circle(width / 2, height / 2, height / 1.5)
  drawingContext.clip()

  ...
}

Obtendo esse resultado:

Passo 4

O último passo é adicionar uma granularidade para a tela, assim como na imagem original.

Para isso, trapaceei pedindo ao ChatGPT para gerar um código que “granule” o canvas. O resultado foi esse:

function draw() {
  ...
  applyGrainyFilter()
}

function applyGrainyFilter() {
  loadPixels();
  const length = 20
  for (let i = 0; i < pixels.length; i += 4) {
    // Add random noise to the red, green, and blue channels
    pixels[i] += random(-length, length);
    pixels[i + 1] += random(-length, length);
    pixels[i + 2] += random(-length, length);
  }
  updatePixels();
}

Próximos passos

Algumas ideias para avançar mais nesse projeto seriam brincar com a função de drawLine para chegar mais próximo do resultado original, ou tentar encontrar uma paleta de cores mais semelhantes.

Código completo

Empacotamento - Experimentos em Programação Criativa - 5

Mon, 04 Sep 2023 22:00:00 GMT

Inspiração

A imagem que tentei replicar através de código desta vez é a seguinte:

E o meu resultado é o seguinte:

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Nesse projeto decidi seguir uma forma simples de reutilizar códigos já feito por outras pessoas ao invés de codificar tudo do zero. É um pouco preguiçoso, mas sempre acho essa uma forma boa de aprender, já que eu sempre busco entender o código dos outros antes de começar a alterar ou incrementar algo.

Para isso, usei como base o código desse vídeo do coding train, onde Daniel Shiffman ensina a aplicar um algoritmo de circle packing. O código do vídeo está nesse projeto que usei como base, fazendo algumas alterações para utilizar o canvas inteiro ao invés de uma imagem.

Esse é o código após as alterações:

let circles = []
let spots = []

function setup() {
  createCanvas(400, 400)
  
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      spots.push(createVector(x, y))
    }
  }
}

function draw() {
  background(0)

  let total = 5
  let count = 0
  let attempts = 0

  while (count < total) {
    let newC = newCircle()
    if (newC !== null) {
      circles.push(newC)
      count++
    }
    attempts++
    if (attempts > 1000) {
      noLoop()
      break
    }
  }

  for (let i = 0; i < circles.length; i++) {
    let circl = circles[i]

    if (circl.growing) {
      if (circl.edges()) {
        circl.growing = false
      } else {
        for (let j = 0; j < circles.length; j++) {
          let other = circles[j]
          if (circl !== other) {
            var d = dist(circl.x, circl.y, other.x, other.y)
            var distance = circl.r + other.r

            if (d - 4 < distance) {
              circl.growing = false
              break
            }
          }
        }
      }
    }

    circl.show()
    circl.grow()
  }
}

function newCircle() {
  var r = int(random(0, spots.length))
  var spot = spots[r]
  var x = spot.x
  var y = spot.y

  var valid = true
  for (var i = 0; i < circles.length; i++) {
    var circle = circles[i]
    var d = dist(x, y, circle.x, circle.y)
    if (d < circle.r) {
      valid = false
      break
    }
  }
  if (valid) {
    return new Circle(x, y)
  } else {
    return null
  }
}

class Circle {
  constructor(x, y) {
    this.x = x
    this.y = y
    this.r = 1
    this.growing = true
  }

  grow() {
    if (this.growing) {
      this.r += 1
    }
  }

  show() {
    fill(255)
    noStroke()
    ellipse(this.x, this.y, this.r * 2, this.r * 2)
  }

  edges() {
    return (
      this.x + this.r >= width ||
      this.x - this.r <= 0 ||
      this.y + this.r >= height ||
      this.y - this.r <= 0
    )
  }
}

Passo 2

Meu segundo passo foi alterar o código para desenhar espirais ao invés de círculos. Pedi para o ChatGPT criar esse código para mim, e esse foi o resultado:

function drawSpiral(centerX, centerY, radius) {
  let angle = 0;
  let increment = 0.1;

  beginShape();
  noFill();
  stroke(0);
  strokeWeight(1);

  for (let r = 0; r < radius; r += 0.1) {
    let x = centerX + cos(angle) * r;
    let y = centerY + sin(angle) * r;
    vertex(x, y);
    angle += increment;
  }

  endShape();
}

Esse código já faz bastante do que queremos, e com um pouco de ajustes podemos subsituír o método show da nossa classe Circle.

class Circle {
  ...

  show() {
    let angle = 0
    let increment = 0.2

    beginShape()
    noFill()
    stroke(255)
    strokeWeight(2)

    for (let r = 0; r < this.r; r += 0.1) {
      let x = this.x + cos(angle) * r
      let y = this.y + sin(angle) * r
      vertex(x, y)
      angle += increment
    }

    endShape()
  }

  ...
}

Passo 3

Para adicionarmos cores em alguns dos espirais, teremos que mudar o método show para usar linhas ao invés de vértices, já que a cor irá mudando do início até o fim da espiral.

class Circle {
  ...

  show() {
    let angle = 0
    let increment = 0.2

    noFill()
    stroke(255)
    strokeWeight(2)

    let prev
    for (let r = 0; r < this.r; r += 0.1) {
      let x = this.x + cos(angle) * r
      let y = this.y + sin(angle) * r
      
      if (prev) {
        line(prev.x, prev.y, x, y)
      } else {
        point(x, y)
      }

      prev = createVector(x, y)
      angle += increment
    }
  }

  ...
}

Então alteramos o show novamente para adicionar uma cor de stroke aleatória e mudamos o colorMode do nosso projeto para HSB

function setup() {
  colorMode(HSB)
  ...
}

...

class Circle {
  constructor(x, y) {
    ...
    this.colorRange = random(0, 360)
  }
  
  ...
  
  show() {
    let angle = 0
    let increment = 0.2

    noFill()
    stroke(255)
    strokeWeight(2)

    let prev
    for (let r = 0; r < this.r; r += 0.1) {
      let x = this.x + cos(angle) * r
      let y = this.y + sin(angle) * r
      
      if (this.colorRange === 0) {
        stroke(255)
      } else {
        stroke(r * 3 + this.colorRange, height, height)
      }
      
      if (prev) {
        line(prev.x, prev.y, x, y)
      } else {
        point(x, y)
      }

      prev = createVector(x, y)
      angle += increment
    }
  }

  ...
}

Passo 4

O último passo é definir alguns circulos onde apenas espirais dentro deles serão coloridos. Primeiro geramos a lista de áreas coloridas:

let colorCircles = []

function setup() {
  ...
  
  for (let i = 0; i < 4; i++) {
    colorCircles.push({
      x: random(0, width),
      y: random(0, height),
      r: random(10, 30)
    })
  }
}

Na sequência atualizamos o método grow para atualizar a cor da espiral caso esteja dentro de um dos círculos coloridos.


class Circle {
  ...

  grow() {
    if (this.growing) {
      this.r += 1
      
      if (this.colorRange > 0) return
      for (let i = 0; i < colorCircles.length; i++) {
        const other = colorCircles[i]
        var d = dist(this.x, this.y, other.x, other.y)
        var distance = this.r + other.r * 2
        if (d - 4 < distance) {
          this.colorRange = random(0, 360)
        }
      }
    }
  }

  ...
}

Próximos passos

Como podem ver na imagem base e na final, nossos círculos coloridos não são perfeitos. Isso acontece porque só verificamos se as espirais encostam em uma das áreas coloridas, mas não paramos de crescê-las quando elas ultrapassam.

Uma ideia para brincar mais um pouco com esse código seria adicionar essa validação para que não sejam desenhadas espirais entre as áreas coloridas e preto e brancas.

Código completo

Rotação - Experimentos em Programação Criativa - 4

Wed, 30 Aug 2023 22:00:00 GMT

Inspiração

A imagem que tentei replicar através de código desta vez é a seguinte:

E o meu resultado é o seguinte:

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Começando pelo passo mais simples, desenhando um semicírculo. O próprio p5 possui uma função auxiliar para isso: arc, deixando esse passo bastante simples.

function setup() {
  createCanvas(400, 400)
}

function draw() {
  noFill()
  stroke(255)
  background(0)
  
  const x = width / 2
  const y = height / 2
  
  arc(x, y, 50, 50, 0, HALF_PI)
}

Passo 2

Na sequência adicionamos uma rotação para esse semicírculo. A forma mais simples é apenas incrementando a ponto de início e fim do com o valor do frameCount. Como os frames atualizam muito rápidos, podemos reduzir o valor para uma variável de velocidade.

function draw() {
  noFill()
  stroke(255)
  background(0)
  
  const x = width / 2
  const y = height / 2
  
  const velocity = frameCount / 10
  const arcStart = velocity
  const arcEnd = HALF_PI + velocity
  
  arc(x, y, 50, 50, arcStart, arcEnd)
}

Passo 3

Último passo é adicionarmos mais arcos. Faremos isso dentro de um loop simples

function draw() {
  noFill()
  stroke(255)
  background(0)
  
  const x = width / 2
  const y = height / 2
  
  const velocity = frameCount / 10
  const arcStart = velocity
  const arcEnd = HALF_PI + velocity
  
  for (let i = 0; i < 150; i++) {
    const radius = 50 + i * 5
    arc(x, y, radius, radius, arcStart, arcEnd)
  }
}

Adicionando diferentes pontos de início e velocidades para cada arco, conseguimos fazer um efeito semelhante ao desejado

function draw() {
  noFill()
  stroke(255)
  background(0)
  
  const x = width / 2
  const y = height / 2
    
  for (let i = 0; i < 150; i++) {
    const radius = 50 + i * 5
    const offsetPositions = 8
    const offset = i % offsetPositions * (HALF_PI / (offsetPositions / 2))

    const velocity = frameCount / (10 * (i % 3) + 10)

    const arcStart = velocity + offset
    const arcEnd = HALF_PI + velocity + offset

    if (i % 2 === 0) {
      arc(x, y, radius, radius, -arcEnd, -arcStart)
    } else {
      arc(x, y, radius, radius, arcStart, arcEnd)
    }
  }
}

Próximos passos

Esse código foi bastante simples, mas ainda tem várias formas de brincar com ele, como mudando a largura e distancias entre os arcos, ou até adicionando cores.

Código completo

Movimento - Experimentos em Programação Criativa - 3

Tue, 22 Aug 2023 22:00:00 GMT

Inspiração

A imagem que tentei replicar através de código desta vez é a seguinte:

E o meu resultado é o seguinte:

Um pouco longe do resultado desejado, mas já foi muito bom para utilizar algoritmos e estruturas de dados diferentes e praticar um pouquinho com o loop de desenho do p5.

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Começando por um passo que parece simples mas já precisará de um pouco e matemática, vamos tentar primeiro desenhar a linha central que fica estática. Basicamente temos um ponto no centro da imagem, com uma barra em 45º.

Como todas as barras serão movimentadas com base no seu ponto central, e terão um ângulo e comprimento diferentes, podemos criar uma função que receba a coordenada central, um ângulo e um comprimento para definir quais são as coordenadas das extremidades da linha. Assim só precisamos desenhar a linha entre os dois pontos.

Conseguimos fazer isso com a seguinte função:

function calculateLinePoints(center, angle, lineSize) {
  // Converter o ângulo de graus para radianos
  const angleInRadians = (angle * Math.PI) / 180

  // Calcular a metade da linha
  const halfLineSize = lineSize / 2

  // Calcular os componentes x e y da linha
  const xComponent = Math.cos(angleInRadians) * halfLineSize
  const yComponent = Math.sin(angleInRadians) * halfLineSize

  // Calcular os outros dois pontos da linha
  const point1 = {
    x: center.x - xComponent,
    y: center.y - yComponent
  }

  const point2 = {
    x: center.x + xComponent,
    y: center.y + yComponent
  }

  return [point1, point2]
}

E desenhar na tela com o método draw do p5:

const SIZE = 500

function setup() {
  createCanvas(SIZE, SIZE)
}

function draw() {
  background(220)
  
  stroke('green')
  strokeWeight(10)
  
  const coord = { x: width / 2, y: height / 2, }

  point(coord.x, coord.y)

  const [point1, point2] = this.calculateLinePoints(coord, 45, 300)

  strokeWeight(2)
  line(point1.x, point1.y, point2.x, point2.y)
}

Assim temos nossa primeira linha

Passo 2

Como as linhas terão conexão umas com as outras decidi usar classes para esse projeto. Para isso criarei uma classe para desenhar as linhas, para facilitar o trabalho.
Com um pouco de refatoração, podemos atualizar o código anterior para:

function draw() {
  background(220);
  
  const r = new Regua({ x: width / 2, y: height / 2, }, 45, 300)
  r.draw()
}

class Regua {
  constructor(coord, angle, length) {
    this.coord = coord
    this.angle = angle
    this.length = length
  }
  
  draw() {
    stroke('green')
    strokeWeight(10)

    point(this.coord.x, this.coord.y)

    const [point1, point2] = this.calculateLinePoints(this.coord, this.angle, this.length)

    strokeWeight(2)
    line(point1.x, point1.y, point2.x, point2.y)
  }
  
  calculateLinePoints(center, angle, lineSize) {
    // Converter o angulo de graus para radianos
    const angleInRadians = (angle * Math.PI) / 180

    // Calcular a metade da linha
    const halfLineSize = lineSize / 2

    // Calcular os componentes x e y da linha
    const xComponent = Math.cos(angleInRadians) * halfLineSize
    const yComponent = Math.sin(angleInRadians) * halfLineSize

    // Calcular os outros dois pontos da linha
    const point1 = {
      x: center.x - xComponent,
      y: center.y - yComponent
    }

    const point2 = {
      x: center.x + xComponent,
      y: center.y + yComponent
    }

    return [point1, point2]
  }
}

Passo 3

Podemos então adicionar um novo parâmetros para a nossa classe, para desenharmos as linhas seguintes: a linha pai.

function draw() {
  ...

  const r2 = new Regua({ x: width / 2, y: height / 2, }, 0, 300, r)
  r2.draw()
}

class Regua {
  constructor(coord, angle, length, parent) {
    ...
    this.parent = parent
  }
}

Como vamos precisar que a linha ande, não podemos sempre redesenhá-la na mesma coordenada. Para isso decidi mudar nosso código para criar as réguas no método setup (que só é executado uma vez), e somente desenhá-los no método draw.

const RULERS = []

function setup() {
  createCanvas(SIZE, SIZE)
    
  const r = new Regua({ x: width / 2, y: height / 2, }, 45, 300)  
  const r2 = new Regua({ x: width / 2, y: height / 2, }, 0, 300, r)
  
  RULERS.push(r)
  RULERS.push(r2)
}

function draw() {
  background(220)

  RULERS.forEach(ruler => {
    ruler.draw()
  })
}

Passo 4

Agora podemos começar com a parte de movimentação. Podemos criar uma função walk em nossa classe de linha, para movimentá-la dentro do loop de desenho. Para encontrar o próximo ponto da linha

class Regua {
  walk() {
    if (!this.parent) return
    
    // Selecionar as extremidades da linha pai
    const [point1, point2] = this.calculateLinePoints(this.parent.coord, this.parent.angle, this.parent.length)

    // Calcular qual percentual da linha pai será o próximo ponto a seguir. Utilizamos o resto da divisão entre o número de loops e o dobro do tamanho do pai, e mapeamos para que a linha ande nas duas direções
    const percent = map(frameCount % this.parent.length * 2, 0, this.parent.length, -100, 0)
    
    // Atualizar a coordenada
    this.coord = this.getPointOnLine(point1, point2, Math.abs(percent))
  }
  
  getPointOnLine(coordinate1, coordinate2, percent) {
    // Calcular diferença entre coordenadas x e y
    const dx = coordinate2.x - coordinate1.x;
    const dy = coordinate2.y - coordinate1.y;

    // Calcular o ponto na linha com base no percentual
    const point = {
      x: coordinate1.x + (dx * percent) / 100,
      y: coordinate1.y + (dy * percent) / 100
    };

    return point;
  }
}

E por fim chamamos o método de desenho dentro do loop:

function draw() {
  background(220)

  RULERS.forEach(ruler => {
    ruler.draw()
    ruler.walk()
  })
}

Passo 5

Um novo incremento que podemos fazer em nossa linha é configurar também a velocidade em que ela se move, já que cada linha terá uma velocidade diferente.

class Regua {
  constructor(coord, angle, length, parent, velocity = 1) {
    ...
    this.velocity = velocity
  }
  
  walk() {
    ...

    const v = frameCount * this.velocity
    
    // Calcular qual percentual da linha pai será o próximo ponto a seguir. Utilizamos o resto da divisão entre o número de loops e o dobro do tamanho do pai, e mapeamos para que a linha ande nas duas direções
    const percent = map(v % this.parent.length * 2, 0, this.parent.length, -100, 0)
    
    ...
  }
}

E então podemos atualizar o o método setup para criar várias linhas

const RULERS = []
const RULER_COUNT = 6

function setup() {
  createCanvas(SIZE, SIZE)
    
  const base = new Regua({ x: width / 2, y: height / 2, }, 45, 300)  
  RULERS.push(base)
  
  for (let i = 0; i < RULER_COUNT - 1; i++) {
    const parent = RULERS[RULERS.length - 1]
    const angle = random(0, 180)
    const length = random(50, SIZE / 2)
    const velocity = random(0.3, 1.5)

    const r = new Regua(base.coord, angle, length, parent, velocity)

    RULERS.push(r)
  }
}

Passo 6

A última linha será a responsável por adicionar o desenho na tela. Podemos ter uma propriedade para indentificarmos a linha que ela deve também desenhar a curva:


function setup() {
  ...
  
  for (let i = 0; i < RULER_COUNT - 1; i++) {
    ...
    const shouldDrawCurve = i === RULER_COUNT - 2

    const r = new Regua(base.coord, angle, length, parent, velocity, shouldDrawCurve)
    ...
  }
}

class Regua {
  constructor(coord, angle, length, parent, velocity = 1, shouldDrawCurve = false) {
    ...
    this.shouldDrawCurve = shouldDrawCurve
  }

  ...
}

Na sequência criamos uma lista para os pontos da curva em que preenchemos a cada passo da régua, e chamamos uma função para desenhar a curva após desenharmos a linha:


class Regua {
  constructor(coord, angle, length, parent, velocity = 1, shouldDrawCurve = false) {
    ...
    this.curvePath = []
  }
  
  draw() {
    ...
    
    if (this.shouldDrawCurve) {
      this.drawCurve()
    }
  }
  
  walk() {
    ...
    
    if (this.shouldDrawCurve) {
      const [point1] = this.calculateLinePoints(this.coord, this.angle, this.length)

      this.curvePath.push(point1)
    }
  }
  
  drawCurve() {
    noFill()
    stroke('black')
    strokeWeight(2)

    beginShape()
    this.curvePath.forEach((coord) => {
      curveVertex(coord.x, coord.y)
    })
    endShape()
  }
}

Quase lá. A curva não parece tanto com uma curva.

Passo 7

Assistindo a esse vídeo de Dave Pagurek, uma forma que é apresentada para resolver esse problema é não adicionar em nossa lista de pontos da curva a extremidade atual da linha, e sim um percentual de distância entre a extremidade e o ponto anterior.

O vídeo faz um papel muito melhor em explicar esse algoritmo, mas o código simples:

class Regua {
  walk() {
    ...
    
    if (this.shouldDrawCurve) {
      const [point1] = this.calculateLinePoints(this.coord, this.angle, this.length)
      const lastPoint = this.curvePath[this.curvePath.length - 1]

      if (!lastPoint) {
        this.curvePath.push(point1)
        return
      }
        
      const point = createVector(lastPoint.x, lastPoint.y).lerp(createVector(point1.x, point1.y), 0.1)
      this.curvePath.push({ x: point.x, y: point.y })
    }
  }
}

Próximos passos

Algumas outras ideias para evoluir essa brincadeira seriam:

Alterar a grossura da curva, quando a velocidade de desenho diminui
Conectar a curva com a extremidade da linha, para que o desenho seja mais suave (sugestões de como implementar ambas ideias são também no vídeo mencionado acima)

Código completo

Gráfico - Experimentos em Programação Criativa - 2

Thu, 17 Aug 2023 22:00:00 GMT

Inspiração

A imagem que tentei replicar através de código desta vez é a seguinte:

E o meu resultado é o seguinte:

Bastante diferente do original, minha ideia era de fazer algo que a cada atualização mudasse o estilo, com quadrados e pontos maiores ou menores aleatóriamente.

Implementação

Usarei novamento o editor do p5 para essa implementação.

Passo 1

Começando de forma simples, vamos apenas adicionar a borda. Adicionei um cógigo boilerplate de início, definindo as corees do fundo e stroke, o tamanho da margem.

let strokeColor = 10
let backgroundColor = 245
let frameMargin // distância entre o quadro e a borda do canvas

function setup() {
  createCanvas(windowWidth, windowHeight)
  frameMargin = round(random(50, 150))
}

function draw() {
  background(backgroundColor)
  drawFrame()
  noLoop()
}

function drawFrame() {
  noFill()
  strokeWeight(4)
  stroke(strokeColor)
  const startAt = [frameMargin, frameMargin]
  const size = [windowWidth - frameMargin * 2, windowHeight - frameMargin * 2]

  rect(...startAt, ...size)
  
  return [startAt, size]
}

Passo 2

O segundo passo foi adicionar os pontos dentro do quadro. Criei primeiro uma função para gerar os pontos, utilizando alguns parâmetros para configurar os posicionamentos e tamanho dos pontos.

let padding // distância entre o quadro e os pontos
let dotRadius // tamanho dos pontos
let dotPadding // distância entre os ponto

function setup() {
  ...
  padding = round(random(-100, 100))
  dotRadius = random(0.1, 10)
  dotPadding = round(random(15, 30))
}

function getDots(frameBorders) {
  const startAt = [
    frameBorders[0][0] + padding,
    frameBorders[0][1] + padding
  ]
  const endAt = [
    frameBorders[0][0] + frameBorders[1][0] - padding,
    frameBorders[0][1] + frameBorders[1][1] - padding
  ]
  
  let curLine = startAt[0]
  let col = startAt[1]
  const dots = []
  
  while (curLine < endAt[0]) {
    const columns = []
    while (col < endAt[1]) {
      const x = curLine + dotRadius / 2
      const y = col + dotRadius / 2
      columns.push(createVector(x, y))
      col += dotPadding
    }
    curLine += dotPadding
    col = startAt[1]
    dots.push(columns)
  }
  
  return dots
}

E com esses pontos, podemos fácilmente desenhá-los na tela. Adicionei também um parâmetro para definir se os círculos devem ser preenchidos ou não.

let shouldFill // os pontos devem ser preenchidos?

function setup() {
  ...
  shouldFill = random() > 0.5
}

function draw() {
  ...
  const dots = getDots(frameBorders)
  drawDots(dots)
  ...
}

function drawDots(dots) {
  if (shouldFill) fill(strokeColor)
  
  for (let i = 0; i < dots.length; i++) {
    for (let j = 0; j < dots[i].length; j++) {
      circle(dots[i][j].x, dots[i][j].y, dotRadius)
    }
  }
}

Assim podemos ter alguns resultados diferentes, como os seguintes

Passo 3

O terceiro e último passo é desenhar a linha que atravessa o centro do quadro. O algoritmo para esse foi algo bem simples:

Primeiro encontramos o centro da tela e selecionamos o ponto da primeira coluna;
Enquanto tiver uma coluna a direita, escolhemos aleatóriamente um ponto acima ou abaixo;
Desenhamos uma linha entre os dois pontos

O código para isso pode ser visto abaixo

let lineRadius // largura da linha

function setup() {
  ...
  lineRadius = random(1, 20)
}

function draw() {
  ...
  drawWalker(dots)
  ...
}

function drawWalker(dots, startAtLine) {
  stroke(strokeColor)
  noFill()
  strokeWeight(lineRadius)
  strokeCap(ROUND) // para evitar que a linha fique com as pontas quadradas
  strokeJoin(ROUND) // para evitar que a linha fique com as juntas quadradas
  
  const middle = Math.round(dots[0].length / 2)
  let selectedLine = middle
  let selectedCol = 0
  let previousLine = middle
    
  beginShape()
  while (selectedCol < dots.length) {
    if (!dots[selectedCol] || !dots[selectedCol][selectedLine]) break
    const dot = dots[selectedCol][selectedLine]
    
    if (previousLine !== selectedLine) {
      const prevDot = dots[selectedCol][previousLine]
      vertex(prevDot.x, prevDot.y) // precisamos disso para que os pontos não sejam conectados diretamente, mas em 90º
    }
    
    vertex(dot.x, dot.y)

    previousLine = selectedLine
    const next = Math.round(random(-3, 3))
    selectedLine += next

    
    if (selectedLine < 0) selectedLine = 0
    if (selectedLine === dots[0].length) selectedLine = dots[0].length -1

    selectedCol++
  }
  endShape()
}

Próximos passos

Algumas outras ideias para evoluir essa brincadeira seriam:

Adicionar fendas ou laços como na imagem original, onde aleatóriamente poderiams quebrar a linha
Usar uma biblioteca, como o dat.gui para configurar as variáveis em tempo real, sem precisar executar o algoritmo múltiplas vezes para novos resultados

Código completo

Bactéria - Experimentos em Programação Criativa

Tue, 01 Aug 2023 22:00:00 GMT

Há alguns anos passei a ter um interesse por programação criativa, e apesar de consumir bastante conteúdo sobre o tema, foram poucas as vezes que de fato implementei algo.

Com várias imagens e gifs de inspiração salvas nesse tempo, quero começar a tentar implementar cada uma dessas ideias. Esses artigos são principalmente criados como uma forma de catalogar o processo de implementação para referencia futura quando eu estiver desenvolvendo novas coisas.

Inspiração

A primeira imagem que tentei replicar através de código é essa:

E o meu resultado é o seguinte:

Implementação

Para implementação dos algoritmos, tenho usado o editor do p5.

Este editor utiliza a própria biblioteca do p5.js, e já conta com um código boilerplate com duas funções: setup, que é disparado antes que qualquer coisa seja desenhada no canvas, e draw que é o loop onde atualizamos o canvas.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Passo 1

Decidi começar de forma simples, apenas adicionando um polígono no centro da imagem. O p5.js possui algumas funções auxiliares para circulos e quadrados, mas para polígonos o mais fácil é começar adicionando pontos na tela e depois conectá-los.

Como queremos fazer polígonos regulares, onde todos os lados sejam iguais, podemos calcular os pontos com base no seno e coseno de um ângulo, e incrementar esse angulo com base na quantidade de lados

function draw() {
  noLoop() // para evitar que a tela atualize muitas vezes
  background(255)
  strokeWeight(5) // grossura dos pontos/linhas
  
  const sides = 8
  const radius = 100
  let angle = 0
  
  for (let i = 0; i < sides; i++) {
    const pointX = radius * sin(angle)
    const pointY = radius * cos(angle)
    
    point(pointX + width/2, pointY + height/2)
    
    angle = angle + TWO_PI / sides
  }
}

Para conectar os pontos, podemos ao invés de usar a função point(x, y), usarmos o vertex(x, y) em conjunto com beginShape() e endShape(CLOSE).

function draw() {
  noLoop()
  background(255)
  strokeWeight(5)
  noFill() // Para que o polígono não seja preenchido
  
  const vertexes = getPoligonVertexes()
  
  beginShape()
  for (let i = 0; i < vertexes.length; i++) {
    vertex(vertexes[i].x, vertexes[i].y)
  }
  endShape(CLOSE)
}

function getPoligonVertexes(radius = 100, sides = 8) {
  const vertexes = []
  let angle = 0
  
  for (let i = 0; i < sides; i++) {
    const pointX = radius * sin(angle)
    const pointY = radius * cos(angle)
    
    const vector = createVector(pointX + width / 2, pointY + height / 2)
    vertexes.push(vector)
    
    angle = angle + TWO_PI / sides
  }

  return vertexes
}

Passo 2

O próximo passo foi adicionar os tentáculos saindo do polígono. Pensei em duas formas que isso poderia ser feito: 1. selecionar pontos aleatórios ao redor do polígono e conectá-los à extremidade mais próxima, ou 2. selecionar pontos aleatórios nas extremidades e caminhar até algum ponto mais distante.

Em minha implementação escolhei a primeira opção. Para isso criei uma função que gera pontos a partir de um ângulo aleatório, e posiciono ele em um raio próximo ao raio de nosso polígono.

function draw() {
  ...

  const dots = getDots()
  
  for (let i = 0; i < dots.length; i++) {
    point(dots[i].x, dots[i].y)
  }
}

function getDots(count = 100) {
  const minRadius = width / 5
  const maxRadius = width / 3
  const dots = []
  for (let i = 0; i < count; i++) {
    const angle = Math.random() * TWO_PI
    const x = Math.cos(angle) * random(minRadius, maxRadius) + width / 2
    const y = Math.sin(angle) * random(minRadius, maxRadius) + height / 2

    const vector = createVector(x, y)
    dots.push(vector)
  }
  return dots
}

Para conectar esses pontos ao polígono pedi ajuda para o ChatGPT. Aparentemente a forma mais simples é encontrar o ponto de menor distância entre um vértice e um segmento de linha, e fazer isso para todas as arestas de um polígono. Assim conseguimos encontrar qual o ponto mais próximo do vértice e do polígono. O próprio ChatGPT me ajudou criando o código para essa etapa:

function getClosestPolygonVertex(vertex, polygonVertexes = []) {
  let closest
  let closestDistance = Infinity

  for (let i = 0; i < polygonVertexes.length; i++) {
    // Loop entre os vertices do polígonos, pegando o atual e o seguinte, que formam a linha
    const isLast = (i+1) === polygonVertexes.length
    const v1 = polygonVertexes[i]
    const v2 = polygonVertexes[isLast ? 0 : i+1]
    
    const closestPoint = getClosestPointFromVertexToLine(vertex, v1, v2)
    const distance = distanceFromVertexes(vertex, closestPoint)
    
    if (distance < closestDistance) {
      closestDistance = distance
      closest = closestPoint
    }
  }
  
  return closest
}

function getClosestPointFromVertexToLine(vertex, lineStart, lineEnd) {
  // Calculate the vector representing the line segment
  const lineSegmentVector = createVector(lineEnd.x - lineStart.x, lineEnd.y - lineStart.y)
  
  // Calculate the vector from the line segment start to the vertex
  const vertexVector = createVector(vertex.x - lineStart.x, vertex.y - lineStart.y)

  // Calculate the dot product of the line segment vector and the vertex vector
  const dotProduct = lineSegmentVector.x * vertexVector.x + lineSegmentVector.y * vertexVector.y;

  // Calculate the squared length of the line segment vector
  const squaredLength = lineSegmentVector.x * lineSegmentVector.x + lineSegmentVector.y * lineSegmentVector.y;

  // Calculate the parameter value of the closest point on the line segment to the vertex
  const t = Math.max(0, Math.min(1, dotProduct / squaredLength));

  // Calculate the coordinates of the closest point on the line segment
  const closestPoint = createVector(lineStart.x + t * lineSegmentVector.x, lineStart.y + t * lineSegmentVector.y)

  return closestPoint
}

function distanceFromVertexes(vertex1, vertex2) {
  return Math.sqrt(
    (vertex1.x - vertex2.x) * (vertex1.x - vertex2.x) +
    (vertex1.y - vertex2.y) * (vertex1.y - vertex2.y)
  )
}

Com essas funções, podemos atualizar o método draw para desenhar a linha entre os pontos e o polígono:

function draw() {
  ...
  
  const dots = getDots()

  for (let i = 0; i < dots.length; i++) {
    // Desenhando o ponto
    strokeWeight(10)
    point(dots[i].x, dots[i].y)

    // Desenhando a linha
    strokeWeight(2) // Alterando a largura entre o ponto e a linha
    beginShape()
    vertex(dots[i].x, dots[i].y)
    const closestPolygonVertex = getClosestPolygonVertex(dots[i], vertexes)
    vertex(closestPolygonVertex.x, closestPolygonVertex.y)
    endShape(CLOSE) 
  }
}

Passo 3

O terceiro e último passo de minha implementação foi deixas os tentáculos curvados, ao invés de simples linhas retas. Para isso, uma forma fácil é segmentar a reta em n pontos e movê-los de forma aleatória para uma direção próxima.

Para segmentar a linha, pedi uma nova ajuda ao ChatGPT:

function segmentizeLine(lineSegmentStart, lineSegmentEnd, segmentCount = 10) {
  const points = [];
  const dx = (lineSegmentEnd.x - lineSegmentStart.x) / (segmentCount - 1);
  const dy = (lineSegmentEnd.y - lineSegmentStart.y) / (segmentCount - 1);

  for (let i = 0; i < segmentCount; i++) {
    let x = lineSegmentStart.x + dx * i;
    let y = lineSegmentStart.y + dy * i;

    points.push({ x, y });
  }

  return points;
}

Fiz uma leve alteração para mover os segmentos centrais:


function segmentizeLine(lineSegmentStart, lineSegmentEnd, segmentCount = 10) {
  const points = [];
  const dx = (lineSegmentEnd.x - lineSegmentStart.x) / (segmentCount - 1);
  const dy = (lineSegmentEnd.y - lineSegmentStart.y) / (segmentCount - 1);

  for (let i = 0; i < segmentCount; i++) {
    let x = lineSegmentStart.x + dx * i;
    let y = lineSegmentStart.y + dy * i;

    // Não queremos mover a posição do primeiro vértice e do vértice que encosta no polígono
    if (i > 0 && i < segmentCount-1) {
      x += random(0, 15)
      y += random(0, 15)
    }
    
    // Para utilizar a função `curveVertex` precisamos do primeiro e último vértices duplicados
    if (i === 0 || i === segmentCount-1) {
      points.push(createVector(x, y));  
    }
    
    points.push(createVector(x, y));
  }

  return points;
}

E utilizando essa função junto com o curveVertex, conseguimos ter os tentáculos curvos:

function draw() {
  ...
  
  const dots = getDots()

  for (let i = 0; i < dots.length; i++) {
    stroke('black')
    strokeWeight(10)
    point(dots[i].x, dots[i].y)

    // Desenhando a linha
    strokeWeight(2) // Alterando a largura entre o ponto e a linha
    const closestPolygonVertex = getClosestPolygonVertex(dots[i], vertexes)
    const segments = segmentizeLine(dots[i], closestPolygonVertex, 6)
    beginShape()
    for (let j = 0; j < segments.length; j++) {
      curveVertex(segments[j].x, segments[j].y)
    }
    endShape() 
  }
}

Assim tempos o resultado final:

Próximos passos

Para chegar mais próximo do original, algumas possível mudanças seriam:

Alterar a forma como adicionamos aleatóriedade nos segmentos do tentáculo para ficarem menos distantes, talvez utilizando noise ao invés de random
Alterar a aleatóriedade dos pontos para que não sejam gerados pontos tão próximos do polígono

Por mais que ainda possa ser melhorado, fiquei satisfeito com esse resultado e empolgado para começar um próximo.

Código completo

QRCode Playground

Tue, 23 May 2023 22:00:00 GMT

Circles

Thu, 29 Jul 2021 22:00:00 GMT

Esta é uma biblioteca de círclos. Você pode usá-la para encontrar qual círculo serve melhor para sua vontade.

Obs.: Ao contrário do esperado, alguns círculos podem não girar corretamente.

Ideias bobas funcionam

Mon, 28 Jun 2021 22:00:00 GMT

Por bastante tempo eu evitei fazer atividades no meu tempo livre por achar que não serviriam de nada, ou não trariam nenhum ganho. A grande maioria dessas atividades era relacionada a programação.

Programar no tempo livre sempre foi um dilema para mim. Por mais que eu goste de programar, já faço isso por mais de oito horas todos os dias, e fazer isso no tempo livre só me deixava com mais desgosto pela atividade.

A criação desse site foi o que mudou essa mentalidade para mim. Com o site criei a ideia de que não iria usar meu tempo livre para “aprender uma tecnologia nova” e sim para “experimentar ideias que passaram pela minha cabeça”.

Com isso, ao invés de eu tentar fazer um aplicativo para agendamentos, um gerenciador de finanças ou um clone do Netflix, passei a fazer as ideias mais toscas que tinha simplesmente para verificar se era possível ou viável.

Com isso acabei fazendo muita coisa no último ano, desde pequenos experimentos de arte generativa até uma banda de mariachis.

Esses pequenos projetos não só me ensinaram bastante coisa como serviram para continuar praticando e sendo um passatempo que me diverte.

Não acho que fazer clones de sites famosos, ou passar seu tempo livre estudando uma tecnologia seja algo inútil, mas com certeza você estará gastando seu tempo de uma forma melhor se fizer algo porque tem vontade e não por uma “obrigação pessoal” de continuar aprendendo.

Font Challenge

Wed, 16 Jun 2021 22:00:00 GMT

CSS é uma linguagem que está sempre em evolução, e a cada vez que pesquiso encontro novas propriedades e atributos que não fazia ideia existir.

Alguns dos que fiquei mais surpreso foi em relação a fontes, que podem auxiliar bastante e evitar a utilização de JavaScript de forma desnecessária.

Conhecendo essas novas propriedades, criei então o Font Challenge, um pequeno jogo para me desafiar a relembrar cada uma dessas propriedades.

Neste desafio, cada nível apresentará uma atualização para o texto e o seu objetivo é tentar encontrar qual o atributo CSS necessário para essa atualização.

No começo parecerá fácil, mas quero ver você conseguir chegar até o final sem pedir ajuda.

CSS Star Wars

Thu, 20 May 2021 22:00:00 GMT

Todos sabem que Star Wars foi um filme revolucionário para a sua época. Já em sua abertura o filme chama atenção com uma introdução em letras amarelas e uma perspectiva que faz com que o texto se perca no espaço.

Apesar de já replicada infinitas vezes, o objetivo desse artigo também é tentar replicar essa instrodução utilizando apenas CSS e HTML, sem a utilização de Javascript.

Cor de fundo

Para replicarmos a introdução do Star Wars vamos começar com pequenos passos.

Primeiro, simplesmente mudamos o background da nossa página para preto. Vamos nessa etapa mudar temporariamente a fonte para branco para evitar que o texto suma no nosso espaço.

Essas alterações podem ser feitas apenas com a seguinte classe:

.black-sky {
  background-color: black;
  color: white;
}

Estrelas

Na sequência adicionamos as estrelas do nosso espaço.

Para as estrelas, vamos utilizar um truque famoso do CSS utilizando o box-shadow. O truque consiste em basicamente criar uma div de um pixel de largura e altura (o tamanho de nossas estrelas), posicionado de forma absoluta na nossa tela.

Essa div terá diversas sombras de cor branca em posições espalhadas da tela, que terão o mesmo tamanho da nossa div. Dessa forma temos o efeito de várias estrelas brancas. Este artigo explica mais profundamente como esse truque funciona.

Esse truque pode ser expandido, adicionando outras divs com tamanhos maiores de estrelas, ou com efeitos de brilho.

.stars {
  position: absolute;
  top: 100px;
  left: -700px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 970px 909px #FFF , 1px 149px #FFF , 736px 348px #FFF , 1352px 1333px #FFF , 57px 1598px #FFF , 1007px 332px #FFF , 1474px 782px #FFF , 726px 826px #FFF , 768px 344px #FFF , 1673px 1878px #FFF , 1970px 722px #FFF , 123px 79px #FFF , 1137px 1554px #FFF , 490px 521px #FFF , 1277px 1346px #FFF , 14px 1701px #FFF , 114px 1127px #FFF , 849px 20px #FFF , 1697px 199px #FFF , 1013px 741px #FFF , 1643px 1821px #FFF , 1335px 1355px #FFF , 825px 290px #FFF , 1670px 1346px #FFF , 345px 1925px #FFF , 1063px 1880px #FFF , 265px 1203px #FFF , 1328px 493px #FFF , 1152px 806px #FFF , 661px 602px #FFF , 520px 1515px #FFF , 1256px 1907px #FFF , 1882px 1525px #FFF , 1024px 239px #FFF , 1959px 1343px #FFF , 623px 1380px #FFF , 1717px 1542px #FFF , 1318px 660px #FFF , 1586px 1581px #FFF , 340px 284px #FFF , 553px 1556px #FFF , 609px 800px #FFF , 613px 244px #FFF , 927px 1327px #FFF , 957px 1869px #FFF , 1029px 575px #FFF , 1851px 1438px #FFF , 1043px 819px #FFF , 1297px 1312px #FFF , 1361px 1224px #FFF , 974px 344px #FFF , 715px 1931px #FFF , 1583px 1370px #FFF , 1359px 1395px #FFF , 433px 1356px #FFF , 1818px 197px #FFF , 973px 1115px #FFF , 353px 1356px #FFF , 558px 1060px #FFF , 1584px 414px #FFF , 1272px 1404px #FFF , 1792px 22px #FFF , 147px 1524px #FFF , 751px 1032px #FFF , 1945px 700px #FFF , 366px 241px #FFF , 1119px 532px #FFF , 1029px 703px #FFF , 575px 888px #FFF , 1568px 1488px #FFF , 1527px 1002px #FFF , 471px 783px #FFF , 90px 1160px #FFF , 1646px 1805px #FFF , 714px 667px #FFF , 644px 1716px #FFF , 1917px 1700px #FFF , 1241px 1645px #FFF , 1285px 1327px #FFF , 1560px 132px #FFF , 1645px 1753px #FFF , 1703px 466px #FFF , 1099px 929px #FFF , 1629px 1954px #FFF , 1103px 338px #FFF , 1427px 1660px #FFF , 652px 1031px #FFF , 958px 1744px #FFF , 1015px 1712px #FFF , 1452px 1076px #FFF , 229px 1483px #FFF , 84px 1847px #FFF , 1671px 1333px #FFF , 1600px 345px #FFF , 1307px 168px #FFF , 915px 921px #FFF , 1367px 1826px #FFF , 1085px 1685px #FFF , 1514px 753px #FFF , 859px 1015px #FFF , 1871px 1239px #FFF , 1522px 381px #FFF , 981px 906px #FFF , 1207px 712px #FFF , 1197px 820px #FFF , 1573px 1186px #FFF , 864px 1824px #FFF , 1534px 1340px #FFF , 629px 607px #FFF , 1409px 997px #FFF , 882px 1459px #FFF , 150px 310px #FFF , 785px 1231px #FFF , 884px 523px #FFF , 1963px 1004px #FFF , 1529px 1395px #FFF , 632px 665px #FFF , 388px 1668px #FFF , 1468px 810px #FFF , 1165px 1575px #FFF , 1498px 252px #FFF , 275px 353px #FFF , 1171px 350px #FFF , 524px 1698px #FFF , 1652px 1900px #FFF , 1800px 1788px #FFF , 1743px 695px #FFF , 1806px 516px #FFF , 537px 1528px #FFF , 127px 763px #FFF , 1643px 1043px #FFF , 1717px 137px #FFF , 1553px 952px #FFF , 183px 1507px #FFF , 770px 322px #FFF , 241px 1999px #FFF , 148px 244px #FFF , 118px 1096px #FFF , 1183px 100px #FFF , 1158px 53px #FFF , 371px 735px #FFF , 1090px 1474px #FFF , 1145px 616px #FFF , 1300px 236px #FFF , 407px 672px #FFF , 1012px 142px #FFF , 100px 329px #FFF , 219px 506px #FFF , 482px 349px #FFF , 1397px 1560px #FFF , 566px 750px #FFF , 562px 1403px #FFF , 1154px 961px #FFF , 559px 169px #FFF , 568px 503px #FFF , 184px 1898px #FFF , 256px 793px #FFF , 668px 66px #FFF , 38px 544px #FFF , 832px 702px #FFF , 1676px 1579px #FFF , 1996px 910px #FFF , 806px 1313px #FFF , 1063px 79px #FFF , 539px 1035px #FFF , 552px 1740px #FFF , 774px 632px #FFF , 1453px 1152px #FFF , 491px 1160px #FFF , 1667px 793px #FFF , 655px 316px #FFF , 609px 470px #FFF , 1330px 53px #FFF , 420px 1814px #FFF , 1155px 447px #FFF , 1754px 360px #FFF , 913px 1425px #FFF , 1408px 1270px #FFF , 414px 128px #FFF , 31px 1664px #FFF , 1671px 899px #FFF , 125px 1133px #FFF , 1942px 351px #FFF , 1439px 466px #FFF , 886px 1853px #FFF , 1587px 677px #FFF , 241px 570px #FFF , 1886px 1293px #FFF , 1526px 84px #FFF , 508px 1419px #FFF , 759px 634px #FFF , 1314px 1121px #FFF , 1127px 545px #FFF , 993px 758px #FFF , 1770px 795px #FFF , 1629px 211px #FFF , 824px 1656px #FFF , 324px 1166px #FFF , 27px 1316px #FFF , 1258px 1468px #FFF , 428px 1923px #FFF , 661px 704px #FFF , 1872px 1640px #FFF , 1910px 1660px #FFF , 117px 995px #FFF , 253px 1792px #FFF , 1403px 1433px #FFF , 1441px 752px #FFF , 1472px 547px #FFF , 1715px 541px #FFF , 272px 187px #FFF , 881px 306px #FFF , 19px 1209px #FFF , 1807px 1423px #FFF , 693px 1752px #FFF , 160px 1252px #FFF , 1710px 237px #FFF , 32px 1786px #FFF , 1440px 1452px #FFF , 712px 1836px #FFF , 1324px 1411px #FFF , 728px 274px #FFF , 59px 244px #FFF , 1514px 16px #FFF , 1472px 923px #FFF , 1276px 1755px #FFF , 1099px 1301px #FFF , 1972px 1715px #FFF , 511px 1297px #FFF , 465px 1329px #FFF , 129px 1422px #FFF , 635px 959px #FFF , 206px 1663px #FFF , 1089px 150px #FFF , 911px 365px #FFF , 1520px 1828px #FFF , 133px 560px #FFF , 715px 1941px #FFF , 818px 1332px #FFF , 1407px 1564px #FFF , 64px 788px #FFF , 1048px 1656px #FFF , 1290px 1205px #FFF , 1230px 93px #FFF , 532px 570px #FFF , 170px 1545px #FFF , 507px 1924px #FFF , 197px 669px #FFF , 1945px 1559px #FFF , 400px 346px #FFF , 610px 1596px #FFF , 587px 245px #FFF , 272px 661px #FFF , 1889px 1419px #FFF , 1831px 234px #FFF , 1222px 840px #FFF , 1849px 1366px #FFF , 107px 1058px #FFF , 1589px 1327px #FFF , 1160px 324px #FFF , 438px 768px #FFF , 1225px 1707px #FFF , 662px 384px #FFF , 567px 786px #FFF , 1115px 95px #FFF , 195px 48px #FFF , 1623px 470px #FFF , 362px 746px #FFF , 546px 270px #FFF , 1120px 1542px #FFF , 1925px 1770px #FFF , 830px 1439px #FFF , 1419px 1360px #FFF , 128px 1049px #FFF , 1684px 578px #FFF , 714px 1156px #FFF , 102px 81px #FFF , 351px 1428px #FFF , 982px 472px #FFF , 1142px 1717px #FFF , 1195px 1182px #FFF , 337px 286px #FFF , 1309px 1402px #FFF , 1863px 1475px #FFF , 623px 1518px #FFF , 133px 1847px #FFF , 927px 1120px #FFF , 1439px 725px #FFF , 1722px 1576px #FFF , 706px 285px #FFF , 637px 455px #FFF , 574px 1498px #FFF , 674px 1851px #FFF , 1748px 683px #FFF , 563px 1521px #FFF , 1627px 1826px #FFF , 1360px 901px #FFF , 1551px 1458px #FFF , 1995px 517px #FFF , 1928px 303px #FFF , 1256px 1241px #FFF , 1283px 1911px #FFF , 923px 1235px #FFF , 758px 949px #FFF , 1133px 1794px #FFF , 1203px 623px #FFF , 344px 103px #FFF , 1032px 834px #FFF , 714px 555px #FFF , 702px 931px #FFF , 1431px 1808px #FFF , 1827px 1436px #FFF , 750px 192px #FFF , 1816px 769px #FFF , 1537px 64px #FFF , 670px 753px #FFF , 1832px 783px #FFF , 807px 1154px #FFF , 641px 1749px #FFF , 509px 399px #FFF , 1308px 79px #FFF , 319px 482px #FFF , 662px 829px #FFF , 1379px 1284px #FFF , 1812px 1594px #FFF , 359px 448px #FFF , 277px 1027px #FFF , 679px 795px #FFF , 1854px 689px #FFF , 275px 584px #FFF , 1772px 217px #FFF , 340px 920px #FFF , 1483px 968px #FFF , 567px 252px #FFF , 658px 507px #FFF , 1892px 860px #FFF , 1800px 261px #FFF , 1325px 1416px #FFF , 1053px 1894px #FFF , 459px 442px #FFF , 1172px 1566px #FFF , 1325px 695px #FFF , 764px 851px #FFF , 539px 582px #FFF , 1439px 999px #FFF , 67px 494px #FFF , 1251px 1832px #FFF , 731px 615px #FFF , 1024px 1997px #FFF , 1647px 365px #FFF , 932px 34px #FFF , 859px 247px #FFF , 249px 1998px #FFF , 555px 885px #FFF , 1663px 1423px #FFF , 1509px 381px #FFF , 694px 308px #FFF , 1430px 262px #FFF , 1944px 1413px #FFF , 1279px 1157px #FFF , 1298px 508px #FFF , 175px 967px #FFF , 568px 799px #FFF , 1417px 519px #FFF , 459px 368px #FFF , 681px 1629px #FFF , 41px 449px #FFF , 1630px 1507px #FFF , 1834px 1214px #FFF , 486px 1965px #FFF , 1581px 1047px #FFF , 995px 683px #FFF , 721px 1985px #FFF , 837px 624px #FFF , 885px 188px #FFF , 862px 1339px #FFF , 908px 1594px #FFF , 697px 267px #FFF , 386px 293px #FFF , 234px 1636px #FFF , 1805px 855px #FFF , 267px 350px #FFF , 493px 207px #FFF , 1541px 1176px #FFF , 377px 982px #FFF , 768px 878px #FFF , 1263px 812px #FFF , 175px 228px #FFF , 1601px 571px #FFF , 1696px 391px #FFF , 38px 415px #FFF , 1427px 1882px #FFF , 1306px 628px #FFF , 1257px 1933px #FFF , 1690px 1370px #FFF , 1812px 1778px #FFF , 1124px 1557px #FFF , 830px 567px #FFF , 1124px 842px #FFF , 1983px 1339px #FFF , 1855px 195px #FFF , 1545px 1092px #FFF , 1861px 1448px #FFF , 519px 1259px #FFF , 1141px 1117px #FFF , 1916px 1573px #FFF , 1112px 1870px #FFF , 1016px 1083px #FFF , 935px 1575px #FFF , 1275px 1355px #FFF , 363px 465px #FFF , 1085px 1388px #FFF , 1918px 952px #FFF , 104px 542px #FFF , 1013px 1562px #FFF , 1700px 1159px #FFF , 908px 289px #FFF , 1105px 1146px #FFF , 1420px 1676px #FFF , 1281px 457px #FFF , 1749px 1537px #FFF , 146px 45px #FFF , 51px 809px #FFF , 300px 991px #FFF , 1019px 1985px #FFF , 722px 216px #FFF , 1752px 1874px #FFF , 393px 798px #FFF , 483px 1645px #FFF , 324px 310px #FFF , 1688px 644px #FFF , 1848px 945px #FFF , 805px 1663px #FFF , 1927px 1468px #FFF , 999px 1120px #FFF , 1139px 677px #FFF , 1011px 1034px #FFF , 1123px 556px #FFF , 585px 1660px #FFF , 20px 67px #FFF , 1460px 1071px #FFF , 871px 726px #FFF , 1270px 587px #FFF , 814px 763px #FFF , 671px 799px #FFF , 1683px 1813px #FFF , 516px 1113px #FFF , 1490px 727px #FFF , 1825px 329px #FFF , 113px 1169px #FFF , 759px 1790px #FFF , 1195px 1933px #FFF , 1389px 1047px #FFF , 753px 1133px #FFF , 1858px 532px #FFF , 160px 83px #FFF , 1928px 1030px #FFF , 296px 351px #FFF , 1227px 673px #FFF , 1459px 397px #FFF , 1407px 316px #FFF , 1238px 1604px #FFF , 1060px 973px #FFF , 1579px 1000px #FFF , 1950px 10px #FFF , 1983px 462px #FFF , 1071px 330px #FFF , 1206px 343px #FFF , 454px 806px #FFF , 1404px 1721px #FFF , 969px 1813px #FFF , 1282px 1124px #FFF , 363px 1735px #FFF , 1688px 1952px #FFF , 1472px 264px #FFF , 762px 648px #FFF , 62px 588px #FFF , 1331px 1490px #FFF , 1189px 622px #FFF , 866px 320px #FFF , 1343px 1514px #FFF , 1201px 1297px #FFF , 1148px 904px #FFF , 1233px 1422px #FFF , 1450px 942px #FFF , 653px 1273px #FFF , 95px 279px #FFF , 853px 1428px #FFF , 1743px 163px #FFF , 1230px 737px #FFF , 812px 1580px #FFF , 1208px 33px #FFF , 1839px 1996px #FFF , 348px 1390px #FFF , 420px 1762px #FFF , 1915px 1121px #FFF , 776px 1562px #FFF , 1421px 1223px #FFF , 502px 94px #FFF , 1832px 1915px #FFF , 175px 367px #FFF , 592px 1593px #FFF , 1966px 922px #FFF , 365px 1586px #FFF , 1889px 220px #FFF , 1742px 1810px #FFF , 1801px 371px #FFF , 888px 1587px #FFF , 1567px 1363px #FFF , 26px 99px #FFF , 1542px 14px #FFF , 128px 461px #FFF , 300px 454px #FFF , 929px 502px #FFF , 290px 433px #FFF , 1856px 104px #FFF , 1971px 1303px #FFF , 1013px 1086px #FFF , 842px 1535px #FFF , 710px 1915px #FFF , 1796px 308px #FFF , 58px 501px #FFF , 1010px 801px #FFF , 405px 251px #FFF , 892px 909px #FFF , 1653px 1133px #FFF , 355px 1729px #FFF , 890px 1955px #FFF , 182px 811px #FFF , 1824px 365px #FFF , 1992px 383px #FFF , 1241px 1001px #FFF , 1805px 164px #FFF , 418px 1830px #FFF , 1575px 1143px #FFF , 1513px 1119px #FFF , 1927px 242px #FFF , 559px 48px #FFF , 1129px 666px #FFF , 643px 1716px #FFF , 150px 744px #FFF , 312px 136px #FFF , 1777px 848px #FFF , 1388px 1238px #FFF , 910px 1209px #FFF , 908px 1574px #FFF , 1466px 425px #FFF , 1903px 883px #FFF , 598px 1541px #FFF , 1743px 771px #FFF , 884px 1281px #FFF , 297px 1236px #FFF , 1298px 1422px #FFF , 636px 794px #FFF , 1713px 1526px #FFF , 1710px 785px #FFF , 1975px 1910px #FFF , 1890px 990px #FFF , 1932px 869px #FFF , 623px 1478px #FFF , 241px 1400px #FFF , 1345px 1866px #FFF , 1513px 1537px #FFF , 1642px 500px #FFF , 200px 42px #FFF , 1617px 1818px #FFF , 182px 499px #FFF , 1482px 216px #FFF , 31px 338px #FFF , 564px 805px #FFF , 249px 636px #FFF , 899px 694px #FFF , 1461px 967px #FFF , 1340px 195px #FFF , 1755px 635px #FFF , 1587px 1216px #FFF , 1118px 1054px #FFF , 279px 488px #FFF , 908px 1196px #FFF , 1156px 1995px #FFF , 1207px 1572px #FFF , 125px 1773px #FFF , 380px 283px #FFF , 1900px 184px #FFF , 687px 743px #FFF , 107px 246px #FFF , 1613px 233px #FFF , 125px 1491px #FFF , 77px 1928px #FFF , 788px 872px #FFF , 1697px 448px #FFF , 722px 1142px #FFF , 1840px 1462px #FFF , 413px 683px #FFF , 335px 250px #FFF , 340px 1869px #FFF , 403px 1659px #FFF , 495px 468px #FFF , 1647px 156px #FFF , 783px 594px #FFF , 290px 221px #FFF , 1304px 1035px #FFF , 642px 1073px #FFF , 1812px 619px #FFF , 238px 900px #FFF , 825px 680px #FFF , 1802px 1182px #FFF , 1054px 199px #FFF , 1140px 160px #FFF , 305px 1755px #FFF , 1963px 748px #FFF , 691px 192px #FFF , 940px 113px #FFF , 236px 44px #FFF , 439px 390px #FFF , 1293px 1402px #FFF , 228px 151px #FFF , 1022px 773px #FFF , 822px 1245px #FFF , 1591px 173px #FFF , 705px 1307px #FFF , 595px 1779px #FFF , 1474px 116px #FFF , 978px 690px #FFF , 230px 1474px #FFF , 1326px 229px #FFF , 1989px 860px #FFF , 1978px 536px #FFF , 1417px 1742px #FFF , 1929px 1914px #FFF , 285px 704px #FFF , 625px 945px #FFF , 1588px 1337px #FFF , 36px 1851px #FFF , 98px 843px #FFF , 1138px 995px #FFF , 1568px 1183px #FFF , 1935px 1297px #FFF , 908px 1586px #FFF , 64px 1182px #FFF , 886px 212px #FFF , 741px 1197px #FFF , 1886px 264px #FFF , 1202px 1926px #FFF , 589px 908px #FFF , 474px 1652px #FFF , 989px 731px #FFF , 1261px 1536px #FFF , 1656px 1133px #FFF , 611px 1597px #FFF , 1703px 1904px #FFF , 996px 1201px #FFF , 1183px 1048px #FFF , 777px 1968px #FFF , 172px 29px #FFF , 272px 1756px #FFF , 1403px 802px #FFF , 1533px 1211px #FFF , 1106px 1800px #FFF , 1322px 1794px #FFF , 1839px 1411px #FFF , 885px 1504px #FFF , 1150px 1123px #FFF , 202px 693px #FFF , 184px 106px #FFF , 778px 270px #FFF , 1902px 623px #FFF , 1844px 1445px #FFF , 857px 138px #FFF , 413px 1237px #FFF , 73px 1526px #FFF , 432px 1786px #FFF , 355px 1293px #FFF , 766px 1003px #FFF , 1573px 1977px #FFF , 834px 417px #FFF , 126px 1290px #FFF , 276px 254px #FFF , 170px 1931px #FFF , 158px 754px #FFF , 326px 1698px #FFF , 228px 714px #FFF , 924px 813px #FFF , 851px 1357px #FFF , 1816px 686px #FFF , 396px 967px #FFF , 540px 136px #FFF , 1598px 1738px #FFF , 282px 717px #FFF , 1985px 1776px #FFF , 1208px 761px #FFF , 1249px 1436px #FFF , 667px 1797px #FFF , 1563px 698px #FFF , 1158px 1859px #FFF , 242px 212px #FFF , 445px 1286px #FFF , 1943px 950px #FFF , 268px 819px #FFF , 729px 1755px #FFF;
}

Fonte

O próximo passo é exibir a fonte inicial da abertura, aquela que diz “A long time ago in a galaxy far, far away…”.

Este é também um passo bastante simples, basta adicionarmos uma cor azul e uma fonte um pouco mais parecida com a do filme. Vamos de Arial mesmo

.blue-font {
  color: #24b9dd;
  font-family: Arial;
}

Logo

Logo após esse texto vemos a logo do filme diminuindo de tamanho e sumindo no espaço.

Essa animação é bastante simples de ser feita. Para isso, basta termos uma imagem em tela e adicionar uma animação para diminuirmos o tamanho dela ao longo de 5 segundos.

Veja no código abaixo como fazemos isso:

.fade {
  animation-name: fadeout;
  animation-duration: 10s;
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

Texto com perspectiva

Por fim, finalizamos com o nosso texto amarelo.

Por incrível que pareça, conseguimos aplicar uma perpectiva em elementos utilizando apenas CSS.

Para isso, utilizamos o propriedade `transform`, com um valor de perspectiva e uma rotação no eixo X. É importante notar que a perspectiva é aplicada apenas para os elementos filhos de quem estiver com essa propriedade.

.perspective {
  color: #fed34f !important;
  transform: perspective(300px) rotateX(25deg);
  text-align: justify;
}

Conclusão

Um efeito que a alguns anos atrás era um efeito de câmera inovador, hoje pode ser feito utilizando as mais simples linguagens da WEB.

Mais uma vez o CSS nos mostra o quando essa tecnologia é poderosa e, quando explorada, capaz de possibilitar coisas incríveis como essa.

Porque não uso muitos apps

Wed, 28 Apr 2021 22:00:00 GMT

Hoje em dia é muito fácil encontrar apps e ferramentas de produtividade ou lazer por aí, seja na internet ou em lojas de aplicativos. Muitos desses apps funcionam com diversos tipos de integrações para que você possar ter toda informação que precisa em qualquer lugar de forma rápida.

Quando utilizo essas ferramentas para trabalho, percebo que realmente são muito eficientes, mas vinculá-las as seu celular pessoal, ou passar a utilizar para motivos pessoais acabam, por incrível que pareça, diminuindo minha produtividade.

Claro que essa é apenas a minha experiência, mas explico por que não funciona muito bem para mim.

Excesso de informação

Quando adiciono aplicativos como Slack, Discord ou Twitter no meu celular, isso inconcientemente ativa em mim uma vontade frequente de ficar abrindo o app para ver as últimas atualizações e ficar antenado. Isso acontece com mais frequência ainda com as notificações habilitadas.

Não tenho a intenção de parar de usar essas aplicações, mas percebo que não me sinto muito necessitado quando não tenho acesso rápido a eles. Por isso, mantenho os apps apenas no meu computador. Caso eu realmente preciso verificar algo, preciso ter o trabalho de abrir o laptop para então verificar as atualizações.

Facilidade de acesso

Outro motivo que me faz ser menos produtivo é a facilidade como posso acessar a maioria dos apps.

O Youtube por exemplo, é extremamente viciante, e ter o app instalado no meu celular, seguindo diversos canais diferentes é uma forma muito rápida de assistir vídeos.

Existem muitos canais que gosto de acompanhar, mas para evitar o vício constante de atualizar o feed de atividades, ou ficar abrindo o app constantemente, não tenho ele instalado e não sigo nenhum canal. Não preciso do Youtube me lembrando que o canal lançou um vídeo para eu ver. Simplesmente verei quando eu lembrar do canal e ir atrás verificar se existe algo novo de interessante.

Este é o mesmo motivo por eu ter parado de utilizar feeds RSS. Ao invés de ter a informação trazida para mim o tempo todo, só vou atrás dela quando lembro que quero saber algo.

Excesso de integrações

Outra coisa que me fazia manter menos produtivo (ou mais ansioso) era ter uma suíte de aplicativos integrados entre si, com acesso em diversos dispositivos. Eu sempre procurava a melhor ferramenta para eu manter listas, links ou arquivos que muitas vezes nunca eram utilizados de novo.

Excluí todos os meus apps de produtividade e hoje mantenho apenas um notepad com as coisas que preciso no meu computador. As importantes claro, mantenho na nuvem, mas as outras precisam de muito esforço para serem acessadas.

Com isso evito de ficar salvando coisas que não são realmente necessárias (se não me dou o esforço de salvar é porque não vale a pena) e só acessar essas coisas quando eu realmente preciso.

Conclusão

Sem o acesso fácil a todo esse tipo de informação, fica muito mais difícil de eu passar muito tempo procrastinando. Claro que as vezes ainda paro pra verificar o twitter, ou assitir vídeos do youtube, mas somente o fato de ter que me esforçar para isso já me faz pensar duas vezes e talvez optar por uma volta de bicicleta, ou algo diferente.

Regex Mistery

Fri, 16 Apr 2021 22:00:00 GMT

Após estudar um pouco sobre comportamentos do regex que eu não conhecia, decidi criar o Regex Mistery, um jogo que busca ensinar os diferentes conceitos de uma forma mais divertida.

O jogo é composto de diversos níveis, cada um com um desafio diferente que deve ser resolvido para avançar para as próximas fases.

Será que você consegue chegar até o fim desse desafio? Você pode jogá-lo através desse link.