AcliveJS

Seminário apresentado no MNPEF Macaé no dia 08/07/2016.

Transcript

1. MNPEF BIBLIOTECA DE FÍSICA PARA MODELAGEM COMPUTACIONAL UTILIZANDO HTML5, JAVASCRIPT E THREE.JS Mestrando: Wallace Robert Orientador: Prof. Dr. Claudio Cappa
2. MNPEF Muitas vezes o processo Ensino-Aprendizagem sobre um determinado fenômeno físico fica comprometido devido à dificuldade de abstração por parte dos estudantes. Nestes casos, pode-se utilizar recurso de mídia, seja na forma de vídeos ou simulações computacionais. Este seminário tem como objetivo apresentar a Aclivejs. Trata-se de uma biblioteca de funções cuja finalidade está na construção de modelos matemáticos para a simulação de fenômenos físicos através do computador. Atualmente sendo desenvolvida em HTML, API WebGL e Threejs. A Aclivejs pretende dar suporte à criação de simulações de Física que executam diretamente nos navegadores de internet, tais como Firefox e Google Chrome. O uso desta tecnologia para transformar um raciocínio analítico para algo que pode ser visualizado na tela, faz dela um objeto educacional digital (OED) que pode ser utilizada em sala de aula, permitindo seu uso como um laboratório virtual, que, a partir de equações matemáticas simula modelos de fenômenos físicos.
3. MNPEF OBJETIVOS: • Criar uma biblioteca javascrip para o desenvolvimento de modelos matemáticos para simulações de fenômenos físicos através do computador.
4. MNPEF IDEIA DO PROJETO: • A partir do uso do Vpython (aula Prof. Cappa) • Blender 3D • Linguagens estruturadas (Basic; Pascal; C) • Programação Orientada a Objetos (POO) • POO e internet • Modelos matemáticos (suporte a 2D e 3D)
5. MNPEF ESCOLHA • WebGL (aproveitando experiência com OpenGL) • Threejs (biblioteca javascript e WebGL) • HTML
6. MNPEF WebGL • WebGL é baseado no OpenGL ES 2.0 e fornece uma interface de programação de gráficos 3D. Ele usa o elemento canvas do HTML5 e é acessada por meio de interfaces DOM (Document Object Model).
7. MNPEF • Three.js é baseado no WebGL, ou seja, é uma biblioteca criada a partir do WebGL. • Tem como objetivo, abstrair todas as complexas funcionalidades do WebGL. Basicamente, você consegue aprender a trabalhar com modelagem e animação 3D direto no browser, utilizando apenas javascript e HTML5.
8. MNPEF • Three.js é uma “camada de abstração” para o WebGL. • Necessário um browser que tenha suporte não apenas ao WebGL, mas também ao elemento canvas do HTML5.
9. MNPEF • Canvas Canvas é um elemento da HTML5 destinado a delimitar uma área para renderização dinâmica de gráficos. Todo o trabalho de criação e animação é realizado através de linguagens de programação dinâmica (usualmente Javascript).
10. MNPEF • HTML5 HTML5 (Hypertext Markup Language, versão 5) é uma linguagem para estruturação e apresentação de conteúdo para a World Wide Web e é uma tecnologia chave da Internet originalmente proposto por Opera Software. É a quinta versão da linguagem HTML.
11. MNPEF
12. MNPEF
13. MNPEF • Aclive.js • A Aclive.js é uma “camada de abstração” para o Three.js • • Resumindo – O WebGL é complexo, o Three.js facilita o WebGL, mas ainda assim é complicado, a Aclive.js facilita o Three.js.
14. MNPEF Aclive.js • Código aberto; • Gratuita; • Não é preciso instalar nada; • Qualquer pessoa pode contribuir para o seu desenvolvimento; • Roda em navegadores de internet (online e offline) • Depuração de código feita no próprio navegador
15. MNPEF Download: • https://github.com/AcliveJS/Aclive
16. MNPEF Sistema de pastas e arquivos:
17. MNPEF Onde programo meu modelo? • Isto é feito no arquivo projeto.js • Projeto.js é um arquivo com extensão javascript • Pode ser editado com qualquer editor de texto, inclusive o bloco de notas do windows. • Como IDE sugiro o NotePad++
18. MNPEF Corpo do programa // variáveis globais function Ambiente() { // objetos aqui (código) } Function Simulacao() { // código aqui }
19. MNPEF Como aprender a programar na Aclive.js? • Através da pasta HTML
20. MNPEF Ficheiros:
21. MNPEF Exemplos...