Código de JavaScript - Partículas distribuidas en un plano con canvas

Imágen de perfil

Partículas distribuidas en un plano con canvasgráfica de visualizaciones


JavaScript

Publicado el 10 de Agosto del 2018 por Administrador
756 visualizaciones desde el 10 de Agosto del 2018. Una media de 77 por semana
El siguiente ejemplo muestra un conjunto de partículas distribuidas en un plano (Global Array of Particles) con un movimiento vertical browniano que son representadas en un canvas en perspectiva caballera (falso 3D).

perspectiva-caballera

1

Actualizado el 11 de Agosto del 2018 (Publicado el 10 de Agosto del 2018)gráfica de visualizaciones de la versión: 1
757 visualizaciones desde el 10 de Agosto del 2018. Una media de 77 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella


Forma parte de Ejemplos de código JavaScript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
    <script>
    var gcc ;          // gcc == "Global Canvas Context"
    var gap = [];      // gap == "Global Array of Particles"
    var SINPI_4 = Math.sin(Math.PI/4);
    var COSPI_4 = Math.cos(Math.PI/4);
 
    function ObjectParticle(posX, posY, posZ){
        this.posX = posX;
        this.posY = posY;
        this.posZ = posZ;
        this.kgr  = 0.01;
    }
 
    function drawParticle(context, part) {
        posX = part.posX - (0.5 * COSPI_4 * part.posY);
        posY =             (0.5 * part.posY*SINPI_4);
        context.moveTo(posX,posY);
        posY-= + part.posZ;
        posX = part.posX - (0.5 * COSPI_4 * part.posY);
        context.lineTo(posX,posY);
    }
 
    function redrawCanvas() {
        gcc.clearRect(0,0,1000,1000);
        gcc.strokeStyle = "rgb(0,0,0)";
        gcc.beginPath();
        for (idx=0; idx<gap.length; idx++) {
            drawParticle(gcc,gap[idx]);
        }
        gcc.stroke();   // <--- Or fill()
    }
 
    function simulatePhysics() {
        // La física simulada es muy simple. Movimiento browniano.
        for (idx=0; idx<gap.length; idx++) {
            par = gap[idx];
            par.posZ += (Math.random()-0.5);
        }
        redrawCanvas();
    }
 
    function initParticles() {
        for (var posX=0; posX<=200; posX+=20){
            for (var posY=0; posY<=200; posY+=20){
                gap.push(new ObjectParticle(posX, posY, 0));
            }
        }
        return;
    }
 
    function initApp(){
        canvas1 = document.getElementById('idCanvas1');
        gcc  = canvas1.getContext('2d');
        gcc.scale(1.5,1.5);
        gcc.translate(100,50);
        initParticles();
        setInterval(simulatePhysics,100);
    }
 
    </script>
    <style type="text/css">
        canvas { border: 1px solid black; }
    </style>
</head>
<body onload="initApp();" >
    <canvas id="idCanvas1" width="500" height="500"></canvas>
</body>
</html>



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4746  
Revisar política de publicidad