Екран монітора (незалежно від того, в якому пристрої він розміщений: і звичайний монітор, і ноутбук, і смартфон, і планшет мають однакові принципи функціонування моніторів) складається з сітки пікселів, яку можна представити як листок у клітинку.

Ідентифікація місця на цій сітці відбувається через вказання координат х та у:

 

Зверніть увагу, що відлік координат починається із лівого верхнього кута.


Розмір поля (сітки), з якою працює скетч задається командою size (у p5js createCanvas), колір тла визначається у вимірі Red/Green/Blue командою background, а команда point малює точку в заданих координатах.

Так, наступний блок команд зобразить маленьку чорну точку в координатах (100,100) на блакитному тлі проекту, розміром 400х400 пікселів.

Processing p5.js

void setup() {

size (400,400);

background (0,255,255);

point (100,100);

}

function setup() {

createCanvas (400,400);

background (0,255,255);

point (100,100);

}


Для зміни розмірів точки (точніше, це команда зміни товщини ліній) команду strokeWeight слід розмістити перед малюванням точки:

strokeWeight(6);

  

Для малювання лінії між двома точками - існує команда line:

line(40,30,60,90);

     

Числа 4,3 - це координати верхньої лівої точки лінії, а 6,9 - координати правої нижньої точки лінії.

За цими ж координатами можна намалювати прямокутник:

rect(40,30,30,70);

 

Зверніть увагу, що числа 40,30 - це координати верхнього лівого кута прямокутника, а 30,70 - його розміри в ширину та висоту відповідно.


Кольори

Колір кодується у системі RGB, з додатковим параметром прозорості (alpha)


Попрактикуватись можна онлайн: https://www.w3schools.com/colors/colors_rgb.asp


Колір лінії (колір малювання) призначається командою stroke (red,green,blue);

Колір заливки (фігури) призначається командою fill (red,green,blue);

void setup() {
size (400,400);
background (255,0,0);
strokeWeight(6);
stroke(0,255,0);
fill(255,255,0);
rect(100,100,200,150);
stroke(0,0,255);
line(100,100,200,200);
}		function setup() {
createCanvas (400,400); 
background (255,0,0); 
strokeWeight(6); 
stroke(0,255,0); 
fill(255,255,0); 
rect(100,100,200,150); 
stroke(0,0,255); 
line(100,100,200,200);
}

Прозорість alpha може мінятись від 0 - повністю прозорий, до 255 - повністю суцільний колір, не прозорий. Її можна вказувати окремою командою, або додавати четвертий параметр у команди призначення кольору.

fill(255,255,0, 128);

Напівпрозорий жовтий колір наклався на червоний і одержали оранжевий:


 void setup() {
size (400,400);
background (255,0,0);
strokeWeight(6);
stroke(0,255,0);
fill(255,255,0, 128);
rect(100,100,200,150);
stroke(0,0,255);
line(100,100,200,200);
}		function setup() {
createCanvas (400,400);
background (255,0,0); 
strokeWeight(6); 
stroke(0,255,0); 
fill(255,255,0, 128); 
rect(100,100,200,150); 
stroke(0,0,255); 
line(100,100,200,200);
}

 

Приклад

 
 void setup() {
size (400,400);
background (255,0,0);
strokeWeight(6);
stroke(0,255,0);
fill(255,255,0);
rect(100,100,100,100);
fill(0,255,0,128);
rect(150,150,100,100);
}		function setup() {
createCanvas (400,400);
background (255,0,0); 
strokeWeight(6); 
stroke(0,255,0); 
fill(255,255,0); 
rect(100,100,100,100); 
fill(0,255,0,128); 
rect(150,150,100,100);
}



Завдання

Дослідіть побудову інших графічних примітивів у довідці:

Processing https://www.processing.org/reference/(розділ 2D Primitives)

P5.JS https://p5js.org/reference/ (розділ 2D Primitives)

Остання зміна: Середа 14 жовтня 2020 12:24 PM