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

 

Projet : Style Working Girl

Bonjour à tous !

J’ai commencé en Janvier 2018 une formation gratuite sur YouTube en HTML et CSS, ayant pour fil rouge la réalisation d’un site : Style Working Girl.

L’intérêt de ce projet, est qu’il permet d’apprendre à construire un site dans lequel on est en mesure de partager ses idées visuelles, partager sa passion d’un domaine, avoir des inspirations vestimentaires, …

Parce qu’il est important d’avoir une base écrite du projet, j’ai décidé de déposer le code source du projet sur cet article.

Tout d’abord constituez un dossier images à la racine de votre projet.

Voici, ci-dessous, les images que j’utilise pour construire le projet. Si vous voulez reproduire mon projet, vous pouvez télécharger les images :

Jessica Chastain :

Céline Salette :

Anna Kendrick :

Voici le code HTML (index.html) :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="style.css"/>
        <title>Working Girl</title>
    </head>
    <body>
        <header>
            <h1>Style Working Girl</h1>
        </header>

        <div class="corps">
            <div id="jess">
                <h1>Jessica Chastain</h1>
                <div class="box">
                    <img src="images/jessica-chastain-1.jpg" class="image" alt="jessica-chastain-1" title="Jessica Chastain"/>
                    <img src="images/jessica-chastain-2.jpg" class="image" alt="jessica-chastain-2" title="Jessica Chastain"/>
                    <img src="images/jessica-chastain-3.jpg" class="image" alt="jessica-chastain-3" title="Jessica Chastain"/>
                </div>
            </div>
    
            <div id="celine">
                <h1>Céline Salette</h1>
                <div class="box">
                    <img src="images/celine-salette-1.jpg" class="image" alt="celine-salette-1" title="Celine Salette"/>
                    <img src="images/celine-salette-2.jpg" class="image" alt="celine-salette-2" title="Celine Salette"/>
                </div>
            </div>
    
            <div id="anna">
                <h1>Anna Kendrick</h1>
                <div class="box">
                    <img src="images/Anna-Kendrick-1.jpg" class="image" alt="Anna-Kendrick-1" title="Anna Kendrick"/>
                    <img src="images/Anna-Kendrick-2.jpg" class="image" alt="Anna-Kendrick-2" title="Anna Kendrick"/>
                </div>
            </div>
        </div>
        
        <footer>
            Site réalisé par SMARTFUL
        </footer>
    </body>
</html>

Et voici le code CSS (style.css) :

body {
    /* background-image: url(spiration_dark.png); */
    background-color: #333333;
    color: #FFFFFF;
}

header {
    text-align: center;
    border: 4px grey groove;
    padding: 10px;
}

footer {
    text-align: center;
    border: 2px grey solid;
    padding: 10px;
}

header h1 {
    font-size: 2.5em;
}

.corps {
    margin: 10px;
}

.corps h1 {
    text-decoration: underline;
}

.box {
    margin: 5px;
    border: 3px grey groove;
}

.image {
    margin: 5px;
    border: 3px #CC7777 groove;
}

#jess:hover {
    background-color: purple;
}

#celine:hover {
    background-color: blue;
}

#anna:hover {
    background-color: green;
}

Je vous souhaite de prendre du plaisir dans la construction de vos futurs projets.

SMARTFUL

 

Fonctions sur les tableaux

L’analyse de donnée est un point essentiel dans l’informatique.

Mais tous les développeurs ne sont pas data-scientist !

Pour certains d’entre eux il peut se révéler difficile de trouver et de construire des indicateurs pertinents.

Pourtant, la moyenne et l’écart-type nous donne une image assez concrète d’une distribution de données.

Et nous allons voir comment construire des fonctions nous renseignant sur la moyenne et l’écart-type.

Le calcul de la moyenne est très trivial, mais pour calculer l’écart-type, il faut tout d’abord calculer la variance.

