Design and Visual Research

Blog

Testing WEBGL with P5js

x = 2;
angle = 90;

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    background(30);
}

function draw() {
    background(30);
  
    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);
  
    ambientLight(150);
    normalMaterial();
    torus(100, 30);
    print(angle, x);
  
    scale(x * 0.4);
    box();

    angle += 0.02;
    x += 0.01;
}
x = 2;
angle = 90;

function setup() {
    createCanvas(windowWidth, windowHeight, WEBGL);
    background(30);

}

function mousePressed() {
    if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
        var fs = fullscreen();
        fullscreen(!fs);
    }
}

function draw() {
    background(30);

    // Lights
    var dirY = (mouseY / height - 0.5) * 2;
    var dirX = (mouseX / width - 0.5) * 2;
    directionalLight(250, 250, 250, dirX, -dirY, 0.25);


    rotateX(angle);
    rotateY(angle * 0.3);
    rotateZ(angle * 1.2);

    //normalMaterial();
    torus(100, 30);
    print(angle, x);

    scale(x * 0.4);
    box();

    angle += 0.02;
    x += 0.01;
}