Javascript

Défi : bonhomme de neige

// bottom circle:
ellipse(200,300,150,150);
// middle circle:
ellipse(200,214,114,114);
// top circle:
ellipse(200,148,84,88);

Défi : bonhomme de neige avec des bras

rect(0,355,400,44);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);
line(160,200,100,100);
line(240,200,300,100);

Défi : jour de neige ensoleillé

background(0, 196, 255);

// The ground
fill(27, 181, 68);
rect(0, 300, 400, 100);  

// The sun
fill(238, 255, 0);
ellipse(80, 64, 100, 100);


// The snowman
fill(250, 245, 245);
ellipse(200, 300, 150, 150);
ellipse(200, 200, 100, 100);
ellipse(200, 120, 75, 75);

Spin-off of « Projet : qu’avons-nous pour dîner ce soir ? »

background(186, 145, 20); // wooden table
ellipse(200, 200, 350, 350); // plate
ellipse(200, 200, 300, 300); 

//pizza paste
fill(148, 130, 10);
stroke(143, 2, 2);
ellipse(200,200,290,290);

//tomato
fill(255, 0, 0);
ellipse(147,116,100,100); 

//tomato
fill(255, 0, 0);
ellipse(247,280,100,100); 

//cheese
fill(204, 214, 131);
rect(70,199,85,40,9);

Défi : le lapin aux dents longues

var eyes = 47;
var hTeeths = 32;  
ellipse(150, 70, 60, 120);  // left ear
ellipse(240, 70, 60, 120);  // right ear

ellipse(200, 170, 150, 150);    // face

fill(0, 0, 0);
ellipse(170, 150, eyes, eyes);  // left eye
ellipse(230, 150, eyes, eyes);  // right eye

line(150, 200, 250, 200);   // mouth

noFill();
rect(185, 200, 15, hTeeths); // left tooth
rect(200, 200, 15, hTeeths); // right tooth

Défi : la grenouille funky

var x = 200;
var y = 250;

noStroke();
fill(30, 204, 91); // a nice froggy green!

ellipse(x, y, 200, 100); // face
fill(10, 10, 10);
ellipse(x,y,100,50);
ellipse(x - 50, y - 50, 40, 40); // left eye socket
ellipse(x + 50, y - 50, 40, 40); // right eye socket

fill(255, 255, 255); // for the whites of the eyes!
ellipse(x - 50, y - 50, 30, 30); // left eyeball
ellipse(x + 50, y - 50, 30, 30); // right eyeball

fill(3, 3, 3);
rect(x-53,y-53,10,10);
rect(x+46,y-53,10,10);

Défi : explosion solaire

noStroke();
// the beautiful blue sky
background(82, 222, 240);

// the starting size for the sun
var sunSize = 30; 
draw = function() {
sunSize = sunSize + 1 ;
 // The sun, a little circle on the horizon
fill(255, 204, 0);
ellipse(200, 298, sunSize, sunSize);

// The land, blocking half of the sun
fill(76, 168, 67);
rect(0, 300, 400, 100);
};

Défi : dissiper les nuages

noStroke();
var leftX = 118;
var rightX = 295;
var sunRadius = 100;

draw = function() {
    background(184, 236, 255);
    
    fill(255, 170, 0);
    ellipse(200, 100, sunRadius, sunRadius);
    
    // clouds 
    fill(255, 255, 255);
    // left cloud
    ellipse(leftX, 150, 126, 97);
    ellipse(leftX+62, 150, 70, 60);
    ellipse(leftX-62, 150, 70, 60);
    
    // right cloud
    ellipse(rightX, 100, 126, 97);
    ellipse(rightX+62, 100, 70, 60);
    ellipse(rightX-62, 100, 70, 60);
    leftX -= 1 ;
    rightX += 1  ;
    sunRadius += 2 ;
    
};

Défi : la tomate goûteuse

background(255, 255, 255);

// tomato
noStroke();
fill(224, 90, 90);
ellipse(150, 200, 150, 150);
ellipse(212, 200, 150, 150);

// stem
fill(48, 130, 31);
rect(176, 103, 12, 32); 

draw = function() {
// take a bite out of the tomato!
fill(255, 255, 255);
ellipse(mouseX, mouseY, 60, 60);
};

Défi : la manie du mouvement de la souris

