Scarleth Osorio Amaya Imagen Escrita 2020
| Título | Scarleth Osorio Amaya Imagen Escrita 2020 |
|---|---|
| Asignatura | Imagen Escrita |
| Del Curso | Imagen Escrita 2020 |
| Carreras | Arquitectura, Diseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property. |
| Alumno(s) | Scarleth Osorio |
| Profesor | Herbert Spencer |
| URL | https://scarleth-osorio.github.io/scarleth.github.io/ |
IMAGEN ESCRITA 2020
Pagina Web
Repositorio Github
¿Por qué los gatos mueven la cola?
https://github.com/scarleth-osorio/imagen-escrita-2020
pagina final
https://github.com/scarleth-osorio/scarleth.github.io.git
Pagina
https://scarleth-osorio.github.io/.
https://scarleth-osorio.github.io/scarleth.github.io/
autorretrato
se intento hacer una auto representación animada de mi misma. en su mayoría hecha de figuras geométricas con un pequeño movimiento interactivo en las pupilas.
ciclo for
el ciclo for es un ciclo de repetición.
primero
Dos Variantes
repetición de circulos con difuminación de distintos colores, que posee un fondo interactivo que cambia de color cuando se pasa el mouse por encima
segundo
repetición de circulos que va en aumento de tamaño de izquierda a derecha, con traslucidad y degrade de colores.
Quinto
Repetición de circulos que van cambiando de colores mientras avanzan, que va creando una linea que se mueve por el lienzo y choca con las esquinas.
Sexto
Aparecen repetición de puntos con traslucidez de tonos morados y rosas.
Espiral
Uno
Espiral de fondo negro, que se crea a través de pequeños triángulos amontonados que giran al rededor de ellos mismos creando el espiral infinito
Dos
Espiral de fondo naranja que avanza como un espiral y va colocando circulos al rededor de un eje dando una vuelta de 360grados y donde se van separando las filas de circulos
Recursión
agregar descripción
Attaction
Simple
es la atracción de las bolas blancas hacia la bola central rosa. estas se mueven para llegar a la bola rosa pero a su vez y por su velocidad se pasan de largo por lo que el ciclo es infinito
Interactivo
Atracción esferas grises con borde blanco, a la esfera celeste interactiva, con el mouse se puede mover la esfera celeste al presionar y arrastrar hacia cualquier parte del lienzo. con mayor velocidad y menos masa para que el movimiento sea mas rápido y nunca alcancen la bola celeste.
Particles
es un sistema de partículas ,donde se animan muchas bolas en continuo movimiento con cadenas que las unen y separan . como se muevan y como se unan esta influenciado por la velocidad de estas, la cantidad de bolas, la cantidad de tiempo que están juntas o separadas, entre otras cosas.
Parcticle - Estrellas
Sistema de partículas, simulando "estrellas" donde estas son mas traslucidas y pequeñas que el otro particles.
Practicas
Flor
agregar descripción
Líneas Ondeadas
Líneas ondeadas de colores. que parten de un mismo punto. Cada vez que cargues la pagina se verán diferentes líneas ondeadas. con diferentes cantidades y diferentes colores y formas. si no me crees inténtalo :)
Particle System
agregar descripción
Esfera
esfera hecha de circulos blancos que son en mayor cantidad en el borde del circulo.
Ideas
Idea 1
figuras 3d (esferas) que se mueven en el lienzo creando formas.
para hacer las figuras 3d no se puede utilizar el mismo formato de lienzo que el 2d por lo que en vez de poner el ancho y el alto .se pone el WEBGL. y quedaría ""createCanvas (windowWidth, windowHeight, WEBGL)"".
se coloco un fondo oscuro (10) para resaltar los movimientos de las esferas que poseen un color mas llamativo.
se le agrego una configuración de luz ,que va cambiando mediante se mueva el mousex y mousey.
también una luz ambiental ,que también seria el color de las esferas
también se especifica como es el giro de estas esferas y por ello su velocidad para que se creen las figuras con su movimiento y no se arme un enredo. y así se van modificando visualmente los movimientos que siguen las esferas.
a las esferas se les configuro la rotación individual de ellas, el desplazamiento y la velocidad individual donde se pusieron bajo los números para que no salieran volando como si estuvieran locos.
al primero en la configuración de rotación se le agrego un numero alto "rotateY(frameCount * 0.100000)" para que las figuras se movieran mas rápido y así se creo una imagen de tipo gusano que avanza por un vórtice de esferas y esta imagen cambia constantemente.
al segundo la rotación se puso en un numero menor "rotateY(frameCount * 0.0000001)" así las figuras se controlan mas y quedan en 2 constantes vórtices que se intercalan y que están hechos de filas de esferas que giran
Idea 2
pizarra de mándalas perrona/ caleidoscopio
Pizarra de fondo gris donde se puede dibujar con el cursor mándalas o figuras con efecto de caleidoscopio, que va cambiando su color de blanco, gris y negro .Además de poder cambiar su tamaño. se uso la misma lógica de una pizarra normal pero utilizando 360 para dibujar por lo que se dibuje en una parte del lienzo se repite en todo este de forma homogénea.
si quieres borrar tu obra de arte luego de dibujar para empezar otra vez aprieta el botón de clear
si quieres desestresarte haciendo mándalas usa esta pizarra y descarga la rabia :)
Idea 3
agregar descripción
ayudas
muchas de las ideas o cuando necesitaba ayuda para realizar algo o saber algo en p5.js o hacer alguna animación o figura las buscaba en
The Coding Train
un canal de YouTube muy bueno que explica como usar p5.js o como crear ciertas cosas
Link YouTube
