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

 

Afficher la météo avec P5.js

Bonjour,

La bibliothèque P5.js  est très sympa, et j’en profite pour vous montrer une application météo.

Pour la mettre en oeuvre il vous faudra vour inscrire sur Open Weather Map pour récupérer votre clé d’API.

En effet, cette API est gratuite, mais il est nécessaire de s’inscrire pour l’utiliser. Et votre identification se fait via la clé d’API.

Voici à quoi doit ressembler votre page HTML :

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

    <body>
        <p>
            City : <input type="text" id="city" value="London"/><br/>
            <button id="submit">Submit</button>
        </p>
    

        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
        <script src="weather_api.js"></script>
    </body>
</html>

 

Le script qu’il faut mettre en oeuvre pour faire fonctionner notre application est weather_api.js dont voici le code :

var api = "http://api.openweathermap.org/data/2.5/weather?";
var apiKey = "votre clé";
var units = "metric";

var weather;
var input;

function setup() {
    createCanvas(400,200);
    var button = select('#submit');
    button.mousePressed(weatherAsk);
    input = select('#city');
}

function weatherAsk() {
    var city = input.value();
    var urlApi = api + "q=" + city + "&APPID=" + apiKey + "&units=" + units;
    console.log("URLApi : ", urlApi);
    console.log("API key : ", apiKey);
    loadJSON(urlApi, gotData);
}

function gotData(data) {
    weather = data;
    createElement("h1", weather.name);
    createP("Temp. : " + weather.main.temp);
    createP("Humidity. : " + weather.main.humidity);
    createP("Pressure. : " + weather.main.pressure);
}

function draw() {
    // -
}

SMARTFUL

Trier une liste à puces

Triez une liste à puce peut-être très pratique dans certaines applications.

Dans l’exemple qui va suivre, nous avons une liste de fruits, et nous voulons les trier par ordre alphabétique.

Voici le code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Liste fruits</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>
        <div id="listeFruits">
            <ul>
                <li>abricot</li>
                <li>prune</li>
                <li>clémentine</li>
                <li>melon</li>
                <li>cerise</li>
                <li>banane</li>
                <li>raisin</li>
                <li>orange</li>
                <li>fraise</li>
            </ul>
        </div>

        <button id="tri">Triez</button>

        <script src="tri.js"></script>
    </body>
</html>

On remarque bien l’inclusion de la bibliothèque JQuery dans sa version 3.2, qui nous aidera à la mise en oeuvre de notre fonctionnalité que l’on retrouve dans le script nommé tri.js :

$(document).ready(function(){
    var fruits = [];
    $("ul li").each(function(index,elem){
        fruits.push($(this).text());
    });

    $("#tri").click(function(){
        fruits.sort();
        fruits.reverse();
        $("ul li").remove();
        $("#listeFruits").append("<ul class='fruits'> </ul>");
        for(var i = 0; i < fruits.length; i++){
            $(".fruits").wrapInner("<li>" + fruits[i] + "</li>");
        }

        $(this).fadeOut();
    });
});

Ainsi, lorsqu’on clique sur le bouton Triez, nous retrouvons notre liste triée par ordre alphabétique :

 

SMARTFUL