draw = function() {<br>     stroke(255, 0, 0);<br>     fill(mouseX, mouseY, 0);<br>     ellipse(mouseX, mouseY, mouseX, 10);<br> };

Défi : les yeux de l’ours brun

noStroke();
var x = 204;
var y = 212;
var faceSize = 428;

// ears
var earSize=faceSize*1/2;
fill(89, 52, 17);
ellipse(x-faceSize*2/5, y-faceSize*2/5, earSize, earSize);
ellipse(x+faceSize*2/5, y-faceSize*2/5, earSize, earSize);

// face
fill(163, 113, 5);
ellipse(x, y, faceSize, faceSize);



//eyes 
var eyes = faceSize/8;
fill(0, 0, 0);
ellipse(x-faceSize/4, y-faceSize/8, eyes, eyes);
ellipse(x+faceSize/4, y-faceSize/8, eyes, eyes);



//nose
fill(89, 52, 20);
ellipse(x, y+faceSize/8, faceSize*4/15, faceSize/5);

Défi : mes aliments préférés

fill(255, 0, 0);<br>
textSize(25);<br>
text('My Favorite Foods',12,24);<br>
text("1.cheeseburger",12,60);<br>
text("2.pizza",12,85);<br>
text("3.okonomiyaki",12,110);

Défi : le traqueur de souris

fill(255, 0, 255);

draw = function() {
    background(255, 255, 255);
    ellipse(mouseX, mouseY, 12, 12); 
    var label = "(" + mouseX + "mm" +" , "+ mouseY + "mm" + ")";
    text(label, mouseX + 10 , mouseY +5 );
};

Défi : donnez votre nom

var test = function (){
    var textX = random(0, 300);
    var textY = random(0, 300);
    var yourName = "Benjamin";
    
    fill(255, 0, 0);
    textSize(30);
    text("Hiiii, " + yourName, textX, textY);
};

test();
test();
test();
test();

Défi : des taupes dans les trous

var drawMole = function(moleX,moleY) {
   
    noStroke();
    fill(125, 93, 43);
    ellipse(moleX, moleY, 60, 60); // face
    fill(255, 237, 209);
    ellipse(moleX, moleY+10, 33, 28); 
    fill(0, 0, 0);
    ellipse(moleX-10, moleY-15, 10, 10); // eyes
    ellipse(moleX+10, moleY-15, 10, 10);
    ellipse(moleX, moleY-5, 10, 10); // nose
    ellipse(moleX, moleY+10, 20, 5); // mouth
};

background(52, 168, 83); // green grass
fill(0, 0, 0);
ellipse(200, 200, 100, 30); // holes!
ellipse(70, 119, 100, 30);
ellipse(300, 60, 100, 30);
ellipse(297, 350, 100, 30);

drawMole (196,171);
drawMole (292,321);
drawMole (300,40);
drawMole (50,80);

Défi : la calculatrice

var add = function(num1, num2) {
    return num1 + num2;
};
var subtract = function(num1, num2) {
    return num1 - num2;
};
var multiply = function(num1, num2) {
    return num1 * num2;
};
var divide = function(num1, num2) {
    return num1 / num2;
};

fill(255, 0, 0);
text("15 + 3 is " + add(15, 3), 10, 20);
text("15 - 3 is " + subtract(15, 3), 10, 50);
text("15 * 3 is " + multiply(15, 3), 10, 80);
text("15 / 3 is " + divide(15, 3), 10, 110);

text("8 + 4 is " + add(8, 4), 10, 170);
text("8 - 4 is " + subtract(8, 4), 10, 200);
text("8 * 4 is " + multiply(8, 4), 10, 230);
text("8 / 4 is " + divide(8, 4), 10, 260);

Challenge: Bouncy Ball

// position of the ball
var y = 0;
// how far the ball moves every time
var speed = 2;

draw = function() {
    background(127, 204, 255);
    
    fill(66, 66, 66);
    ellipse(200, y, 50, 50);

    // move the ball
    y = y + speed;
    
    if(y > 400) {
        speed = - 50;
    }
    if(y < 0) {
        speed = + 50;
}
};

Challenge: Your First Painting App

draw = function() {
    if (mouseIsPressed){
    noStroke();
    fill(random(0,255),random(0, 255),random(0, 255));
    ellipse(mouseX, mouseY, 20, 20);
    }
};

