P5.js : Une balle qui rebondit

J’aime vraiment bien la bibliothèque P5.js, qui permet de réaliser des fonctionnalités visuelles de façon très pratiques.

Si vous ne connaissez pas P5.js, voici une brève présentation :

P5.js est une bibliothèque JavaScript crée par Lauren McCarthy, qui rend la programmation accessible aux artistes, designers et débutants.

Voici un exemple de ce qu’on peut y faire : Une balle qui rebondit sur les bords.

Et voici mon code (attention il est écrit en ES6, donc assurez vous d’avoir un navigateur modern). J’ai télécharger la bibliothèque en local dans un dossier nommé p5, mais vous pouvez très bien utiliser une inclusion de la bibliothèque avec des liens CDN.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>

    <body>
        <div id="main"></div>
    </body>


    <script src="p5/p5.min.js"></script>
    <script src="p5/addons/p5.dom.min.js"></script>
    <script src="ball.js"></script>
    <script src="view.js"></script>

</html>

ball.js

class Ball
{
    constructor() {
        this.location = createVector(width/2, height/2);
        this.velocity = createVector(2.5, -2);
        this.radius = 26;
    }

    move(){
        this.location.add(this.velocity);
    }

    bounce(){
        // Check for bouncing.
        if ((this.location.x + this.radius /2 > width) || (this.location.x - this.radius /2 < 0)) {
            this.velocity.x = this.velocity.x * -1;
        }

        if ((this.location.y + this.radius /2 > height) || (this.location.y - this.radius /2 < 0)) {
            this.velocity.y = this.velocity.y * -1;
        }
    }

    display(){
        stroke(1);
        fill(175);
        // Display the ball at the location (x,y).
        ellipse(this.location.x,this.location.y,this.radius,this.radius);
    }
}

view.js

function setup(){
    createCanvas(300, 200);

    b = new Ball();
}

function draw(){
    background(245);
    b.move();
    b.bounce();
    b.display();
}

Je pense souvent partager mes petits codes P5.js.

Pour information je regarde la chaîne youtube Coding Train de Daniel Shiffman, où il fait tout un tas d’expérience.

SMARTFUL

 

CatégoriesJS

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *