DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Adrian
Adrian

Posted on

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();
}

Enter fullscreen mode Exit fullscreen mode

Draft

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

Top comments (4)

Collapse
 
blayzemaverick profile image
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.

Collapse
 
alex04215347 profile image
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.

Collapse
 
kiyarony profile image
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.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.