Crear arte abstracto con JavaScript Y P5.js

1. Introducción: Hola. Mi nombre es Asher. Afirmativa. Ilegal. Y hoy te doy la bienvenida a mi clase. Vamos a aprender a crear arte abstracto programáticamente usando sólo javascript y el Broza. Aquí te dejamos algunas muestras del arte que estaremos creando. Como puedes ver, estos gráficos son extremadamente flexibles. Simplemente logrando unas pocas variables, podemos cambiar drásticamente sus formas y colores. Ahora, podrías estar pensando que habrá ah, mucho, Matt, Matt, nuestra programación involucrada en esta clase. Pero no, permítanme asegurarles que ese definitivamente no es el caso. Esta va a ser una clase muy fácil, y va a estar tranquila afilada, también. Pero sé si aunque estarás armado con un nuevo tipo de conocimiento que puedes usar mientras haces algo creativo. Si no algo más, al menos podrás crear y compartir unos fondos de pantalla muy geniales con tus amigos. Entonces, ¿a qué esperas? Simplemente abre la siguiente lección y nos sumergimos justo en el código 2. Dibujar el atraer de Jong: Hola y bienvenidos de nuevo todo lo que necesitas seguir. Lo que imparto en esta clase es un navegador. Abrigo abierto, Ben, son cualquier otro editor de código en línea gratuito, y estarás todo listo. Puedes usar este editor sin iniciar sesión, pero tendrás una mejor experiencia si inicias sesión. Está bien. Ahora estaremos utilizando una biblioteca llamada P five Dajae como para crear nuestros gráficos abstractos. Para que lo sepas, esta es una biblioteca muy popular y poderosa, y es un puerto JavaScript fuera del lenguaje de programación visual llamado procesamiento. De todos modos, para poder usar la biblioteca en el editor de plan de código solo amamanta un botón de configuración. Abre la pestaña JavaScript y escribe p five dot Aquí podrás ver estas tres opciones. Por ahora, necesitamos solamente las 1. 2 opciones. Por lo que los judíos sean 50 J s primero. Siguiente Judíos, sean cinco puntos tontos ni Js. Como se puede ver en sus enlaces. Ser cinco Js es la biblioteca gráfica core y ser cinco puntos dom Georges es un add on que me encanta que trabajes con el Dharma fuera de tu página más fácilmente ahora puedes presionar el botón guardar y cerrar porque no necesitamos agregar nada más. No vamos a estar escribiendo ninguno. Es TML nuestro código CSS en esta clase, así que siéntete libre de minimizar estas ventanas. Para dibujar cualquier cosa en una página web, necesitarás un lienzo con ser 50 J s. Debes crear el lienzo dentro de una función llamada harta, así que crea primero el conjunto de funciones y dentro de ella llamada función crear lienzo. Esta función toma dos argumentos. Abierta y altura. Puede especificar sus propios valores en función de sus preferencias. Voy a decir 500 com a 500 año para que pueda tener un bonito lienzo cuadrado por defecto. Tenemos un bolígrafo negro, que estaremos secando ingenio. Si deseas cambiar el color de tu lápiz, debes usar la función de trazo. Ahora esta función espera tres valores. Uno para el rojo competente fuera de tu color, uno para el verde confiado y otro para el azul confiado. Entonces básicamente quiere que los valores R, G y B por separado para que nuestro arte abstracto luzca más tres d, aunque sugiero que incluya 1/4 valor que será el Alfa Value y Alfa Off 50 debería ser lo suficientemente bueno. En este punto, estamos listos para empezar a dibujar. Para conducirlo sea 50 J. S. Debes crear una nueva función llamada drop y hacer todo tu secado dentro de ella. Esta es una función especial y se llamará automáticamente 60 veces por segundo, lo que permite crear animaciones fácilmente. Está bien. Ahora, para crear nuestro arte abstracto, estaremos usando sólo a ecuaciones matemáticas. Y estas son las preguntas. Juntos definen un tipo de embarcaciones muy popular llamado Peter the Young tractor. El nombre no es realmente tan importante porque hay decenas de tal tractores y puedes encontrarlos todos en Wikipedia. Pero creo que la nota es que este un tractor es muy sencillo. Es ecuaciones son muy tiburón y contienen solo para ignorar las funciones métricas. Como habrías adivinado, la idea es que acabas de ver las preguntas fáciles para obtener valores para X e Y y sangre nombrar. ¿ Esas coordenadas están en el lienzo? Es extremadamente sencillo. Como verás en los próximos minutos. Empecemos a resolverlos. En primer lugar, hay cuatro coeficientes en nuestras preguntas. Oye B, C y D. No estarán tendiendo dentro de nuestra función de sorteo, así que los declaremos fuera de ella. Para mantener las cosas simples, declararé en la parte superior de nuestro programa como variables globales. Puedes darle cualquier valor aleatorio a estos coeficientes, pero asegúrate de que todos caigan dentro del rango menos tres y blustery. Esto es muy importante porque de lo contrario las preguntas no dibujarán nada a continuación. En las ecuaciones se contenían X e Y como variables, así que declarémoslas escuchar ambas pueden tener una como sus valores iniciales. Ahora dentro de la función de dibujo, definamos dos nuevas variables para almacenar los valores actuales de X e y. los llamaré viejos, ex y viejos. Por qué y luego solo actualizamos X e Y en base a estas preguntas. Entonces para calcular el signo, podemos usar directamente la función sinusoidal y para calcular el signo co, podemos usar la función de costo. Literalmente estoy traduciendo las preguntas fáciles al código JavaScript. Entonces nada especial que pase aquí hace lo mismo para la pregunta de Hawaii, y eso es todo. Ahora hay un problema. Nuestras ecuaciones contenían solo signos y signos co, por lo que el valor de X e Y será muy pequeño. De hecho, siempre estarán dentro del rango menos dos y más dos. Si intentas trazar un punto usando estos valores, tu arte abstracto será extremadamente pequeño. Será casi invisible. Entonces lo que queremos hacer ahora es escalar esos valores para que estén en este partido las dimensiones fuera de nuestro lienzo haciendo eso es muy fácil, pero procesar la función de mapa ings. Por lo que sólo se especifica el rango original del valor, que es menos dos y más dos, y luego el rango deseado del valor para la coordenada X. Será cero en el trabajo del lienzo. Tenemos que repetir lo mismo para la coordenada y, pero el rango deseado será cero y la altura del lienzo. Ahora y ahora. Podemos llamar a la función de punto para dibujar un punto en nuestro lienzo usando estas coordenadas, y eso es todo recién fresco el botón de correr para ver el gráfico que creaste. Como dije antes, la función de sorteo se está llamando repetidamente cada vez que se llama. Se dibuja un nuevo punto en el lienzo, por lo que deberías poder ver la forma del arte abstracto lentamente en el lienzo. Si eres impaciente como yo, sin embargo, sin embargo, siéntete libre de agregar un bucle dentro de la función de sorteo para que durante su llamada, se dibujen múltiples puntos. Voy a tratar de sacar 1000 puntos por llamada. Como se puede ver, esto es mucho más rápido. Este arte abstracto depende en gran medida de los valores fuera de estos coeficientes. Si los cambias, obtendrás un secado completamente diferente. Entonces déjame cambiar rápidamente algunos de ellos. Ahora, como puedes ver, esto se ve muy diferente. Pero cambiar manualmente los coeficientes es bastante tedioso. Por lo que en la siguiente lección, te mostraré cómo crear una sencilla interfaz gráfica de usuario que te permita cambiarlos simplemente arrastrando unos controles deslizantes. Te veré ahí. 3. Manipulación del atractivo:: Bienvenido de nuevo. En esta lección, usaremos la biblioteca P five Dom para crear cuatro controles deslizantes para cambiar los valores de nuestros cuatro coeficientes. Entonces los declararé todos aquí y los llamaré es más tarde. Ser slider. Ver Slater y estos más tarde. Dentro de la función de configuración, debes inicializar todos tus deslizadores utilizando la función create slider que espera rango como su entrada. Todos son coeficientes deben estar dentro del rango menos tres y más árbol. Entonces di que aquí a continuación necesitas especificar el valor predeterminado de esto más adelante, así que solo puedes decir hey aquí. Y por último, debe especificar el valor del paso. Este valor decide cuánto cambia el coeficiente al arrastrar el deslizador. Digamos que queremos cambiarlo en incrementos off 0.1 inicializaron los otros tres deslizadores de la misma manera. Simplemente asegúrese de que el valor predeterminado coincida con el valor de los coeficientes. A continuación, cargo un C Slater y verás como el valor predeterminado y por último, el deslizador. Si estás en el cordón, deberías poder ver estos deslizadores ahora. Ahora mismo, arrastrarlos no hace nada, así que también agreguemos un botón a nuestra página web. Deberías poder presionar este botón después de arrastrar estas letras para volver a dibujar el arte abstracto para que puedas darle un nivel diciendo redibujar. De acuerdo, ahora el mango del dedo del pie hace clic en este botón. Puedes usar la función boca presionada y pasarle una función anónima como argumento . Dentro de la función, debe actualizar los valores de los coeficientes para que coincidan con los valores fuera más mínimo, Así que cambie el valor de A a un valor de punto de deslizador. De igual manera, ser para ser deslizador ese valor C dos c slater que valor Andy a estos más tarde ese valor. Obviamente queremos despejar el lienzo cuando empecemos a dibujar con estos nuevos coeficientes, así que llame a la función de fondo aquí en el pasado 255 como argumento a ello. Esto esencialmente elimina todos los puntos que dibujamos antes y hace que nuestro lienzo sea completamente blanco. Muy bien, adelante y ejecuta el código y empieza a arrastrar los deslizadores para crear diferentes piezas de arte . Es tan simple como eso. Si no estás contento con el color fuera de tus puntos, simplemente cambia el color del trazo en la configuración y vuelve a correr. Si lo desea Puede crear deslizadores para los valores R, G y B del color del trazo, también. Pero dejo eso como un ejercicio para el proyecto de clase. Asegúrate de completar el proyecto en compartir tus creaciones conmigo y otros alumnos. Yo los espero. Ahora sabes crear arte con JavaScript y un poco fuera de los mapas. Gracias por ver morder.