Challenge: Number Analyzer

var theNumber = 10;

fill(0, 0, 0);
textSize(30);
text("Analysis of: " + theNumber, 10, 36);

text("It's positive", 10, 90);
text("It's negative", 10, 140);
text("It's zero", 10, 190);

noFill();
if (theNumber > 0){
rect(5, 60, 200, 40); 
}

if (theNumber < 0){
rect(5, 108, 200, 40); 
}

if (theNumber === 0){
rect(5, 155, 200, 40); 
}

Défi : votre premier bouton

Dans cette première étape, ajoutez un if qui colore en rouge le bouton quand on presse la souris n’importe où sur la zone de dessin.

draw = function() {
    fill(0, 255, 68); // start color
    if (mouseIsPressed && mouseY <200){
        
        fill(255, 0, 0);
        
    }
    rect(0, 0, 400, 200);  // the button

    // The button text
    fill(0, 0, 0);
    textSize(30);
    text("Press me!", 145, 115);
};

Défi : un bouton plus intelligent

 Nous voulons que le bouton change de couleur uniquement quand nous cliquons à l’intérieur. Pour réaliser cela, vous allez utiliser des opérateurs de comparaison (>, <) sur les coordonnées x et y actives de la souris. Vous allez devoir vérifier plusieurs conditions (comme x plus grand qu’un nombre, mais plus petit qu’un autre), et donc utiliser l’opérateur &&.

draw = function() {
    fill(0, 255, 68); // start color

    if (mouseIsPressed && mouseX > 50 && mouseX < 300 && mouseY >150 && mouseY < 250) { 
        fill(33, 112, 52); // click color
    }
    rect(50, 150, 250, 100);  // the button

    // The button text
    fill(0, 0, 0);
    textSize(30);
    text("PRESS ME!", 93, 193);
};

Défi : la fiche flashy

Vous afficherez la réponse quand la souris est pressée, et la question quand elle ne l’est pas.

draw = function() {
    background(165, 219, 162);
    fill(255, 254, 222);
    rect(20, 100, 364, 200);
    fill(0, 0, 0);
    if(mouseIsPressed) {
    textSize(20);
    text("JavaScript", 39, 200);
} else {
        text("What programming language is this?",39,200);
    }
};

Résumé : la logique et les instructions conditionnelles

Projet : la boule magique numéro 8

fill(0, 0, 0);
ellipse(200, 200, 375, 375);
fill(60, 0, 255);
triangle(200, 104, 280, 280, 120, 280);
fill(255, 255, 255);
var answer = floor(random(1, 5));
text (answer,178,52); 
if (answer === 1) {
    text("NOT YET", 176, 200);
    text("IMPLEMENTED", 159, 229);
}
    else if (answer ===2){
        text("la reponse 2",176, 200);
    }
    else if (answer ===3){
        text(" obiwan kenobi",167,200);
    }
    else {
        text("on en a", 176, 200);
    text("gros", 159, 229); 
    }

Déboguer

Déboguer avec la fonction Print

vous pouvez insérer des print(), ou des println(), dans votre code pour vous aider à déterminer quel code est appelé et avec quelles valeurs. Ces deux fonctions affichent les valeurs dans une console qui apparaît sur la zone de dessin. Vous pouvez également utiliser debug() pour envoyer l’affichage dans la console JavaScript de votre navigateur, si vous savez comment l’utiliser.

Défi : une règle en boucle

The Three Loop Questions:

What do I want to repeat?
What do I want to change each time?
How long should we repeat?

fill(17, 0, 255);

// a handy dandy ruler across the top
var x = 0;
var y = 0;

while ( x < 400) {
    text (x , x ,10);
    x += 50 ;
}

while ( y < 400) {
    text (y , 10 , y );
    y += 50 ;
}

Défi : un paysage en boucle

background(144, 240, 234);

// Draw the sun
noStroke();
fill(255, 140, 0);
ellipse(335, 66, 70, 70);

// Get images from library and remember in variables
var grass = getImage("cute/GrassBlock");
var tree = getImage("cute/TreeUgly");
var x = 0;

while(x < 400) {
// Draw the tree and grass once
image(grass, x, 270);
image(tree, x, 200);
x += 101 ;
}

Les boucles for ! Un nouveau type de boucles

