Merge pull request #13 from Saariasba/saariasba

Donut 3D Figure

content/docs/shortcodes/3D/_index.md

@@ -0,0 +1,18 @@
+---
+bookCollapseSection: true
+weight: 2
+---
+
+# Introducción a la visualización de figuras 3D: Enfoque en la dona
+
+La visualización de figuras tridimensionales es un campo fascinante en el ámbito de la computación visual. Permite representar objetos en tres dimensiones y proporciona una perspectiva más realista y detallada en comparación con las representaciones bidimensionales. En este documento, nos centraremos específicamente en una forma icónica: la dona.
+
+{{< expand "Referencias" "...">}}
+
+## Referencias
+
+- https://p5js.org/reference/#/p5/torus
+- https://p5js.org/reference/#/p5/orbitControl
+  {{< /expand >}}
+
+{{< button relref="/" >}}Get Home{{< /button >}}

content/docs/shortcodes/3D/donut.md

@@ -0,0 +1,27 @@
+# Donut
+
+## Intro
+
+La dona, también conocida como toro, es un objeto geométrico tridimensional con una forma anular. Es una figura interesante para estudiar y visualizar debido a su simetría y propiedades matemáticas intrigantes. Aunque puede parecer un objeto sencillo a primera vista, la dona tiene una rica geometría y ofrece una amplia gama de posibilidades de visualización.
+
+En el contexto de la computación visual, la visualización de una dona implica representarla digitalmente en un entorno virtual, lo que nos permite examinarla desde diferentes ángulos, realizar transformaciones y aplicar efectos visuales. Para lograr esto, se utilizan técnicas y herramientas especializadas, incluyendo bibliotecas de gráficos en 3D y motores de renderizado.
+
+{{< p5-iframe sketch="/showcase/sketches/donut/donut_static.js" width="615" height="524">}}
+
+## Movimiento en X
+
+Ahora que tenemos nuestra dona, generaremos movimiento en un solo eje para poder observar de mejor manera el objeto en 3d.
+
+{{< p5-iframe sketch="/showcase/sketches/donut/donut_one_move.js" width="615" height="524">}}
+
+## Movimiento en todas las dimensiones
+
+Ahora nuestra dona se movera o de mejor manera girará sobre todos sus ejes.
+
+{{< p5-iframe sketch="/showcase/sketches/donut/donut_all_moves.js" width="615" height="524">}}
+
+## Movimiento por mouse
+
+Por último permitimos el movimiento según lo desee el usuario.
+
+{{< p5-iframe sketch="/showcase/sketches/donut/donut_user_move.js" width="615" height="524">}}

content/sketches/donut/donut_all_moves.js

@@ -0,0 +1,12 @@
+function setup() {
+  createCanvas(600, 500, WEBGL);
+}
+
+function draw() {
+  background(200);
+  fill(51, 64, 209);
+  rotateZ(frameCount * 0.01);
+  rotateX(frameCount * 0.01);
+  rotateY(frameCount * 0.01);
+  torus(100, 50);
+}

content/sketches/donut/donut_one_move.js

@@ -0,0 +1,10 @@
+function setup() {
+  createCanvas(600, 500, WEBGL);
+}
+
+function draw() {
+  background(200);
+  fill(51, 64, 209);
+  rotateX(frameCount * 0.01);
+  torus(100, 50);
+}

content/sketches/donut/donut_static.js

@@ -0,0 +1,9 @@
+function setup() {
+  createCanvas(600, 500, WEBGL);
+}
+
+function draw() {
+  background(200);
+  fill(51, 64, 209);
+  torus(100, 50);
+}

content/sketches/donut/donut_user_move.js

@@ -0,0 +1,10 @@
+function setup() {
+  createCanvas(600, 500, WEBGL);
+}
+
+function draw() {
+  background(200);
+  fill(51, 64, 209);
+  orbitControl(5, 5, 5);
+  torus(100, 50);
+}