Editar Nuevo Proyecto: Scarleth Osorio Amaya Imagen Escrita 2020

Título:
Imagen:	Subir archivo
Tipo de Proyecto:	Proyecto de Taller  Proyecto de Curso  Proyecto de Tutoría  Proyecto de Titulación  Proyecto de Posgrado  Proyecto Extracurricular  Proyecto Propio  Proyecto de Pregrado  Anteproyecto de Titulación  Proyecto de Financiamiento Externo o Fondo Concursable Importante: Si se trata de un proyecto de Investigación, hay que cambiar el tipo de plantilla editando directamente el código de esta página. Para esto hay un link en la cabecera EDITAR CÓDIGO. Desde cambiar de {{Proyecto}} a {{Proyecto de Investigación}} porque éstos tienen otros campos y particularidades especiales.
Palabras Clave:	todo en bajas, separadas por coma
Año de Inicio:
Año de Término:
Carreras Relacionadas:	Arquitectura  Diseño  Magíster  Otra
Asignaturas Relacionadas:	Imagen Escrita
Cursos Relacionados:	Imagen Escrita 2020
Profesor:	Herbert Spencer
Alumnos:	Scarleth Osorio
PDF:
URL:
Posición:	Calcular coordenadas utilizando la dirección

Texto libre:

=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. {{#Widget:P5js |url = https://editor.p5js.org/Scarleth_Osorio/present/wDN7urpOI |width = 400 |height = 400 }} =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 {{#Widget:P5js |url = https://editor.p5js.org/Scarleth_Osorio/present/EXHGNRxW3 |width = 400 |height = 400 }} {{#Widget:P5js |url = https://editor.p5js.org/Scarleth_Osorio/present/U2K3MLwXb |width = 600 |height = 400 }} ==segundo== repetición de circulos que va en aumento de tamaño de izquierda a derecha, con traslucidad y degrade de colores. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/Q0H5uZKiq |width = 700 |height =500 }} ==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. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/f9XSqeEcK |width = 600 |height =400 }} ==Sexto== Aparecen repetición de puntos con traslucidez de tonos morados y rosas. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/xEbovcGst |width = 600 |height = 400 }} =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 {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/ciWZFOR_M |width = 750 |height = 600 }} ==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 {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/zzQrK-2vh |width = 400 |height = 400 }} =Recursión= '''agregar descripción''' {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/o5Pxy3eq8 |width = 650 |height = 500 }} =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 {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/V2p3zTIQ0 |width = 650 |height = 500 }} ==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. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/aP--EWDEY |width = 600 |height = 600 }} =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. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/D3mb9rjTo |width = 720 |height = 400 }} ==Parcticle - Estrellas== Sistema de partículas, simulando "estrellas" donde estas son mas traslucidas y pequeñas que el otro particles. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/fIwsh4FfI |width = 720 |height = 400 }} =Practicas= ==Flor== '''agregar descripción''' {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/ahtOseDN7|width = 750 |height = 650 }} ==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 :) {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/_1HwhQtIn |width = 1000 |height = 500 }} == Particle System== '''agregar descripción''' {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/onFAhwTMy |width = 720 |height = 400 }} ==Esfera== esfera hecha de circulos blancos que son en mayor cantidad en el borde del circulo. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/1YMdb2naO |width = 600 |height = 400 }} =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. {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/N_iDKagFy |width = 820 |height = 450 }} 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 {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/yq0G7peoj |width = 820 |height = 450 }} ==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 :) ''' {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/7vyGppLmP |width = 820 |height = 450 }} ==Idea 3== '''agregar descripción''' {{#Widget:P5js |url =https://editor.p5js.org/Scarleth_Osorio/present/shE_6eW_c |width = 820 |height = 450 }} =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

Guardar la página Mostrar previsualización Mostrar los cambios Cancelar