• 0 Creative Programming 2
• 1. Basics and visuals
• 2. Sound
• 3. 3D and Augmented Reality
• 4. Interaction and sensors
• Literatur

3. 3D and Augmented Reality

Content

1. 3D
2. Augmented Reality

1. 3D

Sphapes

var angle = 0;
var radius = 100;
let xoff = 0.0;


var fs = fullscreen();

function setup(){
  createCanvas(690,400, WEBGL);
  frameRate(60);
  noStroke();
}


function draw(){
  background(30,40, 60);
  ambientLight(0, 100, 100);
  directionalLight(255,255,0, +1,-1,0);
  
  rotateX(angle);
  rotateY(angle);
  rotateZ(angle);

  torus(noise(xoff)*400, 50, 40, 20);

  radius += random(-3,3);
  angle += 0.02;
  xoff = xoff + 0.01;
}


function mousePressed(){
    fullscreen(!fs);
    return false;
}

function windowResized(){
  if (fullscreen()) {
      resizeCanvas(displayWidth, displayHeight);
  } else {
    resizeCanvas(windowWidth,windowHeight);
  }
}
  

lighting

obj-Files

var angle = 0;
var fs = fullscreen();
var butterfly;

function preload(){
  butterfly = loadModel('material/MONARCH.obj');
}

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


function draw(){
  background(30,40, 60);
  ambientLight(0, 100, 100);
  directionalLight(255,255,0, 0,4000,4000);
  translate(mouseX-width/2, mouseY-width/2, 0);
  scale(12000);
  //box(200);
  //rotateX(90);
  rotateX(angle);
  rotateY(angle);
  rotateZ(angle);
  model(butterfly);

  angle += 0.01;
}


function touchStarted(){
    fullscreen(!fs);
    return false;
}

function windowResized(){
  if (fullscreen()) {
      resizeCanvas(displayWidth, displayHeight);
      background(200);
      //ellipse(200,200,50,50);
  } else {
    resizeCanvas(windowWidth,windowHeight);
  }
}
  

swarm

var angle = 0;
var sizes = [];
var translatesX = [];
var translatesY = [];
var translatesZ = [];
var boxamount = 200;

function setup(){
  createCanvas(windowWidth,windowHeight, WEBGL);
  noStroke();
  
  for(var i = 0; i < boxamount; i++){
    sizes[i] = random(10,60);
    translatesX[i] = randomGaussian(0, 100);
    translatesY[i] = randomGaussian(0, 50);
    translatesZ[i] = randomGaussian(0, 100);
  }
}


function draw(){
  background(30,40, 60);
  ambientLight(40, 90, 50);
  directionalLight(40,100,150, 0,-1,1);
  
  rotateX(angle);
  rotateY(angle);
  rotateZ(angle);

  for(var i = 0; i < boxamount; i++){
    push();
    translate(translatesX[i], translatesY[i], translatesZ[i])
    box(sizes[i],translatesX[i]);
    pop();
  }
  

  angle += 0.01;
}

FFT 3D Matrix

var song;
var angle = 0;
var xoff = 0.0;

function preload() {
  song = loadSound('oregano.mp3');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  pixelDensity(1);
  setAttributes('antialias', true);

  fft = new p5.FFT();
  song.rate(1);
  stroke(255);
  strokeWeight(2);
  fill(255,150);
}

function draw() {
  background(30, 40, 60);
  
  //text("Press Left Button to start",10,10);
  ambientLight(0, 100, 100);
  directionalLight(255, 255, 0, -1, 1, -1);

  
  rotateX(1);
  rotateZ(angle);
  translate(-180, -180, 0);
  var spectrum = fft.analyze(256);

  for (var y = 0; y < 12; y += 1) {
    for (var x = 0; x < 16; x += 1) {
      currentHeight = spectrum[(y * 8) + x];
      push();
      translate(x * 30, y * 30, 0);
      scale(1, 1, sqrt(currentHeight) + 1);
      //box((x+y)*2);
      box(20);
      pop();
    }
  }
  
  xoff = xoff + 0.01;
  
  angle += (noise(xoff)-0.5)/20;
}

function mousePressed() {
  if (song.isPlaying()) {
    song.stop();
  } else {
    song.play();
  }
}

  

easyCam

var angle = 0;
var easycam;
var butterfly;


function setup(){
  pixelDensity(1);
  var canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);
  console.log(Dw);
    console.log(Dw.EasyCam.INFO);
  easycam = createEasyCam();
  noStroke();
}


function draw(){
  background(255);
  ambientLight(0, 100, 100);
  directionalLight(255,255,0, 0,-1,1);
  box(200);
  angle += 0.01;
}
  

threejs.org/

2. Augmented Reality