xxxxxxxxxx
74
let mode = '2D';
let customFont;
function preload(){
customFont=loadFont('./Roboto-Bold.ttf');
}
function setup() {
createCanvas(600, 400);
textSize(16);
createButton('2D').mousePressed(() => {
mode = '2D';
redraw();
});
createButton('3D').mousePressed(() => {
mode = '3D';
redraw();
});
noLoop(); // We don't need to continuously draw for this test
}
function draw() {
if (mode === '2D') {
draw2D();
} else if (mode === '3D') {
draw3D();
}
}
function draw2D() {
background(200);
// Define some 2D world positions
let worldPositions = [
createVector(100, 100),
createVector(200, 150),
createVector(300, 300),
createVector(400, 50)
];
fill(0);
for (let pos of worldPositions) {
let screenPos = worldToScreen(pos);
ellipse(screenPos.x, screenPos.y, 10, 10);
text(`(${screenPos.x.toFixed(1)}, ${screenPos.y.toFixed(1)})`, screenPos.x + 10, screenPos.y);
}
}
function draw3D() {
createCanvas(600, 400, WEBGL);
textFont(customFont);
background(200);
orbitControl();
lights();
// Define some 3D world positions
let worldPositions = [
createVector(0, 0, 0),
createVector(100, 100, -200),
createVector(-100, -100, 200),
createVector(50, -50, -50)
];
fill(255, 0, 0);
for (let pos of worldPositions) {
let screenPos = worldToScreen(pos);
ellipse(screenPos.x - width / 2, screenPos.y - height / 2, 10, 10);
push();
translate(screenPos.x - width / 2, screenPos.y - height / 2);
text(`(${screenPos.x.toFixed(1)}, ${screenPos.y.toFixed(1)}, ${screenPos.z.toFixed(1)})`, 10, 0);
pop();
}
}