Pour rappel, l’écart-type est la moyenne de la distance entre les points d’une distribution, et la moyenne de cette même distribution. Cela permet de savoir si tous les points sont regroupés autour de la valeur moyenne, ou dispersés.

Voici les nos fonctions (functionArray.php):

<?php

function averageArray(array $tab) : float
{
    if (empty($tab)) {
        throw new Exception("Le tableau est vide");
    }

    $sum = 0;

    try {
        for ($i = 0; $i < count($tab); $i++) {
            $sum += $tab[$i];
        }

        return number_format($sum/count($tab), 2);
    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

function varianceArray(array $tab) : float
{
    if (empty($tab)) {
        throw new Exception("Le tableau est vide");
    }

    $sum = 0;
    
    try {
        $average = averageArray($tab);
        for ($i = 0; $i < count($tab); $i++) {
            $sum += pow($tab[$i] - $average, 2);
        }

        return number_format($sum/count($tab), 2);
    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

function stdArray(array $tab) : float
{
    if (empty($tab)) {
        throw new Exception("Le tableau est vide");
    }
    
    try {
        $variance = varianceArray($tab);

        return number_format(sqrt($variance));
    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

function displayTab(array $tab) : string
{
    if (empty($tab)) {
        throw new Exception("Le tableau est vide");
    }

    $temp_str = "";

    try {
        for ($i = 0; $i < count($tab); $i++) {
            $temp_str .= "[". ($i+1). "] : $tab[$i] <br/>";
        }

        return $temp_str;
    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

Maintenant voyons l’utilisation de nos fonctions pour obtenir les informations d’une distribution  (index.php):

<?php
require_once 'functionsArray.php';

$temp = [];
$min = 10;
$max = 45;
for ($i = 0; $i < 10; $i++) {
    $temp[$i] = rand($min, $max);
}

echo displayTab($temp);
echo "<hr/>";
echo "Moyenne : ".averageArray($temp)." <br/>";
echo "Ecart-type : ".stdArray($temp)." <br/>";
echo "<hr/>";

Voici un exemple du résultat :

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

Centrer du texte verticalement

En faisant un peu de HTML pour m’amuser, je me suis rendu compte que je butais fasse à quelque chose qui me semblait évident.

Comment centrer verticalement un élément dans une box ?

C’est alors que je me suis rendu compte au gré de mes recherche, que cela n’était guère évident.

Au fur et à mesure des version de CSS, il y a eu plusieurs solutions qui ont émergé. Et il n’y a donc pas de solution évidente qui ressort.

Le but de cet article est donc d’exprimer la solution la plus approprié en notre temps.

Tout d’abord, voici ce que je veux réaliser :

Le code CSS qui permet de réaliser l’alignement vertical de Catégorie X dans les box de couleur est le suivant :

display: flex;
align-items: center;

Pour avoir une vision d’ensemble voici l’intégralité du code mis en oeuvre :

Le code HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="test.css"/>
        <title>Test</title>
    </head>

    <body>
        <div id="main">
            <div id="bloc1">Catégorie 1</div>
            <div id="bloc2">Catégorie 2</div>
            <div id="bloc3">Catégorie 3</div>
        </div>
    </body>
</html>

Le code CSS :

#main {
    margin: 100px;
    width: 600px;
    height: 400px;
    border: 3px solid black;
    background-color: rgb(7, 6, 73);
}

#bloc1 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    border: 3px solid black;
    border-radius: 10px;
    background-color: rgba(255,0,0,0.2);
    color:white;
    display: flex;
    align-items: center;
}

#bloc2 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    background-color: rgba(0,250,0,0.2);
    border: 3px solid black;
    border-radius: 10px;
    color:white;
    display: flex;
    align-items: center;
}

#bloc3 {
    width: 100px;
    height: 100px;
    margin-top: 20px;
    margin-left: 20px;
    padding-left: 10px;
    background-color: rgba(255, 174, 0, 0.2);
    border: 3px solid black;
    border-radius: 10px;
    color:white;
    display: flex;
    align-items: center;
}

SMARTFUL

 

Envoyer une requête CURL

Introduction

CURL est une technologie qui permet de faire interagir nos scripts PHP avec des serveurs extérieurs à notre application et supportant différents protocoles dont HTTPS, HTTP et FTP.

Les applications de cette technologie sont nombreuses, dont les principales sont:

  • Web services : permettre à des applications distinctes de dialoguer entres elles.

  • Web scraping : extraction de données sur le web.

Mise en œuvre

La mise en œuvre d’une requête CURL est très simple et suis le schéma suivant :

  • Initialisation : on définit l’adresse URL sur laquelle on envoi la requête.

  • Configuration : on configure notre requête.

  • Exécution.

  • Clôture.

Il y a 2 façons de configurer une requête CURL :

  • En utilisant curl_setopt (mode variable).

  • En utilisant curl_setopt_array (mode array).

Exemples (envoi d’une requête en GET) :

$url = "http://api.machin.com";

$channel = curl_init($url);
curl_setopt($channel, CURLOPT_HEADER, false);
curl_setopt($channel, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($channel, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($channel, CURLOPT_RETURNTRANSFER, true);

$data = curl_exec($channel);
curl_close($channel);
$url = "http://api.machin.com";
$options = [
    CURLOPT_HEADER => false,
    CURLOPT_SSL_VERIFYHOST => false,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_RETURNTRANSFER => true
];

$channel = curl_init($url);
curl_setopt_array($channel, $options);

$data = curl_exec($channel);
curl_close($channel);

Pour envoyer une requête POST, il faut utiliser les options suivant :

  • CURLOPT_POST

  • CURLOPT_POSTFIELDS

Exemple :

$url = "http://api.machin.com";

$postFields = [
    "user" => "identifiant",
    "pass" => "mot de passe"
];

$channel = curl_init($url);
curl_setopt($channel, CURLOPT_HEADER, false);
curl_setopt($channel, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($channel, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($channel, CURLOPT_RETURNTRANSFER, true);
curl_setopt($channel, CURLOPT_POST, true);
curl_setopt($channel, CURLOPT_POSTFIELDS, $postFields);

$data = curl_exec($channel);
curl_close($channel);

Récupérer des informations :

Pour récupérer des informations concernant la communication CURL, on utilise la fonction curl_getinfo().

Pour récupérer toutes les informations

Exemple (Pour récupérer toutes les informations) :

$infos = curl_getinfo($channel);

Exemple (Pour récupérer une information particulière) :

$httpcode = curl_getinfo($channel, CURLINFO_HTTP_CODE);

Les constantes d’options :

Connexion :

  • CURLOPT_URL : URL à utiliser pour établir la connexion (alternative au paramètre url de la fonction curl_init). La forme de celle-ci dépend du protocole employé

  • CURLOPT_TIMEOUT : Temps maximal d’exécution, exprimé en secondes, de la fonction curl_exec

  • CURLOPT_CONNECTTIMEOUT : Durée maximale de la tentative d’établissement de la connexion vers l’hôte distant (en secondes). Une valeur nulle aura pour effet de laisser cette tâche au système

Générales :

  • CURLOPT_NOBODY Fixée à TRUE la partie « contenu » ne sera pas renvoyée. Par exemple avec le protocole HTTP, la requête employée sera de type HEAD au lieu de GET par défaut. Sa valeur par défaut est FALSE, rapatriant ainsi les données distantes

  • CURLOPT_HEADER Suivant le protocole employé, la valeur TRUE permettra d’inclure les en-têtes dans le résultat renvoyé. La valeur par défaut est FALSE

  • CURLOPT_RETURNTRANSFER Avec la valeur TRUE, le contenu de la page distante est retourné sous la forme d’une chaîne par la fonction curl_exec. La valeur par défaut FALSE a pour effet d’en afficher directement la sortie

  • CURLOPT_FILE Un descripteur de fichier (préalablement obtenu et ouvert avec fopen en mode écriture) dans lequel sera alors écrit les données renvoyées par le serveur distant. La valeur par défaut est la sortie standard soit le navigateur dans une utilisation « web » de PHP

  • CURLOPT_UPLOAD Permet d’indiquer, en attribuant la valeur TRUE à cette option, à cURL qu’un envoi de fichier va avoir lieu et qu’il doit s’y préparer

  • CURLOPT_INFILE Un descripteur de fichier, auparavant obtenu et ouvert en lecture par la fonction fopen, duquel les données pour l’upload seront lues

  • CURLOPT_INFILESIZE Taille du fichier qui sera envoyé au serveur distant

Protocole HTTP :

  • CURLOPT_HTTP_VERSION Forcer la version du protocole HTTP utilisée. La valeur par défaut est CURL_HTTP_VERSION_NONE, laissant ainsi le soin à cURL de décider sinon forcez la à l’aide de CURL_HTTP_VERSION_1_0 ou CURL_HTTP_VERSION_1_1 qui correspondent respectivement aux versions 1.0 et 1.1

  • CURLOPT_FOLLOWLOCATION TRUE pour suivre (toutes) les redirections de type « Location: ». On peut toutefois limiter le nombre de celles-ci avec l’option CURLOPT_MAXREDIRS

  • CURLOPT_MAXREDIRS Spécifie le nombre maximum de redirections qui seront suivies avant de faire échouer la requête. Une valeur nulle implique aucune redirection alors que -1 (valeur par défaut) signifie toutes

  • CURLOPT_HTTPGET La méthode HTTP employée sera GET. Il s’agit du type de requête par défaut

  • CURLOPT_POST Définir cette option à la valeur TRUE aura pour effet d’employer la méthode POST à la place de la méthode GET par défaut

  • CURLOPT_POSTFIELDS Les données à envoyer par la méthode POST sous la forme d’une chaîne (doivent être encodées) ou d’un tableau associant le nom du champ à sa valeur. Cette deuxième forme ne nécessite pas l’encodage des données car elle sera réalisée en interne et permet d’envoyer des fichiers en faisant précéder leur nom d’une arobase

  • CURLOPT_USERPWD Permet de fournir un identifiant et un mot de passe pour passer les systèmes d’authentification HTTP. Ils prennent alors la forme login:mot_de_passe

  • CURLOPT_USERAGENT Définit l’en-tête User-Agent (le navigateur) pour la requête HTTP

  • CURLOPT_REFERER Renseigne l’entête Referer, la page d’où on provient en temps normal

  • CURLOPT_AUTOREFERER Avec la valeur TRUE cURL renseignera automatiquement l’en-tête Referer lors de redirections

  • CURLOPT_HTTPHEADER Ensemble d’en-têtes à présenter lors de la requête sous la forme d’un tableau numériquement indexé

  • CURLOPT_COOKIEFILE Indique le fichier duquel seront lues les données relatives aux cookies

  • CURLOPT_COOKIEJAR Fichier où seront écrites les données des différents cookies reçus

  • CURLOPT_COOKIESESSION Si à valeur vraie (vaut faux par défaut), la requête HTTP sur le point d’être exécutée doit initier une nouvelle session. C’est-à-dire que tous les cookies dits de session, soit à valeur d’expiration nul, hérités de précédentes requêtes seront ignorés (et supprimés si l’option CURLOPT_COOKIEJAR est également active).

Protocole FTP :

  • CURLOPT_QUOTE Un tableau numériquement indexé des commandes FTP à exécuter avant notre requête

  • CURLOPT_POSTQUOTE Les commandes FTP à exécuter après notre requête sous la forme d’un tableau numériquement indexé

  • CURLOPT_TRANSFERTEXT Une valeur vraie indique à cURL d’utiliser le mode de transfert appelé ASCII au lieu du mode binaire par défaut. Toutefois, attention : le mode ascii est implémenté de manière incomplète au sein de cURL

  • CURLOPT_FTP_SSL

Permet de spécifier, à l’aide d’une des constantes ci-dessous, le niveau de sécurité des données qui vont transiter :

CURLFTPSSL_NONE : connexion FTP normale, aucun recours à SSL

CURLFTPSSL_TRY : tente d’utiliser SSL ou à défaut le protocole normal

CURLFTPSSL_CONTROL : SSL sera requis sur la connexion de contrôle sinon cURL échouera

CURLFTPSSL_ALL : SSL sera requis à la fois pour la connexion de contrôle ainsi que sur le canal de données

  • CURLOPT_FTPSSLAUTH

Détermine l’ordre des versions du protocole SSL à employer :

CURLFTPAUTH_DEFAULT : laisse à cURL le soin de décider

CURLFTPAUTH_SSL : tente d’utiliser SSL avant TLS

CURLFTPAUTH_TLS : tente d’utiliser TLS avant SSL

Les constantes d’informations :

CURLINFO_EFFECTIVE_URL : dernière URL réelle
CURLINFO_HTTP_CODE : dernier code HTTP reçu
CURLINFO_TOTAL_TIME : durée de la transaction en secondes pour le dernier transfert
CURLINFO_SIZE_UPLOAD : nombre total d’octets envoyés
CURLINFO_SIZE_DOWNLOAD : nombre total d’octets téléchargés
CURLINFO_SPEED_DOWNLOAD : vitesse moyenne de téléchargement
CURLINFO_SPEED_UPLOAD : vitesse moyenne d’envoi

Dessiner un nounours en PHP

Avec le langage PHP on peut réaliser pas mal de chose, dont dessiner.

En voici la preuve avec un dessin de nounours réaliser avec le script suivant :

<?php
//Dimension de l'image
$image_x = 800;
$image_y = 500;
//Création de l'image
$image = imagecreate($image_x,$image_y);
//Affectation des couleurs
$white = imagecolorallocate($image,255,255,255);
$black = imagecolorallocate($image,0,0,0);
$nounoursColor = imagecolorallocate($image,230,230,230);
$brown = imagecolorallocate($image,80,40,20);
$red = imagecolorallocate($image,255,0,0);
//On colorise l'arrière plan
imagefill($image,0,0,$white);
/*On construit nounours */
//Le visage principale
imagefilledellipse($image,$image_x/2,$image_y/2,$image_x/1.5,$image_y/1.3,$nounoursColor);
//Les oreilles
imagefilledellipse($image,($image_x/2 - $image_x/4),$image_y/4,$image_x/5,$image_y/5,$nounoursColor);
imagefilledellipse($image,($image_x/2 + $image_x/4),$image_y/4,$image_x/5,$image_y/5,$nounoursColor);
//Les yeux
imagefilledellipse($image,($image_x/2 - $image_x/6),($image_y/2 - $image_y/10),$image_x/15,$image_y/10,$black);
imagefilledellipse($image,($image_x/2 + $image_x/6),($image_y/2 - $image_y/10),$image_x/15,$image_y/10,$black);
//Le nez
imagefilledellipse($image,$image_x/2,$image_y/2,$image_x/12,$image_y/10,$brown);
//La bouche
imagefilledellipse($image,$image_x/2,($image_y/2 + $image_y/5),$image_x/20,$image_y/35,$red);
//Affichage de l'image
header("Content-type: image/png");
imagepng($image);

SMARTFUL

Nouveau blog !

Bienvenue sur mon premier article !

Peut-être avez vous déjà suivi mes précédents blog, ou pas.

Le but de ce blog c’est de vous partager mes pensées, mes tests, et réflexions sur le développement web.

Il y aura certainement une bonne dose d’article concernant le développement personnel, car cela fait partie du processus créatif.

Nous avons la chance de vivre dans une époque où le savoir est prolifique, mais nous n’avons pas toujours l’état d’esprit adapté à nos ambitions.

SMARTFUL