let total = 150;

let img;   

// let ww2iw;

​

function preload() {

    img = loadImage('p6.jpg');

}

​

function setup() {

    createCanvas(img.width, img.height);

    background(255);

    // ww2iw = windowWidth / img.width;// to fit

    // console.log(ww2iw); // calculating ww2iw in the console

    for(var i = 0; i < total; i++){

        patterns[i] = {};

        patterns[i].oldPos = {x: img.width/2, y: img.height/2};

        patterns[i].pos = {x: img.width/2, y: img.height/2};

        patterns[i].dir = random(total);

        patterns[i].rad = random(total);

        patterns[i].angle = 0;

    }

}

​

function draw() {

    // scale(ww2iw, ww2iw);//scaling the image

    for(var i = 0; i < total; i++){

        var pattern = patterns[i];

        pattern.angle += 1/pattern.rad*pattern.dir;

​

        pattern.pos.x += cos(pattern.angle) * pattern.rad;

        pattern.pos.y += sin(pattern.angle) * pattern.rad;

        if(brightness(img.get(round(pattern.pos.x), round(pattern.pos.y))) > 0 || pattern.pos.x < 0 || pattern.pos.x > width || pattern.pos.y < 0 || pattern.pos.y > height){

            pattern.dir *= -1;

            pattern.rad = random(25);

            pattern.angle += 0;

        }

        stroke(img.get(pattern.pos.x, pattern.pos.y));

        line(pattern.oldPos.x, pattern.oldPos.y, pattern.pos.x, pattern.pos.y);

​

        pattern.oldPos.x = pattern.pos.x;

        pattern.oldPos.y = pattern.pos.y;

    }

}

​