Mouse connections

Is Mouse connections the right name for this program? … or maybe should be named Spider legs?

The program works by displaying a series of balls that are bouncing from the edges of the canvas. Connections are created on the fly from the mouse cursor to each ball that is in a certain range from the cursor.

Source code

This cool effect is actually very easy to implement. We only need to work on the canvas using a 2D graphical library such as p5.js

In this case we will use the codeguppy.com environment which is comes with p5.js included.

Try to copy the following source code in the code editor

var noBalls = 100;
var speed = 1;
var distBalls = 100;

var balls = [];

function enter()
{
    createBalls();    
}

function loop()
{
    clear();

    updateBalls();
    displayBalls();
    displayConnections(mouseX, mouseY);

    displayInstructions();
}

function createBalls()
{
    for(var i = 0; i < noBalls; i++)
    {
        var ball = {
            x : random(width), 
            y : random(height), 
            dx : random([-1, 1]), 
            dy : random([-1, 1]),
            speed : speed
        };

        balls.push(ball);
    }
}

function updateBalls()
{
    for(var i = 0; i < balls.length; i++)
    {
        var ball = balls[i];

        ball.x += ball.dx * ball.speed;
        ball.y += ball.dy * ball.speed;

        if (ball.x > width || ball.x < 0)
            ball.dx *= -1;

        if (ball.y > height || ball.y < 0)
            ball.dy *= -1;
    }
}

function displayBalls()
{
    for(var i = 0; i < balls.length; i++)
    {
        var ball = balls[i];

        fill(255);
        stroke(150);
        circle(ball.x, ball.y, 3);
    }
}

function displayConnections(fromX, fromY)
{
    for(var i = 0; i < balls.length; i++)
    {
        var ball = balls[i];

        var d = dist(fromX, fromY, ball.x, ball.y);
        if (d < distBalls)
        {
            var color = map(d, 0, distBalls, 0, 150);
            stroke(color);
            fill(color);

            circle(fromX, fromY, 3);
            circle(ball.x, ball.y, 3);
            line(fromX, fromY, ball.x, ball.y);
        }
    }
}

function displayInstructions()
{
    push();
    fill(0);
    noStroke();
    text("Move your mouse inside the canvas area", 10, 590);
    pop();
}

Draft

This article is a draft. If you are interested how the program above works, please leave a comment.

Comments

[Alex]

Hello, This blog is very educative, And without a doubt, you are too good. I am very glad that I have found this during my search.
Thanks for sharing this with us.
If Anyone facing trouble with print this code by canon printer then do the correct canon printer troubleshooting to avoid such kind of problems.

[Kiya Rony]

We are a computer repair and it services company located in new york, usa. we do provide support and services for software like gps, antivirus, and printer or router. If you need any help regarding your avast antivirus problems, then you can contact us. We will help you to fix avast antivirus not working issue.

[Blayze Maverick]

Hello! My name is Blayze Maverick, an author of the Antivirus Support helpdesk. Choosing the right possible solution to the Antivirus Support issue could be relatively confusing as there are numerous support service proffer troubleshooting guidelines. It is my recommendation to check the reviews and the posts of any content first and make sure it is trustworthy as well as helpful for you. There are many candidates who feel helpless because even after investing too much time and money their offline problem still existing. Unless you turn your Antivirus Support online, you can’t print anything. That’s’ why don’t waste your precious time! Just approach me via the Avast Antivirus helpline number and obtain a one-stop solution for your offline problem in a handy way.