Bosquejo.js | Introducción – Barcelona Geeks

Sketch.js es una plataforma de codificación creativa ligera. Proporciona todos los fragmentos y el código que necesita agregar para crear animaciones y efectos geniales en su sitio web. Sketch.js hace que la implementación de animaciones sea muy rápida y sencilla. Es similar a usar Processing . Su concepto principal se basa en eventos como eventos del mouse, eventos táctiles y eventos del teclado. Todos los eventos están aumentados por conveniencia para que pueda usarlos fácilmente y fuera de los controladores de eventos si lo desea. Para obtener las coordenadas del mouse y el evento táctil, tenemos x e ycoordenadas que también se utilizan en JavaScript normal. El uso de sketch.js hace que la codificación sea más rápida y divertida sin preocuparse por la configuración y escribir una gran cantidad de código repetitivo para la configuración. Proporciona un contexto gráfico integrado y bucles de animación. Entonces, por fin, uno debería usar sketch.js para hacer animaciones, ya que es rápido, fácil de configurar y usar, y le ahorra escribir mucho código.

Instalación:

Paso 1: Primero debe descargarlo en su máquina. El enlace de descarga se proporciona a continuación.
Descargar Sketch.js: Descargar ahora .
Así es como se verá su página de github. Haga clic en el botón descargar o clonar para descargar el archivo zip.
Paso 2: Ahora, extraiga el archivo zip. Debe agregar el archivo sketch.min.js a su proyecto.
Paso 3: ahora, si ingresa a la carpeta de ejemplos, verá tres archivos HTML. Todo lo que necesita hacer es copiar el JS del archivo cuyo efecto desea agregar a su proyecto.

Y ese es todo el trabajo que tienes que hacer. A continuación se muestra el código final después de agregar uno de los JS del ejemplo a su proyecto.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Sketch.js</title>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            background: green;
        }
    </style>
</head>
  
<body>
    <script src="sketch.min.js"></script>
    <script>
  
        // Particle function
        function Particle(x, y, radius) {
            this.init(x, y, radius);
        }
  
        Particle.prototype = {
            init: function (x, y, radius) {
                this.alive = true;
                this.radius = radius || 10;
                this.wander = 0.15;
                this.theta = random(TWO_PI);
                this.drag = 0.92;
                this.color = '#fff';
                this.x = x || 0.0;
                this.y = y || 0.0;
                this.vx = 0.0;
                this.vy = 0.0;
            },
  
            move: function() {
                this.x += this.vx;
                this.y += this.vy;
                this.vx *= this.drag;
                this.vy *= this.drag;
                this.theta += random(-0.5, 0.5) * this.wander;
                this.vx += sin(this.theta) * 0.1;
                this.vy += cos(this.theta) * 0.1;
                this.radius *= 0.96;
                this.alive = this.radius > 0.5;
            },
  
            draw: function (ctx) {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };
  
        var MAX_PARTICLES = 280;
        var COLOURS = ['#69D2E7',
            '#A7DBD8',
            '#E0E4CC',
            '#F38630',
            '#FA6900',
            '#FF4E50',
            '#F9D423'];
  
        var particles = [];
        var pool = [];
        var demo = Sketch.create({
            container: document.getElementById('container'),
            retina: 'auto'
        });
  
        demo.setup = function() {
  
            // Set off some initial particles.
            var i, x, y;
  
            for (i = 0; i < 20; i++) {
                x = (demo.width * 0.5) + random(-100, 100);
                y = (demo.height * 0.5) + random(-100, 100);
                demo.spawn(x, y);
            }
        };
  
        demo.spawn = function (x, y) {
            var particle, theta, force;
            if (particles.length >= MAX_PARTICLES)
                pool.push(particles.shift());
  
            particle = pool.length ? pool.pop() : new Particle();
            particle.init(x, y, random(5, 40));
  
            particle.wander = random(0.5, 2.0);
            particle.color = random(COLOURS);
            particle.drag = random(0.9, 0.99);
  
            theta = random(TWO_PI);
            force = random(2, 8);
  
            particle.vx = sin(theta) * force;
            particle.vy = cos(theta) * force;
  
            particles.push(particle);
        };
  
        demo.update = function() {
  
            var i, particle;
  
            for (i = particles.length - 1; i >= 0; i--) {
  
                particle = particles[i];
  
                if (particle.alive) particle.move();
                else pool.push(particles.splice(i, 1)[0]);
            }
        };
  
        demo.draw = function() {
  
            demo.globalCompositeOperation = 'lighter';
  
            for (var i = particles.length - 1; i >= 0; i--) {
                particles[i].draw(demo);
            }
        };
  
        demo.mousemove = function() {
  
            var particle, theta, force, touch, max, i, j, n;
  
            for (i = 0, n = demo.touches.length; i < n; i++) {
  
                touch = demo.touches[i], max = random(1, 4);
                for (j = 0; j < max; j++) {
                    demo.spawn(touch.x, touch.y);
                }
  
            }
        };
    </script>
</body>
  
</html>

Si echamos un vistazo al código anterior, todo lo que hemos hecho es proporcionar un fondo, agregar dos archivos JS, uno es sketch.min.js y el otro es de uno de los archivos de la carpeta de ejemplo. Hemos demostrado la partícula aquí.

Producción:

Publicación traducida automáticamente

Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta