Урок 3, Променливи

За да може нашия код да е по-четлив, по-лесен за промяна и (в последствие) интерактивен, може да използваме променливи ("variables").

Една променлива ни дава начин да дадем име на дадена стойност ("value"). При добре подбрани имена, кода би бил по-четлив:

rect(30, 50, 60, 70)

// е напълно същото като:

let x = 30
rect(x, 50, 60, 70)

// или:

let разстояниеОтЛяво = 30  // (може дори да използваме имена на Български, въпреки че не е препоръчително)
rect(разстояниеОтЛяво, 50, 60, 70)

Променливите и стойностите можем използваме в изрази ("expression"); например:

rect(70, 90, 60, 70)
rect(30, 50, 60, 70)

// е същото като:

rect(30 + 40, 90, 60, 70)
rect(30, 50, 60, 70)

// е напълно същото като:

let x = 30
rect(x + 30, 90, 60, 70)
rect(x, 50, 60, 70)

Когато използваме "+" с две числови стойности в JavaScript, това, както и в математиката, означава да се съберат двете стойности. Не всички стойности са от тип число ("number"), обаче – за което ще стане въпрос по-нататък.

Това да използваме една и съща променлива на няколко места ни позволява да променяме кода по-лесно, тъй като не трябва да търсим всички места, на които се намира някоя стойност.

––

За разлика от математиката, в JavaScript стойността на една променлива може да бъде сменена. Това става чрез операцията задаване на стойност ("assignment"), и се записва така:

let x = 40          // създава променлива наречена x с начална стойност 40.

rect(x, 50, 60, 70) // тук x има стойност 40.

x = 100             // задава стойността 100 на променливата x.

rect(x, 50, 60, 70) // тук x има стойност 100.

Тъй като JavaScript е императивен език, тази смяна на стойността се случва точно в реда, в който сме я описали. По друг начин казано, в JavaScript, "x = 100" означава "от сега нататък, стойността на x е 100".

Една променлива "живее" от мястото, на което е дефинирана/създадена (използвайки let ...), до края на къдравите скоби, в които се намира.

Така например:

// тук няма променлива "x"

let x = 30

// тук вече има променлива "x"

function draw() {
  background(220);
  // тук няма променлива "y", само "x"
  
  let y = 50
  // тук има и "y", и "x"
  
  rect(x, y, 60, 70) 
}

// тук все още има променлива "x", но вече няма "y"

Ако дефинираме променлива в кода извън кои да са къдрави скоби, бихме могли да я използваме в конзолата ("Console"), която се намира под мястото за писане на код в p5js редактора.

Така например, при въведен код като този:

function setup() {
  createCanvas(400, 400);
}

let x = 30

function draw() {
  background(220);
  
  fill(0, 0, 0)
  rect(x + 40, 90, 60, 70)
  
  fill(255, 100, 0)
  rect(x, 50, 60, 70)
}

Може да въведем следното в конзолата:

x = 100

И ще видим как и двата правоъгълника се преместват(/прерисуват) по-надясно.

Променете задачата от миналия път, така че да използва променливи, с които да са оказани позицията и размерите на цялото знаме.

Конкретно, крайния ви код би трябвало да изглежда така когато рисува знамето на цял екран:

function setup() {
  createCanvas(400, 400);
}

let x = 0
let y = 0
let w = 400
let h = 400

function draw() {
  background(220);

  // кода на вашето знаме е тук
}

И би трябвало да можете да смените единствено променливите да се нарисува същото знаме, но по-малко. Например, за да бъде леко разтеглено, леко вдясно от центъра:

// .. останалата част от кода е същата ..

let x = 50
let y = 100
let w = 300
let h = 200

// .. останалата част от кода е същата ..

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // (цветовете са от https://bg.wikipedia.org/wiki/Национално_знаме_на_България)
  
  fill(255, 255, 255)
  rect(0, 0, 400, 133)  // 133 = 400 / 3
  
  fill(0, 155, 117)
  rect(0, 133, 400, 133)
  
  fill(208, 28, 31)
  rect(0, 266, 400, 133)
}