Don't wanna be here? Send us removal request.
Statistics
We looked inside some of the posts by xaga997-blog and here's what we found interesting.
Average Info
Notes Per Post
1
Likes Per Post
1
Reblog Per Post
0
Reply Per Post
0
Time Between Posts
9 days
Number of Posts By Type
Text
7
Video
2
Last Seen Tumblr Blogs
Fun Fact
US Tumblr user growth rate is estimated to slow down to 4.1%.
Text
Iluminación
Nueva semana, nuevo fallo.
Le pedí ayuda tanto a Pablo como al monitor y nadie respondió a tiempo. Realmente, no entiendo. Al modificar shaders para iluminación, el ejercicio usado(El helicóptero) hizo kaboom y dejó de funcionar
El código: https://codepen.io/xaga97/pen/Poobjed
0 notes
Text
Texturas CompVis
He de admitir esta semana es donde inicio lo que llamo: No entiendo por qué no se muestra lo que hice y necesito ayuda puesto que el bind de texturas no funciona pero se crearon las figuras correctas. Al crear el shader correcto, todo desaparece.
Pero bueno, para esta semana lo requerido era asignar texturas a primitivas. Para esto, se hicieron los siguientes cambios a los Shaders:
<script id="3d-vertex-shader" type="x-shader/x-vertex"> attribute vec3 aVertexPosition; attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix; uniform mat4 uPMatrix;
varying highp vec2 vTextureCoord;
void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; } </script>
<script id="3d-fragment-shader" type="x-shader/x-fragment"> varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) { gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); } </script>
Además, se creó una textura así:
cubeTexture = gl.createTexture(); cubeImage = new Image(); cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); } cubeImage.src = 'http://www.textures4photoshop.com/tex/thumbs/ice-texture-free-652.jpg';
function handleTextureLoaded(image, texture) { gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST); gl.generateMipmap(gl.TEXTURE_2D); gl.bindTexture(gl.TEXTURE_2D, null); }
El bind se intentó creando la textura con su buffer completo para cubo o plano y no sirvió en ninguna de las dos, aunque se intentase con la solución de no potencias de 2 en textura. Por el contrario, el shader hizo desaparecer toda la figura. Se intentó hacer esto para que las texturas se siguiesen
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord'); gl.enableVertexAttribArray(textureCoordAttribute); gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
Pero no funcionó. Además, el último fallo estuvo en el intento de bind, hecho con esto:
gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, cubeTexture); gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);) );
Para cambiar de colores a texturas. Pero no sirvió.
En definitiva, esta semana entrego algo errado pero intentado por mi parte. No entiendo el por qué no sirve nada y me gustaría se revisase el código para entender mis errores. Muchas gracias,
Juan Diego Correa
Link al código: https://codepen.io/xaga97/pen/xxKYjGG
0 notes
Text
Segumiento de Curva
Para esta semana, lo requerido es hacer seguimiento de curva.
La base de mi programa es el ejemplo del semestre pasado que usa una librería basada en las funciones de Bezier. Modificando el avión para que sea sólo hélices, haciendo de esto un objeto asimétrico, se puede notar que el objeto mantiene su posición en toda la curva.
La función traza puntos haciendo una interpolación. En este caso, esta es la función que generará la curva:
var pt = app.curve.curve.get(t); var dv = app.curve.curve.derivative(t);
Siendo curve una clase ya hecha que genera la curva en sí.
Código: https://jsfiddle.net/Xaga97/dw4sq5mL/31/
0 notes
Text
CompVis Vistas Helicóptero
Para esta semana, lo requerido era agregarle vistas al helicóptero previamente creado. Para esto, se utilizó el código de Jesús en mi caso ya que el mío se desarmaba y se crearon radial buttons para cambiar entre las vistas.
Modificarlas requiere dos matrices: La model View, que dice cómo observar las figuras, y la projection que modifica el cómo se ve. En este caso, se usan tanto la función de Ortho como la de Perspective para cambiar las vistas de los objetos.
En este caso, Primera está en el punto inicial apuntando afuera, por esto sólo se ve la cola unos segundos.
La segunda opción deja la vista entera.
La tercera va modificando el objeto para cambios en la primera. Esto permite ver el superior, frontal o lateral o, incluso, isometricos si se quiere. Para esto, se cambia entre esas dos vistas.
Link al código: https://codepen.io/xaga97/pen/RwbyewL
Resultado Final:
0 notes
Text
Helicóptero alrededor de figura
En esta ocasión, el ejercicio era hacer que el helicóptero se moviese en círculos alrededor de una figura estática. Además de esto, el mismo debía rotar para mirar al centro en todo momento. Los pasos son los siguientes: 1. Hacer la creación y traslación del helicóptero y la creación del objeto para que haya algo como “eje de rotación”.
2. Crear los movimientos que multiplicarán las matrices. Para girar, se usan seno y coseno. Es importante tener en cuenta que la altura debe mantenerse estática.
3. Mover lo demás del helicóptero para que rote(preferiblemente juntarlo en un objeto para rotarlo con facilidad, por fallar en esto el mío se “desarma”).
Horas trabajadas en esto: 9
Código: https://codepen.io/xaga97/pen/xxKYjGG
Resultado final:
0 notes
Text
Helicóptero Comp Visual
En esta ocasión, se trabajaba en transformaciones. Es decir, rotación, traslación y escalamiento. Esto se inicia, como en la primera vez, con crear los vértices de la figura. Es decir, un helicóptero. Luego de crear sus vértices y asignar sus posiciones, inicia la verdadera transformación:
1. Se usa la identidad(mat4) y la función slice para crear subarreglo que, luego, pasa al arreglo principal posterior al uso de una rotación para las hélices(Por razones que no entiendo, no rotan. No entiendo cómo girar sólo una parte de la figura)
2. Se crean dos variables. La modificación de estas darán el movimiento.
3. Se hace una operación con la velocidad de movimiento y las variables anteriormente creadas para que el movimiento no sea sólo en una dirección al punto de salir de la pantalla sin más(Que haya movimiento como de resorte)
4. Se crean funciones con un event listener para click, haciendo que el movimiento del helicóptero pueda centrarse en donde se haga click y el helicóptero se mueva hasta ahí.
5. Se usa la función mat4.translate. Por el tamaño, se multiplica el movimiento. Esto es lo que hace que el helicóptero se mueva.
Link al código: https://codepen.io/xaga97/pen/dybvvJM
Resultado final:
0 notes
Text
Tarea 2 Computación Visual Interactiva
En esta ocasión, la tarea era de crear una vasija con fondo cuadrado y lo demás redondo que, además de esto, tuviese una base cuadrada. Como se puede observar abajo, la base cuadrada no es perfecta y, por el uso de Triangle Strip, queda un triángulo adicional. A continuación se dan los pasos para su creación y conceptos usados/aprendidos: 1. Se encontró el ejemplo de un estudiante de semestre anterior de UFO y sus conos y esferas, además de un cálculo con vértices variables. La variable ‘angles’ es la que define cuántos triángulos crean el cono en este caso. El número es personalizable.
2. Se tiene un cálculo como función para crear los distintos vértices que se usan para crear el cono. Además de esto, el color es aleatorio con la función Math.Random para que los vértices tengan distinto color como es requerido.
3. Se junta esto con el cuadro inicial, no es perfecto y deja algunos huecos al no ser un círculo a círculo. Por esto, se modifica a que sea más grande el cuadrado de abajo pretendiendo minimizar así el problema.
Tiempo usado: 2 horas de investigación, 1 de revisión de código y 2 en modificación. Total: 5 horas
Gracias a esto, se crea la tarea de la vasija con fondo cuadrado. El código se encuentra en el siguiente link: https://jsfiddle.net/Xaga97/yLabfn1c/8/
0 notes
Video
tumblr
A continuación se va a dibujar por medio de WebGL: Una figura cambiando presentado en este ejemplo a un rectángulo.
Para dibujar este rectángulo, se deben seguir ciertos pasos:
1. Recuperar el canvas del HTML, usando la función getElementById con el nombre del Canvas creado en HTML(Donde será dibujado el rectángulo).
2. Iniciar el contexto de WebGL, bien sea experimental o normal, para que el javascript haga uso de WebGL.
3. Se inician y configuran los Shaders. Estos servirán para los colores y los vértices de las figuras. Luego, se configuran sus matrices. El modificar los vértices y colores en sus matrices significa generar cambios en la figura dibujada.
4. Lo siguiente que se hace es dibujar la escena inicial, es decir, el momento que existirá apenas se abra la página. Además, se decide el punto de cámara inicial.
5. El siguiente paso requiere poner las transiciones en radianes, es decir, qué tanto girará el rectángulo, en qué dimensiones y de qué forma.
6. Se configura cuántos vértices se usarán y de qué forma, con esto se configura la figura, incluyendo la posibilidad de quitar una “tapa” del rectángulo, por ejemplo.En este caso, una de las tapas ha sido extraída modificando a 10 el número de vértices pero, si se cambia a 36, la caja vuelve a estar completa. Esto se hace con fines demostrativos únicamente.
7. Finalmente, se usa la función de render y se modifica cada cuánto tiempo girará, siendo esto cuando se redibuja el elemento.
En conclusión, el ejemplo es educativo y su exhaustiva revisión permite el conocer cómo funciona WebGL para figuras básicas. Gracias a esto, es posible dibujar distintos sólidos con el número requerido de lados y sus distintos vértices.Su análisis es valioso y, definitivamente, el ejemplo utilizado funciona muy bien para iniciar con el lenguaje.
El código fuente está ubicado en el siguiente link: https://codepen.io/xaga97/pen/xvWwGq
Tiempo utilizado para encontrar y modificar el ejemplo: 2 horas,
Resultado final:
0 notes
Video
tumblr
A continuación se va a dibujar por medio de WebGL: Una figura cambiando presentado en este ejemplo a un rectángulo.
Para dibujar este rectángulo, se deben seguir ciertos pasos:
1. Recuperar el canvas del HTML, usando la función getElementById con el nombre del Canvas creado en HTML(Donde será dibujado el rectángulo).
2. Iniciar el contexto de WebGL, bien sea experimental o normal, para que el javascript haga uso de WebGL.
3. Se inician y configuran los Shaders. Estos servirán para los colores y los vértices de las figuras. Luego, se configuran sus matrices. El modificar los vértices y colores en sus matrices significa generar cambios en la figura dibujada.
4. Lo siguiente que se hace es dibujar la escena inicial, es decir, el momento que existirá apenas se abra la página. Además, se decide el punto de cámara inicial.
5. El siguiente paso requiere poner las transiciones en radianes, es decir, qué tanto girará el rectángulo, en qué dimensiones y de qué forma.
6. Se configura cuántos vértices se usarán y de qué forma, con esto se configura la figura, incluyendo la posibilidad de quitar una “tapa” del rectángulo, por ejemplo.En este caso, una de las tapas ha sido extraída modificando a 10 el número de vértices pero, si se cambia a 36, la caja vuelve a estar completa. Esto se hace con fines demostrativos únicamente.
7. Finalmente, se usa la función de render y se modifica cada cuánto tiempo girará, siendo esto cuando se redibuja el elemento.
En conclusión, el ejemplo es educativo y su exhaustiva revisión permite el conocer cómo funciona WebGL para figuras básicas. Gracias a esto, es posible dibujar distintos sólidos con el número requerido de lados y sus distintos vértices.Su análisis es valioso y, definitivamente, el ejemplo utilizado funciona muy bien para iniciar con el lenguaje.
El código fuente está ubicado en el siguiente link: https://codepen.io/xaga97/pen/xvWwGq
Tiempo utilizado para encontrar y modificar el ejemplo: 2 horas,
Resultado final:
1 note
·
View note