2203threeD3_lighting

// webGL is the web browser version of openGL

// openGL is a graphics standard

// need three things:

// 1 - virtual world to put stuff in ('render context')

// 2 - one or more viewports into #1 ('camera', 'window')

// 3 - some stuff to put into the word:

// 3a - 3D stuff aka shapes ('geometry', 'vertices')

// 3b - 2D stuff aka pictures ('textures', 'fragments')

// 3c - executable code aka algorithms ('shaders')

​

var numboxes = 250;

var boxes = [];

var sx = sy = sz = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

​

  randomize();

}

​

function draw() {

  background(255);

  directionalLight(255, 0, 0, sin(sx), sin(sy), sin(sz)); // color rgb then direction xyz

  directionalLight(0, 255, 0, cos(sx), sin(sz), cos(sy)); // color rgb then direction xyz

  directionalLight(0, 0, 255, cos(sy), sin(sx), sin(sz)); // color rgb then direction xyz

//  noFill();

  fill(255, 255, 255, mouseX/width*255);

  for(let i = 0;i<boxes.length;i++)

  {

    push();

    translate(boxes[i].x, boxes[i].y, boxes[i].z);

    rotateX(boxes[i].rx);

    rotateY(boxes[i].ry);

    rotateZ(boxes[i].rz);

    box(50);

    boxes[i].rx+=0.01;

    boxes[i].ry+=0.01;

    boxes[i].rz+=0.01;

    pop();

  }

  sx+=0.01033;

  sy+=0.0234;

  sz+=0.03024;

}

​

function keyPressed()

{

  randomize();

}

​

function randomize() {

  boxes = [];

  for(let i = 0;i<numboxes;i++)

  {

    let b = {};

    b.x = random(-width/2, width/2);

    b.y = random(-height/2, height/2);

    b.z = random(-height/2, height/2);

    b.rx = random(100);

    b.ry = random(100);

    b.rz = random(100);

    boxes.push(b);

  }

}

​

​

​

​

​

​

​

​

​