1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

JavaScript "Partikel erstellen"

Dieses Thema im Forum "Sonstige Programmiersprachen" wurde erstellt von Vanessa Großmann, 31. März 2018.

  1. Vanessa Großmann

    Vanessa Großmann New Member

    Hallo,

    Ich bin Vanessa und arbeite derzeit in einem Team an einem Hochschulprojekt. Wir möchten gerne eine Animation mit Partikeln machen wie in diesem GIF.
    Particle.gif
    Wir würden Velocity benutzen, um die Partikel durch Zufall also random auf dem Canvas zu bewegen, wir wissen aber nicht wie wir das mit einer Schleife machen können.

    Vielen Dank für eure Hilfe
    Vanessa







    Das ist der Code in javascript:



    window.onload = onReady;
    var canvas;
    var ctx;

    function onReady(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');


    // loading picture
    img = new Image();
    img.src = 'particle.png';

    draw();
    }


    function draw(){

    var more=1;
    for(var i=0; i<100; i++){
    more=more+30;
    ctx.beginPath();
    ctx.drawImage(img, 20+more, 200);
    ctx.fill();
    }
    }
  2. dominikb

    dominikb Member

    Möchtet ihr die Animation in "Handarbeit" erstellen oder ist auch eine Hilfestellung erlaubt? Falls ja: particles.js
    Vanessa Großmann gefällt das.
  3. asc

    asc Active Member c-b Experte

    Oder das hier:
    http://soulwire.github.io/sketch.js/

    Per Hand:
    Partikel erstellen, Positionieren, Endposition ermitteln (Zufall denke ich), dann mit requestAnimationFrame und einem easing auf dem Canvas zur Endposition bewegen.
    Vanessa Großmann gefällt das.
  4. Vanessa Großmann

    Vanessa Großmann New Member

    Vielen Dank für eure Mühe! Hat uns geholfen :)