3 оси Система координат в обработке 3.2.4

Question

Я хочу сделать программу, которая рисует трехосевую систему координат в обработке и принимает на входе координаты точки A (x, y, z) и отображает ее в трех координатах оси система, может ли кто-нибудь здесь предоставить мне код, с которого я мог бы начать?

Answer 1

Вы можете легко нарисовать ось с помощью функции line() и пропустить две пары координат x, y, z (точки «от» и «до» линии в 3D).

Рисунок 3 линии и окраска каждой оси с цветом (например, X, Y, Z, как R, G, B) следует сделать:

void drawAxes(float size){ 
    //X - red 
    stroke(192,0,0); 
    line(0,0,0,size,0,0); 
    //Y - green 
    stroke(0,192,0); 
    line(0,0,0,0,size,0); 
    //Z - blue 
    stroke(0,0,192); 
    line(0,0,0,0,0,size); 
} 

Если вы планируете использовать несколько систем координат, это стоит читать 2D transformations tutorial. Те же принципы применимы к 3D, а также с точки зрения выделения и вложенности систем координат с помощью pushMatrix()/popMatrix() вызовов:

PVector a = new PVector(100,50,20); 

void setup(){ 
    size(400,400,P3D); 
    strokeWeight(3); 
} 
void draw(){ 
    background(255); 
    //draw original coordinate system 
    drawAxes(100); 
    //draw from centre and rotate with mouse 
    translate(width * 0.5, height * 0.5, 0); 
    rotateX(map(mouseY,0,height,-PI,PI)); 
    rotateY(map(mouseX,0,width,PI,-PI)); 

    //draw centred coordinate system 
    drawAxes(100); 

    //isolate coordinate system for A point 
    pushMatrix(); 
    translate(a.x,a.y,a.z); 
    //draw translated A point 
    drawAxes(50); 
    popMatrix(); 
} 
void drawAxes(float size){ 
    //X - red 
    stroke(192,0,0); 
    line(0,0,0,size,0,0); 
    //Y - green 
    stroke(0,192,0); 
    line(0,0,0,0,size,0); 
    //Z - blue 
    stroke(0,0,192); 
    line(0,0,0,0,0,size); 
} 

Вы можете запустить p5.js preview ниже:

<iframe width="400" height="400" src="https://alpha.editor.p5js.org/embed/HkQoQTAvl" style="border:none;"></iframe>