3dMath/index.html at main · ebezerra-it/3dMath · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE HTML>
<html>
	<head>
		<title>Eduardo Bezerra - Túnel do Tempo</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Page Wrapper -->
			<div id="page-wrapper">
				<!-- Header -->
					<header id="header" class="alt">
						<h1><a href="index.html">Túnel do tempo</a></h1>
						<nav>
							<a href="index.html"><img class="imglanguage" src="images/brlflag.jpg"/></a>
							<a href="index_us.html"><img class="imglanguage" src="images/usaflag.jpg"/></a>
						</nav>
					</header>

				<!-- Banner -->
					<section id="banner">
						<div class="inner">
							<div class="logo">
								<img class="imgprofile" src="images/profile.jpg" alt="" />
							</div>

							<h2>Túnel do tempo</h2>
							<p>Em 1996, eu fazia o meu 2&deg; grau técnico em eletrônica no CEFET-RJ e integrava um grupo de alunos que escrevíamos programas em C++ em um "potente" 386DX40 para criar animações em 3 dimensões usando a mais bela e pura matemática.</p>
							<p>Em um momento de ócio e reflexão, estava pensando em como as escolhas, amizades e interesses dessa época influenciaram vários dos passos seguintes da minha vida, e resolvi registrar uma homenagem a tudo isso que vivi, reescrevendo algumas dessas animações. No lugar do Borland C++, codifiquei usando o p5js, mas sem utilizar nenhuma das bibliotecas de modelagem em 3 dimensões. Espero que se divirtam vendo, como eu me diverti fazendo.</p>
						</div>
					</section>

				<!-- Wrapper -->
					<section id="wrapper">

						<!-- One -->
							<section id="one" class="wrapper spotlight style1">
								<div class="inner">
									<a href="./3d/thecube/index.html" class="image"><img src="images/thecube.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Cube</h2>
										<p>Essa foi a primeira animação que consegui fazer por se tratar do poliedro mais simples, mas os aprendizados obtidos nessa animação foram base para as outras.</p>
										<a href="./3d/thecube/index.html" class="special">Assista</a>
									</div>
								</div>
							</section>

						<!-- Two -->
							<section id="two" class="wrapper alt spotlight style2">
								<div class="inner">
									<a href="./3d/thesphere/index.html" class="image"><img src="images/thesphere.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Sphere</h2>
										<p>A esfera trouxe o desafio de criar um sólido cujos pontos são obtidos por interpolação de funções trigonométricas. Há 28 anos atrás, a esfera sólida era estática [parada], pois meu 386 não conseguia processar a animação. Então, <i>by that time</i>, optei por animar a esfera apenas na visão "wireframe";</p>
										<a href="./3d/thesphere/index.html" class="special">Assista</a>
									</div>
								</div>
							</section>

						<!-- Three -->
							<section id="three" class="wrapper spotlight style3">
								<div class="inner">
									<a href="./3d/theicosahedron/index.html" class="image"><img src="images/theicosahedron.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Icosahedron</h2>
										<p>Apenas um poliedro mais complexo que o cubo. O desafio nessa animação está em mapear cada uma das faces a partir dos pontos, com as arestas na ordem certa para que o produto vetorial entre as arestas de cada face aponte o vetor normal para fora do poliedro. Quando eu fiz essa animação a 1a vez, fiz o icosaedro "morfando" para o cubo e vice-versa, mas não tive tempo de fazer essa feature nessa reedição.</p>
										<a href="./3d/theicosahedron/index.html" class="special">Assista</a>
									</div>
								</div>
							</section>


							<!-- Four -->
							<section id="four" class="wrapper alt spotlight style2">
								<div class="inner">
									<a href="./3d/thegrid/index.html" class="image"><img src="images/thegrid.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Grid</h2>
										<p>Mais uma animação de interpolação por função trigonométrica. Chamávamos carinhosamente de "gota". A dupla animação (passo da função trigonométrica e rotação nos 3 eixos) não era possível de ser feita por falta de capacidade de processamento da época. Foi uma alegria ver isso funcionando.</p>
										<a href="./3d/thegrid/index.html" class="special">Assista</a>
									</div>
								</div>
							</section>

						<!-- Five -->
							<section id="five" class="wrapper spotlight style3">
								<div class="inner">
									<a href="./3d/thelove/index.html?language=PT-BR" class="image"><img src="images/thelove.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Love</h2>
										<p>Esta animação tem um significado especial. Meu grande amigo e irmão, <a href="https://www.linkedin.com/in/sother/" target="_blank">Luciano Sother</a>, idealizou essa animação que, na época, ele fez para sua paquera, exibindo "Tatiana/ Te adoro". Aconteceu que em 2013 um ataque cardíaco levou meu querido amigo prematuramente. A partir das lembranças da animação dele, refiz essa animação para a minha amada esposa, mas deixo os créditos e a homenagem ao meu estimado amigo.</p>
										<a href="./3d/thelove/index.html?language=PT-BR" class="special">Assista</a>
									</div>
								</div>
							</section>

						<!-- Six -->
							<section id="six" class="wrapper alt spotlight style2">
								<div class="inner">
									<a href="./3d/thetexture/index.html" class="image"><img src="images/thetexture.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Texture</h2>
										<p>Utilizando o conhecido e eficiente <a href="https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm" target="_blank">algorítmo de linha de Bresanham</a>, desenvolvi um algorítmo de mapeamento de texturas. O custo computacional para esse processamento é elevado, o que pode resultar degradação da UX em alguns dispositivos móveis, sendo recomendada a experiência em computadores com GPU. Para minimizar esse problema, dividi o processamento do quadrilátero em 2 triângulos e em threads separadas, como também criei funções com comandos webgpl para o desenho de pontos em massa, utilizando a GPU. Atualmente esses algoritmos são codificados diretamente no hardware da placa de vídeo, resultando em estupendo ganho de performance.</p>

										<a href="./3d/thetexture/index.html" class="special">Assista</a>
									</div>
								</div>
							</section>

						<!-- Seven -->
							<section id="seven" class="wrapper spotlight style3">
								<div class="inner">
									<a href="./3d/themovie/index.html?language=PT-BR" class="image"><img src="images/themovie_pt.png" alt="" /></a>
									<div class="content">
										<h2 class="major">The Movie</h2>
										<p>Essa animação reune os aprendizados e técnicas das animações anteriores. Trata-se de um pequeno filme narrando a criação do cubo desde os pontos até a sua formação como sólido metálico, através da aplicação de textura. </p>
										<p>Para uma melhor experiência, ative o áudio do seu dispositivo.</p>
										<a href="./3d/themovie/index.html?language=PT-BR" class="special">Assista</a>
									</div>
								</div>
							</section>

					</section>

				<!-- Footer -->
					<section id="footer">
						<div class="inner">
							<h2 class="major">Contato</h2>

							<ul class="contact">
								<li class="icon solid fa-home">
									Belo Horizonte/MG - Brasil
								</li>
								<li class="icon brands fa-linkedin"><a href="https://www.linkedin.com/in/ebezerra-it/">linkedin.com/in/ebezerra-it/</a></li>
							</ul>
							<ul class="copyright">
								<li>Design: Eduardo Bezerra</li>
								<li>Modelo: <a href="http://html5up.net">HTML5 UP</a></li>
							</ul>
						</div>
					</section>

			</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>