Skip to content

tatyquebralayout/3D-of-the-Reutersv-rd-Triangle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Ilusão Interativa em 3D do Triângulo de Reutersvärd

Este projeto demonstra uma ilusão interativa em 3D do Triângulo de Reutersvärd usando a biblioteca p5.js com WebGL. O projeto permite que os usuários ajustem a rotação nos eixos X, Y e Z para visualizar a ilusão de diferentes ângulos.

Estrutura do Projeto

O projeto é composto pelos seguintes arquivos:

  • index.html: O arquivo HTML principal que estrutura a página.
  • css/style.css: O arquivo CSS que contém os estilos da página.
  • js/sketch.js: O arquivo JavaScript que contém o código p5.js responsável pela animação interativa em 3D.

Como Usar

Para visualizar e interagir com a animação, siga os passos abaixo:

  1. Clone este repositório:

    git clone https://github.com/tatyquebralayout/3D-of-the-Reutersv-rd-Triangle.git
  2. Navegue até o diretório do projeto:

    cd 3D-of-the-Reutersv-rd-Triangle
  3. Abra o projeto em um editor de código como o VSCode.

  4. Instale a extensão Live Server no VSCode:

    • Abra o VSCode e vá para a aba de extensões.
    • Procure por "Live Server" e instale a extensão.
  5. Inicie o Live Server:

    • Clique com o botão direito no arquivo index.html e selecione "Open with Live Server".
    • O navegador abrirá uma nova aba servindo seu projeto localmente.

Tecnologias Utilizadas

  • p5.js: Uma biblioteca JavaScript que facilita o desenho e a manipulação de gráficos.
  • p5.dom.js: Extensão da biblioteca p5.js para manipulação de elementos DOM.
  • p5.sound.js: Extensão da biblioteca p5.js para manipulação de áudio.
  • HTML: Linguagem de marcação utilizada para estruturar o conteúdo da web.
  • CSS: Linguagem de estilo utilizada para definir a apresentação do conteúdo da web.
  • JavaScript: Linguagem de programação utilizada para criar comportamentos dinâmicos no projeto.

Funcionalidades

  • Rotação em X: Permite ajustar a rotação do triângulo no eixo X.
  • Rotação em Y: Permite ajustar a rotação do triângulo no eixo Y.
  • Rotação em Z: Permite ajustar a rotação do triângulo no eixo Z.
  • Redefinir: Redefine os parâmetros de rotação para seus valores iniciais.

Estrutura do Código

Variáveis Globais

  • rotationX, rotationY, rotationZ: Armazenam os ângulos de rotação nos eixos X, Y e Z.

Função setup

  • Canvas: Cria um canvas 3D de 600x600 pixels e o anexa ao contêiner no HTML.
  • Sliders de Rotação: Configura sliders para controlar a rotação nos eixos X, Y e Z.
  • Botão de Reset: Configura um botão para redefinir os valores de rotação.

Função draw

  • Fundo: Limpa o fundo do canvas com branco.
  • Transformações:
    • Rotação: Rotaciona o objeto 3D de acordo com os valores de rotação nos eixos X, Y e Z.
  • Desenho:
    • Triângulo de Reutersvärd 3D: Chama a função para desenhar o triângulo em 3D com o tamanho especificado.

Função drawReutersvardTriangle3D

  • Cálculos Geométricos:
    • Calcula a raiz quadrada de 3 e usa esse valor para determinar a largura e altura do triângulo.
  • Desenho:
    • Triângulo Principal: Desenha o triângulo principal.
    • Formas Complementares: Desenha as formas complementares à esquerda e à direita.

Autora

Desenvolvido por [Taty Quebra Layout].

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published