Skip to content

Commit

Permalink
visual ilusions completo
Browse files Browse the repository at this point in the history
  • Loading branch information
@julozanoa
julozanoa committed Apr 8, 2023
1 parent a0474ee commit a55b37f
Show file tree
Hide file tree
Showing 6 changed files with 653 additions and 39 deletions.
119 changes: 118 additions & 1 deletion content/docs/ejercicios/visual_illusions/_index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,121 @@ bookCollapseSection: true
weight: 3
---

# Visual Illusions
# **Visual Illusions**

{{< hint warning>}}
## **Rererencias**
{{< /hint >}}
---
{{< hint info >}}
### **Coloring**
{{< /hint >}}

{{< hint danger >}}
#### Colorblindness
{{< /hint >}}

<iframe width="560" height="315" src="https://www.youtube.com/embed/QHEQuoIKgNE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Colormapping para colorblind

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

{{< hint danger >}}
#### Color Models
{{< /hint >}}

Para color models: Introducción a los modelos de color en general: Este artículo de [Smashing Magazine](https://www.smashingmagazine.com/2018/01/understanding-using-color-theory/) es una buena introducción a los diferentes modelos de color, incluyendo RGB, HSL, HSB y otros. Explica cómo funcionan cada uno y cuáles son sus ventajas y desventajas.

Documentación de [p5.js](https://p5js.org/es/reference/#group-Color) sobre HSL y HSB: La documentación oficial de [p5.js](https://p5js.org/es/reference/#group-Color)s incluye información detallada sobre cómo trabajar con los modelos de color HSL (hue, saturation, lightness) y HSB (hue, saturation, brightness), que son alternativas al modelo RGB. Incluye ejemplos y código para que puedas seguirlos.

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

<br>

{{< hint info >}}
### **Mach Bands**
{{< /hint >}}

{{< hint danger >}}
#### **Mach Bands**
{{< /hint >}}

Documentación de Perlin Noise en la página web de [Processing](https://processing.org/reference/noise_.html).

Tutorial [Introduction to Perlin Noise](https://mrl.cs.nyu.edu/~perlin/noise/)

3D Terrain Generation with Perlin Noise
<iframe width="560" height="315" src="https://www.youtube.com/embed/_Tyhfpxwips" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

<br>

{{< hint info >}}
### **Masking**
{{< /hint >}}

{{< hint danger >}}
#### **Kinegramas**
{{< /hint >}}

[Tutorial](https://www.instructables.com/Kinegrams-How-to-Create-Them/) sobre kinegramas: Este tutorial de Instructables explica cómo crear un kinegrama usando un software de edición de imágenes como Photoshop o GIMP. Incluye imágenes y un video para que puedas seguir los pasos.

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

{{< hint danger >}}
#### **Patrones de Moiré**
{{< /hint >}}

[Tutorial](https://www.creativebloq.com/inspiration/understand-and-create-moire-patterns-12121420) sobre patrones de moiré: Este tutorial de Creative Bloq explica qué son los patrones de moiré y cómo crearlos utilizando diferentes técnicas, como la superposición de patrones o la rotación de líneas. Incluye ejemplos y consejos prácticos.

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

{{< hint danger >}}
#### **Dithering**
{{< /hint >}}

Ejemplos de "dithering" en p5.js: En OpenProcessing, una plataforma para compartir y descubrir proyectos de p5.js, hay varios ejemplos de "dithering" que puedes explorar y estudiar el código. Aquí te dejo algunos enlaces:

[Dither](https://www.openprocessing.org/sketch/888296) de Dan McKeown <br>
[Halftone](https://www.openprocessing.org/sketch/591904) de Felix Turner <br>

Tutorial de "dithering" con [p5.js](https://p5js.org/examples/color-halftone.html): Este tutorial de Joshua Noble en el sitio web de [p5.js](https://p5js.org/examples/color-halftone.html) explica cómo implementar diferentes técnicas de "dithering" en [p5.js](https://p5js.org/examples/color-halftone.html), como "ordered dithering" y "error diffusion". Incluye ejemplos y código para que puedas seguirlos.

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

<br>

{{< hint info >}}
### **Spatial Coherence**
{{< /hint >}}

{{< hint danger >}}
#### **Pixelator**
{{< /hint >}}

Introducción a la pixelación en p5: Este tutorial de Coding Train en su canal de Youtube, explica qué es la pixelación y cómo implementarla en p5. Incluye ejemplos y código para que puedas seguirlos.

<iframe width="560" height="315" src="https://www.youtube.com/embed/EmtU0eloTlE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Documentación de [p5.js](https://p5js.org/es/reference/#/p5/pixels): La documentación oficial de [p5.js](https://p5js.org/es/reference/#/p5/pixels)s tiene una sección dedicada a la manipulación de píxeles de imágenes, que incluye información sobre cómo acceder y modificar los píxeles de un video.

Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).

<br>

{{< hint info >}}
### **Depth Perception**
{{< /hint >}}

{{< hint danger >}}
#### **2D a 3D**
{{< /hint >}}

Tutorial sobre el uso de perspectiva en [p5.js](https://p5js.org/es/examples/3d-perspective.html): En este tutorial de la documentación oficial de [p5.js](https://p5js.org/es/examples/3d-perspective.html), se explica cómo utilizar la perspectiva para crear la ilusión de profundidad en una imagen en 2D. Incluye ejemplos y código para que puedas seguirlos.

Ejemplo de una escena 3D en p5: Este sketch de [p5.js](https://www.openprocessing.org/sketch/179265) creado por la comunidad de OpenProcessing muestra cómo crear una escena en 3D utilizando la biblioteca [p5.js](https://www.openprocessing.org/sketch/179265). Puedes estudiar el código y adaptarlo a tu proyecto de pistas monoculares.


Herramienta de procesamiento de lenguaje [chat gpt](https://chat.openai.com/chat).
37 changes: 34 additions & 3 deletions content/docs/ejercicios/visual_illusions/coloring.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,40 @@ El objetivo de este programa es cargar una imagen y aplicar una corrección de c

Primero se carga la imagen en el canvas para acceder a los valores de los píxeles de la imagen. Luego, se recorre cada conjunto de cuatro valores (uno para cada componente de color: rojo, verde, azul y alfa) y se aplica una corrección de color específica para la deuteranopia utilizando una combinación de los valores de color originales. Por último, los nuevos valores de los píxeles se asignan de vuelta a la imagen y se muestra la imagen modificada en el canvas.

{{< details title="colorblind" open=false >}}
{{< highlight html >}}
{{</* p5-iframe sketch="/showcase/sketches/colorblind.js" width="728" height="379 */>}}
{{< details title="colorblind" open=false >}}
{{< highlight md >}}
{{</* p5-instance-div id="colorblind" />}}
let img;

function preload() {
img = loadImage('https://images.ctfassets.net/u4vv676b8z52/1pog1a6vst4lCobfROxD7m/4174e272b7d1c731533e4537952a2343/enchroma-glasses-678x446-compressor.jpg?fm=jpg&q=80');
}

function setup() {
createCanvas(img.width, img.height);
image(img, 0, 0);

loadPixels();

for (let i = 0; i < pixels.length; i += 4) {
let r = pixels[i];
let g = pixels[i + 1];
let b = pixels[i + 2];

// Corrección para deuteranopia
let rPrime = 0.625 * r + 0.375 * g + 0.0 * b;
let gPrime = 0.7 * r + 0.3 * g + 0.0 * b;
let bPrime = 0.0 * r + 0.3 * g + 0.7 * b;

pixels[i] = rPrime;
pixels[i + 1] = gPrime;
pixels[i + 2] = bPrime;
}

updatePixels();
}

{{< /p5-instance-div */>}}
{{< /highlight >}}
{{< /details >}}

Expand Down
67 changes: 63 additions & 4 deletions content/docs/ejercicios/visual_illusions/depthPerception.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
weight: 6
---

# Depth Perception
# **Depth Perception**

## **2D a 3D**

{{< hint info >}}
### Introducción
Expand All @@ -22,9 +24,66 @@ Históricamente, la perspectiva lineal fue desarrollada en el Renacimiento y uti

El código adjunto es un ejemplo de cómo se puede utilizar la biblioteca p5.js para crear objetos 3D en un canvas. La función setup() define el tamaño del canvas y la función draw() dibuja diferentes formas geométricas y las anima rotándolas. Este ejemplo es una demostración de cómo se pueden utilizar diferentes claves para crear una ilusión de profundidad en una escena 3D.

{{< details title="3D" open=false >}}
{{< highlight html >}}
{{</* p5-iframe sketch="/showcase/sketches/3d.js" width="710" height="400 */>}}
{{< details title="3d" open=false >}}
{{< highlight md >}}
{{</* p5-instance-div id="3d" />}}
function setup() {
createCanvas(710, 400, WEBGL);
}

function draw() {
background(250);

translate(-240, -100, 0);
normalMaterial();
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
plane(70);
pop();

translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
box(70, 70, 70);
pop();

translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
cylinder(70, 70);
pop();

translate(-240 * 2, 200, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
cone(70, 70);
pop();

translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
torus(70, 20);
pop();

translate(240, 0, 0);
push();
rotateZ(frameCount * 0.01);
rotateX(frameCount * 0.01);
rotateY(frameCount * 0.01);
sphere(70);
pop();
}
{{< /p5-instance-div */>}}
{{< /highlight >}}
{{< /details >}}

Expand Down
Loading

0 comments on commit a55b37f

Please sign in to comment.