// For Loops!

fill(120, 9, 148);

// for (start; how long; change)
for (var y = 63; y < 313; y += 41) {
    text("Pineapple pizza is the best!", 69, y);
}

/*
var y = 27;
while (y < 354) {
    text("Pineapple pizza is the best!", 80, y);
    y += 24;    
}
*/

Défi : le papier réglé

background(255, 255, 247);
stroke(173, 222, 237);

/*var i = 0;
while (i < 20) {
    var lineY = 20 + (i * 20);
    line(0, lineY, 400, lineY);
    i++;
}
*/

for ( var i = 0 ; i < 20 ;i++ ){

var lineY = 20 + (i * 20);
line(0, lineY, 400, lineY);

}

for ( var y = 0 ; y < 20 ; y++) {
    var lineX = 20 + (y * 20);
    line (lineX, 0, lineX, 400);
}

Boucles for imbriquées

for (var j = 0; j < 13; j++) {
    fill(255, 0, 0);
    text(j, 13, j*30+30);
    for (var i = 0; i < 12; i++) {
        fill(130, 56, 56);
        text(i, i*36, j*30+30);
        image(getImage("cute/GemOrange"), i*36, j*30, 40, 60);
    }
}

Une boucle while est un moyen de répéter du code jusqu’à ce qu’une condition ne soit plus vérifiée. Par exemple, cette boucle while va afficher les valeurs de y aux coordonnées (30, y), tant que y est plus petit que 400. La boucle ajoute 20 à y, à chaque itération. y s’initialise à 40 et la boucle l’incrémente à 60, 80, 100, 120, etc…

var y = 40;
while (y < 400) {
     text(y, 30, y);
     y += 20;
}

La boucle for est similaire à la boucle while, mais avec une syntaxe plus spécialisée. Les programmeurs ont inventé la boucle for quand il se sont aperçus qu’ils reproduisaient souvent les 3 mêmes actions : créer des variables compteur (comme la variable y ci-dessus), les incrémenter d’une certaine valeur, et vérifier si elles sont plus petites qu’une valeur. La syntaxe d’une boucle for détient un emplacement spécifique pour chacune de ces trois actions. Voici la même boucle que la première boucle while ci-dessus, écrite selon la syntaxe de la boucle for :

for (var y = 40; y < 400; y += 20) {
     text(y, 30, y);
}

Les boucles peuvent également être imbriquées. C’est d’ailleurs assez courant d’imbriquer des boucles for, en particulier dans le cas des dessins en 2 dimensions, car cela facilite la représentation de formes pouvant être vues comme des quadrillages. Quand on imbrique une boucle dans une autre boucle, on demande au programme de « faire une chose X fois, et pour chaque fois qu’il le fait, de faire également une autre chose Y fois ». Imaginez le dessin d’une grille : nous demandons au programme de « créer une colonne 10 fois, et pour chaque colonne, de créer 15 cellules à l’intérieur ». Voilà comment utiliser des boucles for imbriquées pour réaliser cela :

for (var col = 0; col < 10; col++) {
     for (var row = 0; row < 15; row++) {
          rect(col*20, row*20, 20, 20);
     }
}

Défi : vos fruits favoris

var fruit = ["pomme","poire","banane"];

fill(255, 0, 0);

text ("le top " + fruit.length + " de mes fruits favoris" , 50 , 50);
text (fruit[0] , 50, 100 );
text (fruit[1] , 50, 150 );
text (fruit[2] , 50, 200 );

Défi : le faiseur de constellations

var xPositions = [100,150];
var yPositions = [200,250];

var drawStars = function() {
    background(9, 5, 59);
    imageMode(CENTER);
    for (var i = 0; i < yPositions.length; i++) {
        image(getImage("space/star"), xPositions[i], yPositions[i], 30, 30);
    }
};

mouseClicked = function() {
    
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    drawStars();
};

Spin-off of « Projet : faites pleuvoir »

var xPositions = [200];
var yPositions = [0];

draw = function() {
    background(204, 247, 255);

    for (var i = 0; i < xPositions.length; i++) {
        noStroke();
        fill(0, 200, 255);
        ellipse(xPositions[i], yPositions[i], 10, 10);
        yPositions[i] += 5;
    }
    
};

mouseClicked = function() {
    
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    draw();
};