Scarleth Osorio Amaya Imagen Escrita 2020

De Casiopea
Scarleth Osorio Amaya Imagen Escrita 2020


TítuloScarleth Osorio Amaya Imagen Escrita 2020
AsignaturaImagen Escrita
Del CursoImagen Escrita 2020
CarrerasArquitectura, Diseño, Diseño Gráfico
Alumno(s)Scarleth Osorio
ProfesorHerbert Spencer
URLhttps://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

Florcita re fachera

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

https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw