Un caleidoscopio es un instrumento que visualmente, gracias a unos espejos es capaz de hacer que se repitan la misma imagen de manera simétrica generando un patrones únicos. Wiki
En este caso se va a partir la imagen en 4 partes y de ahí repetiremos el primero a través de un shader, se podrá multiplicar el patrón. Estos son algunos de los efectos que se conseguirán con el proyecto
-
No se explicarán conceptos básicos de los que está compuesto el proyecto.
1 – UI Picker, podrás seleccionar el número de repeticiones. https://sparkar.facebook.com/ar-studio/learn/tutorials/native-ui-picker/
2 – UI Slider, podrás modificar el zoom de la imagen. https://sparkar.facebook.com/ar-studio/learn/tutorials/native-ui-slider/
3 – Scripting https://sparkar.facebook.com/ar-studio/learn/scripting/scripting-basics/
4 – Promise Youtube - https://www.youtube.com/watch?v=AQv9GR16xMw&t=634s&ab_channel=SohailMehra
Este proyecto está casi enteramente realizado mediante scripting, sólo una pequeña parte, relativa al UI Picker y Slider se realiza mediante patches. Para esto el script tiene 2 variables que se necesitan uno será la variable signal escalar Zoom, que se controla a través del UI Slider, como su nombre indica es para controlar el Zoom, y otra variable signal escalar será “Repeticiones” que se controla a través del UI Picker y sirve para seleccionar el número de repeticiones del que va a constar.
Lo primero que vemos es la declaración y obtención de las coordenadas de las textura en los atributos vertex, esto lo que hará es modificar la imagen punto a punto a través de las coordenadas. Sohail Mehra tiene un tutorial explicando la programación de shaders a través del script en Spark AR. https://www.youtube.com/watch?v=ZUTxeQcaZ-I&ab_channel=SohailMehra
Lo primero que tenemos que hacer es generar la proporción para que no genere unos resultados extraños.
const proporcion = Reactive.ge(repeticionesPatch, 5.0).ifThenElse(Reactive.div(canvas.width,canvas.height), 1.0);
Primero vamos modificando el eje Y, para esto generamos la duplicidad
var UVy = Reactive.mul(uv.y, Reactive.mul( repeticionesPatch,proporcion));
Con esto empezamos a seleccionar la parte que queremos clonar con base a la proporción dada.
UVy = Reactive.sin(UVy);
Le aplicamos el seno para generar esa repetición en el eje Y
UVy = Reactive.div(UVy, zoom);
Y le añadimos el zoom
Lo mismo sucede con el eje X
Por último añadiendo el coseno a la imagen generada con el eje Y se conseguirá que se volteé la imagen en verticalmente y en el X horizontalmente, generando el efecto de duplicado.
UVy = Reactive.cos(UVy);
UVx = Reactive.cos(UVx);