Particles with images

num = 300;
p = [];
max_spd = 2;

particle_image = 0;

function setup() {
    createCanvas(windowWidth, windowHeight);
    colorMode(HSB);
    for (let i = 0; i < num; i++) {
        p.push(new Particle(createVector(random(width), random(height)), 100, 150));
        stroke(255);
    }
    particle_image = loadImage("32861069_10156294632646585_6523526685164306432_n.png");
}

function draw() {
    background(0);
    for (var i = 0; i < num; i++) {
        p[i].update(p, i);
    }
}

class Particle {

    constructor(pos, r, mr) {
        this.pos = pos;
        this.r = r;
        this.mr = mr;
        this.spd = 2;
        this.vel = createVector(random(-1, 1), random(-1, 1));
    }

    update(p, i) {
        var h = map(this.pos.x, 0, width, 0, 255);
        this.pos.add(this.vel);

        if (this.pos.x < -10) this.pos.x = width; // if it goes backwards it will end up on far side of screen
        if (this.pos.x > width + 10) this.pos.x = 0; //
        if (this.pos.y < -10) this.pos.y = height;
        if (this.pos.y > height + 10) this.pos.y = 0;

        this.vel.x = constrain(this.vel.x + random(-this.spd, this.spd), -max_spd, max_spd);
        this.vel.y = constrain(this.vel.y + random(-this.spd, this.spd), -max_spd, max_spd);

        for (var j = i + 1; j < p.length; j++) {
            var ang = atan2(this.pos.y - p[j].pos.y, this.pos.x - p[j].pos.x);
            var d = this.pos.dist(p[j].pos);
            if (d < this.r) {
                stroke(h, 255, map(d, 0, this.r, 255, 0));
                strokeWeight(map(d, 0, this.r, 3, 0));
                line(this.pos.x, this.pos.y, p[j].pos.x, p[j].pos.y);

                var force = map(d, 0, this.r, 4, 0);
                this.vel.x += force * cos(ang);
                this.vel.y += force * sin(ang);
            }
        }

        var ang = atan2(this.pos.y -mouseY, this.pos.x -mouseX);
        var d = this.pos.dist(createVector(mouseX, mouseY));
        if (d < this.mr) {
            var force = map(d, 0, this.mr, 20, 0);
            this.vel.x += force * cos(ang);
            this.vel.y += force * sin(ang);
        }

        noStroke();
        //fill(h, 255, 255);
        //ellipse(this.pos.x, this.pos.y, 5, 5);
        var image_scale = 20;
        var image_x = this.pos.x  - (particle_image.width/image_scale)/2;
        var image_y = this.pos.y  - (particle_image.height/image_scale)/2;
        var image_w = particle_image.width/image_scale;
        var image_h = particle_image.height/image_scale;
        image(particle_image, image_x, image_y, image_w, image_h);
    }
}