Generative Design [2]

Canvas 2D 

1. Les variables

1.1. Numbers


var pi = 3.1415;

var two = 2;

var oneThird = 1 / 3;

1.2. Strings


var name = "John" + " " + "Doe";

var country = "Belgium";

var pi = 3.14;
var pie = pi + "e";
--> return "3.14e"

1.3. Booleans


var javascriptIsFun = true;

var isItFridayYet = false;

1.4. Arrays


var ingredients = ["eggs", "milk", "flour"];
var random = [12, "HEAJ", true, 3.14];

ingredients[0] --> "eggs"
ingredients[1] --> milk

ingredients.length --> 3

1.5. Objects


var house = {
    "bathroom" : 1,
    "cellar" : 0,
    "bedroom" : 3, 
    "name" : "Dupont"
};

house.name --> "Dupont"
house["name"] --> "Dupont"

var house = {
    "bathroom" : ["1stFloor", "2ndFloor"],
    "cellar"   : false,
    "bedroom"  : 3, 
    "name"     : {
        "firstName" : "John",
        "lastName"  : "Doe"
    }
};

house.name --> {"firstName":"John","lastName":"Doe"}
house.name.firstName --> "John"
house.bathroom[0] --> "1stFloor"

1.6. DOM object


var header = document.getElementById("header");
var title = document.querySelector("section h1");
--> Retourne un élément HTML ou Null

var paragraphs = document.querySelectorAll("p");
--> Retourne un tableau []

2. Les functions

2.1. Définir une function

function init() {
    //All the Js
}

init();
var init = function () {
    //All the Js
};

init();
init(); --> Ok
function init() {
    //All the Js
}


init2(); --> Pas ok
var init2 = function() {
    //All the Js
};

2.2. Renvoyer une valeur

function isEven(number) {
    if(number % 2 === 0){
        return true;    
    }
    else{
        return false;
    }
}

isEven(34); --> Return true
isEven(124.65); --> Return false

1.0. Dessiner un rectangle

À retenir :  

  • canvas.getContext("2d");
    • Récupère l'ensemble des fonctions disponibles
  • ctx.fillRect(0,0,200,100);
    • Dessine un rectangle noir

1.1. Donner une taille au canvas

À retenir :  

  • Changer la taille en CSS ne suffit pas
    • Il faut définir la taille du canvas en Javascript
  • Le point [0,0] se situe toujours en haut à gauche
    • Le centre est à [largeur/2, hauteur/2]
  • Penser à prévoir une fonction au resize

1.2. Changer de style

À retenir :  

  • ctx.fillStyle = "green";
    • N'importe quel couleur CSS est utilisable
  • ctx.strokeStyle = "red";
    • Change la couleur de contour
  • ctx.lineWidth = 10;
    • Change l'épaisseur de la bordure
  • ctx.fill() vs ctx.stroke()
  • ctx.arc(x,y,radius, startAngle, endAngle,anticlockwise);

1.3. Définir un tracé

À retenir :  

  • ctx.beginPath(); vs ctx.closePath();
  • ctx.lineTo(x, y);
  • ctx.fill();
  • ctx.stroke();

1.3. Définir deux tracés

À retenir :  

  • ctx.moveTo(x,y);

2.0. Exercice

3.0. Transformations

À retenir :  

  • ctx.translate(x, y);
  • ctx.rotate(angle);

3.1. Save()

À retenir :  

  • ctx.save();
  • ctx.restore();

4.0. requestAnimationFrame

À retenir :  

  • requestAnimationFrame(function);
  • ctx.clearRect(0, 0, largeur, hauteur

4.1. Fade

À retenir :  

  •   ctx.fillStyle = "rgba(r,g,b, 0.01)";
  •   ctx.fillRect(0, 0, largeur, hauteur);

5.0. Prototypage

À retenir :  

  • function Square(){//}
  • Square.prototype.functionName = function() {//};

  • new Square();

5.1. Prototypage++

6.0. Exercice

7.0. Exercice

7.1. Pythagore

7.2. Ajout du support touch

Generative Design [2] [2016-2017]

By Louis Hoebregts

Generative Design [2] [2016-2017]

  • 243
Loading comments...

More from Louis Hoebregts