Основно съдържание
Рисуване на 3D форми
Вече имаме представяне на нашия куб, сега трябва да намерим начин да го начертаем.
За да нарисуваме 3D фигура на 2D повърхност, ние трябва да я проектираме. Представи си, че зад куба има светлина и сянката му се проектира върху екран. Най-елементарната форма на проекция е ортогоналната проекция, която бихме получили, ако лъчите на светлината са успоредни един на друг.
Всички тези приказки за проектиране може да ти звучат сложно, но това може много лесно да се изпълнени: просто игнорираме z-координатите при чертането.
Настройки
Обичам да създавам променливи в началото на програмите си, за да мога да контролирам как се показват нещата, така че лесно да мога да ги променям по-късно. Ето няколко променливи, от които ще се нуждаем скоро; промени стойностите, ако желаеш.
var backgroundColor = color(255, 255, 255);
var nodeColor = color(40, 168, 107);
var edgeColor = color(34, 68, 204);
var nodeSize = 8;Сега прибавяме основната рисуваща функция:
var draw = function() {
background(backgroundColor);
};Трябва също да добавим и това към кода си:
translate(200, 200);Това измества нашето платно с 200 пиксела надясно и 200 пиксела надолу, така че пикселът на позиция (0, 0) е сега в центра на нашето платно. Това значи, че нашият куб ще се нарисува в центъра на екрана. Причината да правим нещата по този начин ще стане ясна, когато започнем да въртим своите обекти.
Рисуване на възли (nodes)
Вътре във функцията draw ние обхождаме всички възли и чертаем елипса на (x, y) координатите на този възел:
fill(nodeColor);
noStroke();
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
ellipse(node[0], node[1], nodeSize, nodeSize);
}Рисуване на ръбове (edges)
Вътре във функцията draw добавяме кода за рисуване на ръбове. Нека го добавим преди кода за рисуване възли, така че възлите да са начертани върху ръбовете.
stroke(edgeColor);
for (var e = 0; e < edges.length; e++) {
var n0 = edges[e][0];
var n1 = edges[e][1];
var node0 = nodes[n0];
var node1 = nodes[n1];
line(node0[0], node0[1], node1[0], node1[1]);
}Този код обхожда масива от ръбове. Дефинира двете числа от ръбовете и търси съответния възел в масива от възли. След това чертае права от (x, y) координатите на първия възел до (x, y) координатите на втория възел.
Това ли е всичко?
Започнахме да чертаем куб, но всичко, което направихме, беше просто да начертаем квадрат и четири кръга:
Можехме да нарисуваме това с много по-малко усилия. Обаче, това наистина е нашият куб – само че го виждаме само от едната страна. Ако можем да разберем как да го завъртим така че да не излезе от края на екрана, ще видим, че това не са само един квадрат и четири кръга.
Искаш ли да се присъединиш към разговора?
Все още няма публикации.