11_webgl.js

////////////////////////////////////////
//// BASIC BOX

function setup() {
  createCanvas(600, 400, WEBGL);
}

function draw(){
  background(0);
  box();
}

////////////////////////////////////////
//// TRANSLATE
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
  background(0);
  //moves our drawing origin to the top left corner
  translate(-width/2, -height/2, 0);
  box();
}

////////////////////////////////////////
//// ROTATE
var rot = 0;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  angleMode(DEGREES);
}

function draw(){
  background(0);
  
  // rotate around x/y axis
  // rotate(rot, [1, 1, 0]);
  
  // barrel roll around x axis
  rotateX(rot);
  box();
  rot+=0.05;
}


////////////////////////////////////////
//// CAMERA
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
  var camX = map(mouseX, 0, width, -width, width);
  var camY = map(mouseY, 0, height, -height, height);
  var camZ = 0;
  if (mouseIsPressed) {
    camZ = 1000;
  }
  camera(camX, camY, camZ);

  background(0);

  translate(30, 0, 0);
  rotateX(PI/6);
  rotateY(PI/3);
  box(45);
  translate(0, 0, -50);
  box(30);
}

////////////////////////////////////////
//// PERSPECTIVE
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){

  var fov = mouseX/width * PI/2;
  var aspect = width/height;
  if (mouseIsPressed) {
    aspect = aspect / 2.0;
  }
  perspective(fov, aspect, 0.1, 100);

  translate(30, 0, 0);
  rotateX(-PI/6);
  rotateY(PI/3 + mouseY/height * PI);
  box(45);
  translate(0, 0, -50);
  box(30);
}

////////////////////////////////////////
//// ORTHO
var rot = 0;

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

function draw(){
  if (mouseIsPressed) {
    ortho(-width, width, height, -height, 0.1, 100);
  } else {
    perspective(PI/3, width/height, 0.1, 100);
  }

  background(0);

  translate(300, 0, 0);
  box(50);
  translate(-600, 0, 100);
  box(50);
}

////////////////////////////////////////
//// 3D PRIMITIVES

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

function draw() {
  orbitControl();
  background(0);
  //draws a box of width: 10, height: 20, and depth: 30
  box(30, 50, 50);
  //draws a cone with radius: 40, height: 100, and a detail of 100
  cone(100, 100, 10);

  translate(200, 0, 0);
  sphere(50, 50, 50);
  translate(0, 100, 0);
  cylinder(30, 30);
  translate(0, 100, 0);
  torus(100, 60);
}


////////////////////////////////////////
//// 2D PRIMITIVES

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

function draw() {
  background(0);
  for (var i = -5000; i < 5000; i += 100) {
    triangle(
      0, 100, i,
      60, 160, i,
      -60, 160, i);
      
  }
}

////////////////////////////////////////
//// TEXTURES

var img;
var vid;
var theta = 0;

function setup(){
  createCanvas(710, 400, WEBGL);

  img = loadImage("cat.jpg");
  vid = createVideo("tex.mp4");
  vid.loop();
  vid.hide();
}

function draw(){
  background(250);
   translate(-220,0,0);
  push();
    rotateZ(theta * mouseX * 0.001);
    rotateX(theta * mouseX * 0.001);
    rotateY(theta * mouseX * 0.001);
    //pass image as texture
    texture(vid);
    sphere(150);
  pop();
    translate(440,0,0);
  push();
    rotateZ(theta * 0.1);
    rotateX(theta * 0.1);
    rotateY(theta * 0.1);
    texture(img);
    box(100, 100, 100);
  pop();
  theta += 0.05;
}

////////////////////////////////////////
//// LIGHTS

function setup(){
  createCanvas(710, 400, WEBGL);
  angleMode(DEGREES);
}

function draw() {
  // ambientLight(255,0,0); //even red light across our objects
  // rotateX(45);
  // box(100);

  // var dirX = map(mouseX, 0, width, -1, 1);
  // var dirY = map(mouseY, 0, height, -1, 1);
  // directionalLight(250, 250, 250, dirX, -dirY, 0.25);
  // ambientMaterial(250);
  // sphere(50, 64);

  var locX = map(mouseX, 0, width, -1, 1);
  ambientLight(50);
  pointLight(0, 0, 200, locX, 0, 0);
  pointLight(200, 200, 0, -locX, 0, 0);
  specularMaterial(250);
  sphere(100, 100);

}