let mapper; // ProjectionMapper
let surface1, surface2; // p5.Graphics returned by mapper.add
async function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
pixelDensity(1);
await loadScript("portal/mapper.js");
mapper = new ProjectionMapper();
mapper.setFont(baseFont);
surface1 = mapper.add(1024, 768, "Front");
surface2 = mapper.add(800, 400, "Side");
mapper.loadAll();
}
let posX = 0;
function draw() {
background(0);
// --- draw content into surface1 ---
const t = millis() * 0.001;
surface1.background("pink");
surface1.noStroke();
surface1.textFont(baseFont);
surface1.fill(0);
surface1.textAlign(CENTER, CENTER);
surface1.textSize(250);
surface1.text("#1", surface1.width / 2, surface1.height / 2);
// --- draw content into surface2 ---
posX = (posX + 1) % surface2.width;
surface2.background("yellow");
surface2.textFont(baseFont);
surface2.fill(0);
surface2.textAlign(CENTER, CENTER);
surface2.ellipse(posX, surface2.height / 2, 100, 100);
surface2.textSize(250);
surface2.text("#2", surface2.width / 2, surface2.height / 2);
// --- render all mapped surfaces ---
mapper.render();
}
function keyPressed() {
mapper.keyPressed(key);
}
function mousePressed() {
mapper.mousePressed();
}
function mouseDragged() {
mapper.mouseDragged();
}
function mouseReleased() {
mapper.mouseReleased();
}
