// Variables tailles du canevas
var canvasWidth = 789;
var canvasHeight = 860;



// Variable pour indiquer la position à laquelle la tête devrait être affichée
var headPosX;
var headPosY;


// Background
var BLACK = "#000000";
var ORANGE = "#FC7929";
var RED = "#ff0008";
var LIGHT_PINK= "#e376cf";
var DARK_BLUE = "#000137";
var LIGHT_BLUE = "#9AD5F7";
var PINK = "#ED65AD";
var GREEN = "#407644";
var DARK_RED = "#bd3d39";
var YELLOW = "#ffff4d";

//triangle couleur
var triangleDarkRed = DARK_RED;
var triangleBlack = BLACK; 
var triangleOrange = ORANGE; 
var triangleRed = RED; 
var triangleLightPink = LIGHT_PINK;
var triangleDarkBlue = DARK_BLUE; 
var triangleLightBlue = LIGHT_BLUE; 
var trianglePink = PINK;  


var availableColors = [BLACK, ORANGE, RED, LIGHT_PINK, DARK_BLUE, LIGHT_BLUE, PINK, GREEN, DARK_RED];


var colorChangeDelay = 2000;
var lastColorChange = 0;

function preload() {	
	tete = loadImage("images/Untitled.png");
}

function setup() {   
    var canvas = createCanvas(canvasWidth, canvasHeight);
}


function draw() {
	background(255, 255, 0);

	drawBackground();

	// Calcul pour centrer les images selon le canevas
	headPosX = (canvasWidth / 2) - (tete.width /4);
	headPosY = (canvasHeight / 2) - (tete.height/4);
	
	// Tete
	image(tete, headPosX , headPosY, tete.width/2, tete.height/2);

}

function drawBackground() {
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(triangleDarkRed);
    triangle(325,85,633,264,924,16);
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(triangleOrange);
    triangle(5,958,254,286,1,425);
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(trianglePink);
    triangle(100,26,398,412,1,314);
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(triangleLightBlue);
    triangle(167,295,667,82,314,0);
    
     stroke(YELLOW); 
    strokeWeight(8);
    fill(triangleLightPink);
    triangle(242,803,704,536,795,1162);
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(triangleDarkBlue);
    triangle(471,188,930,433,676,760);
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(triangleRed);
    triangle(113,860,133,248,739,443);
    
    stroke(YELLOW); 
    strokeWeight(12);
    fill(triangleBlack);
    triangle(37, 538, 434, 122, 477, 852);
    
    
    console.log("millis = " + millis());
    console.log(lastColorChange);
    console.log(colorChangeDelay);
    
    
    if(millis() - lastColorChange > colorChangeDelay) {
        var chance = round(random(100));
            if(chance <= 5) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                triangleDarkRed = newColor;
                
            } else if ( chance >= 5 && chance < 10) {
                var newColor = random(availableColors);
                lastColorChance = millis();
                triangleOrange = newColor;
                
            }  else if ( chance >= 10 && chance < 15) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                trianglePink= newColor;
                
            }  else if ( chance >= 15 && chance < 20) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                triangleLightBlue = newColor;
                
            }  else if ( chance >= 20 && chance < 25) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                triangleLightPink = newColor;
                
            }  else if ( chance >= 25 && chance < 30) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                triangleDarkBlue = newColor;
                
            }  else if ( chance >= 30 && chance < 35) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                triangleRed = newColor;
                
            }  else if ( chance >= 35 && chance < 40) {
                var newColor = random(availableColors);
                lastColorChange = millis();
                triangleBlack = newColor;
            } 
    }
}