function preload(){

    img = loadImage("wall.png", onimageload());

}

​

let offset;

let contant;

let linear;

let quad;

let angle;

let conc;

​

function setup() {

  offset = createSlider(0, 800, 300, 20);

  constant = createSlider(0.1, 2.0, 0.2, 0.1);

  linear = createSlider(0, 0.001, 0.0002, 0.0001);

  quad = createSlider(0, 0.00001, 0.000003, 0.000001);

  angle = createSlider(PI / 180, PI / 4, PI / 17, PI / 180);

  conc = createSlider(50, 200, 140, 10);

  let sliders = {offset, constant, linear, quad, angle, conc};

  for (let k in sliders) {

    let s = sliders[k];

    s.elt.title = `${k}: ${s.value()}`;

    s.changed(() => {

      s.elt.title = `${k}: ${s.value()}`;

    });

  }

    offset.position(10, 10);

  constant.position(10, 30);

  linear.position(10, 50);

  quad.position(10, 70);

  angle.position(10, 90);

  conc.position(10, 110);

  createCanvas(600, 600, WEBGL);

  noStroke();

}

​

// Define the vertices of a box

let boxv = [    

  // Front face    

  [-1/2, -1/2, 1/2],

  [1/2, -1/2, 1/2],

  [1/2, 1/2, 1/2],

  [-1/2, 1/2, 1/2],

  // Back face

  [-1/2, -1/2, -1/2],

  [1/2, -1/2, -1/2],

  [1/2, 1/2, -1/2],

  [-1/2, 1/2, -1/2],

  // Right face

  [1/2, -1/2, -1/2],

  [1/2, -1/2, 1/2],

  [1/2, 1/2, 1/2],

  [1/2, 1/2, -1/2],

  // Left face

  [-1/2, -1/2, -1/2],

  [-1/2, -1/2, 1/2],

  [-1/2, 1/2, 1/2],

  [-1/2, 1/2, -1/2],

    // Top face

  [-1/2, 1/2, -1/2],

  [-1/2, 1/2, 1/2],

  [1/2, 1/2, 1/2],

  [1/2, 1/2, -1/2],

  // Bottom face

  [-1/2, -1/2, -1/2],

  [1/2, -1/2, -1/2],

  [1/2, -1/2, 1/2],

  [-1/2, -1/2, 1/2]

];  

let boxn = [

  [0,0,1],

  [0,0,-1],

  [1,0,0],

  [-1,0,0],

  [0,1,0],

  [0,-1,0]

]; //which is neccessary for

function texBox(size, tex, tintcol) {

  //this is significantly slower than using p5js' builtin box()

  //but it draws all the textures facing up the right way

  texture(tex);

  tint(tintcol);

  let i;

  beginShape(TRIANGLES);

  for(let face = 0; face <6; face++) { //won't draw top and bottom

                                       //but change face <6 to draw these

    normal(boxn[face][0], boxn[face][1], boxn[face][2]);

    i = face*4;

    vertex(boxv[i][0]*size, boxv[i][1]*size, boxv[i][2]*size, 0, 0);

    vertex(boxv[i+1][0]*size, boxv[i+1][1]*size, boxv[i+1][2]*size, 63, 0);

    vertex(boxv[i+2][0]*size, boxv[i+2][1]*size, boxv[i+2][2]*size, 63, 63);

    vertex(boxv[i+2][0]*size, boxv[i+2][1]*size, boxv[i+2][2]*size, 63, 63);

    vertex(boxv[i+3][0]*size, boxv[i+3][1]*size, boxv[i+3][2]*size, 0, 63);

    vertex(boxv[i][0]*size, boxv[i][1]*size, boxv[i][2]*size, 0, 0);

​

  }

  endShape();

}

​

function onimageload (i) {

  return () => { 

    console.log ("image loaded"); 

  }

}

​

function draw() {

  background(50);

  let locX = mouseX-width/2;

  let locY = mouseY-height/2;

    lightFalloff(constant.value(), linear.value(), quad.value());

  ambientLight(100);

  directionalLight(255, 0, 0, 1, 0, 0);

  //pointLight(0, 0, 255, locX, locY, 200);

  spotLight(0,255,0,

            locX,locY,offset.value(),

            0,0,-1,

            angle.value(),

            conc.value());

  push();

  rotateZ(frameCount * 0.02);

  rotateY(frameCount * 0.02);

  texBox(100,img,color("white"));

  ambientMaterial(50);

  push()

  translate(width / 4, 0, 0);

  sphere(60, 64);

  translate(-width/2, 0, 0);

  sphere(60, 64);

  pop()

  push()

  translate(0, width / 4, width/4);

  sphere(60, 64);

  translate(0, -width/2, -width/2);

  sphere(60, 64);

  pop()

  pop();

push();

  translate(-width/2+80,-height/2+80)

​

  sphere(120,64);

  pop();

}

​

​