Насколько я знаю, на данный момент p5. js поддержка vector / matrix операций и преобразования координатного пространства еще не совсем там.
Теоретически вы можете вручную отслеживать каждое преобразование (переводить / вращать) и вручную вычислять его, чтобы получить преобразованные позиции, однако, на практике это может быть подвержено ошибкам и обременительно.
При обработке вы может использовать метод PMatrix mult(PVector) для преобразования точки из одной системы координат в другую, но не в p5. js на данный момент. Такие функции, как screenX() / screenY() упрощают это еще больше.
Вот базовый пример c (обратите внимание на использование P3D):
PVector v1 = new PVector();
float len = 100;
void setup(){
size(300,300,P3D);
noFill();
strokeWeight(3);
}
void draw(){
background(255);
// isolate coordinate system
pushMatrix();
// apply a set of transformations
translate(width / 2, height);
translate(0,-len);
rotate(radians(45));
// draw a blue rectangle from the corner to illustrate this transformed position
stroke(0,0,192);
rect(0,0,30,30);
// further transform
translate(90,0);
// draw a rect rectangle
stroke(192,0,0);
rect(0,0,30,30);
// use screenX/screenY to calculate the transformed coordinates
v1.set(screenX(0,0,0),screenY(0,0,0));
popMatrix();
// simply draw a (green) circle on top at the same transformed coordinates, without being in that local coordinate system
stroke(0,192,0);
ellipse(v1.x, v1.y, 30, 30);
}
В настоящее время, по практическим соображениям, если вычисление преобразованных местоположений является обязательным, я бы рекомендовал перенести ваш код в Обработка.
Обновление На основе ваших комментарий: проще использовать L-систему, чтобы ввести новое правило для цветка.
Допустим, * представляет цветок, вы можете изменить свое правило, включив его, например, в качестве последней инструкции: b: 'G[+F][-F]GF' становится b: 'G[+F][-F]GF*'
, тогда это просто вопрос обработки этого символа при прохождении текущего предложения:
var axiom = 'F';
var sentence = axiom;
var len = 300;
var count = 0;
var flowerArr = [];
var rules = [];
rules[0] = {
a: 'F',
b: 'G[+F][-F]GF*'
};
rules[1] = {
a: 'G',
b: 'GG'
};
function setup() {
createCanvas(630, 630);
stroke(10);
noFill();
smooth();
turtle();
}
function turtle() {
background(255);
strokeWeight(1);
angle = radians(Math.random() * (25 - 15) + 15);
resetMatrix();
translate(width / 2, height);
for (var i = 0; i < sentence.length; i++) {
var current = sentence.charAt(i);
var randomSeed = 2;
if (current == 'F' || current == 'G') {
ellipse(0, -len, 5);
line(0, 0, 0, -len);
translate(0, -len);
// flower rule
} else if (current == '*') {
flower(6,len * 0.618033);
} else if (current == '+') {
let positiveRotation = angle * Math.random() * randomSeed;
rotate(positiveRotation);
} else if (current == '-') {
let negativeRotation = -angle * Math.random() * randomSeed;
rotate(negativeRotation);
} else if (current == '[') {
push();
} else if (current == ']') {
pop();
count++;
}
}
if (i >= sentence.length) {
finished = true;
// console.log("done", count);
}
}
function flower(sides, sideLength){
beginShape();
let angleIncrement = TWO_PI / sides;
for(let i = 0 ; i <= sides; i++){
vertex(cos(angleIncrement * i) * sideLength,
sin(angleIncrement * i) * sideLength);
}
endShape();
}
function generateStems(iterations) {
for (i = iterations - 1; i > 0 ; i--) {
branch();
}
}
function branch() {
len *= Math.random() * (.52 - .45) + .45;
var nextSentence = '';
for (var i = 0; i < sentence.length; i++) {
var current = sentence.charAt(i);
var found = false;
for (var j = 0; j < rules.length; j++) {
if (current == rules[j].a) {
found = true;
nextSentence += rules[j].b;
break;
}
}
if (!found) {
nextSentence += current;
}
}
sentence = nextSentence;
turtle();
}
function draw() {
generateStems(5);
noLoop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
В качестве дальнейших исследований приведем пару забавных JS реализаций L-системы играть с: