2. Mixed Reality

Beispiel Augmented Reality: Reactable

Beispiel Augmented Reality: Pool Live Aid

Während sich die virtuellen Elemente beim Reactable sich auf die Darstellung auf einer Oberfläche beschränken und als User Interface gesehen werden kann, wurde es in jüngster Vergangenheit populär, Augmented Reality auf den dreidimensionalen Raum zu beziehen.

Beispiel Augmented Reality: Pokémon Go

AR Overkill: Link

import jp.nyatla.nyar4psg.*;
import jp.nyatla.nyar4psg.utils.*;

import processing.video.*;

Capture cam;
MultiMarker nya;

PVector pointer;            // A Vector that holds coordinates of mousepointer in 3D-space
PImage map;            // PImage for the map image
PShape maptable, stand, mapboard;    //PShapes for the virtual map stand

void setup() {
  size(640,480,P3D);
  //cam=new Capture(this,640,480);                // use internal cam
  cam = new Capture(this,  640, 480, "Live! Cam Sync HD VF0770"); // use external cam
  
  // setup Multimarker Object
  nya=new MultiMarker(this,width,height,"data/camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  nya.addARMarker("data/patt.hiro",80);  // define a marker image to use
  map = loadImage("worldmap_smaller.jpg");  // load map image from data folder
  cam.start();                           // start cam
  
  // Create a virtuel 3D-object that holds the map
  maptable = createShape(GROUP);
  stand = createShape(BOX, 300,200,100);
  stand.setFill(color(255, 255, 255, 100));;
  maptable.addChild(stand);
  mapboard = createShape(BOX, 300, -200, 1);
  mapboard.translate(0,0,55);
  mapboard.setFill(color(255, 255, 255, 255));
  mapboard.setTexture(map);
  maptable.addChild(mapboard);
}

void draw()
{
  if (cam.available() !=true) {   // if cam hasn`t been started yet, go to start
      return;
  }
  cam.read();        // read image from cam
  nya.detect(cam);   // analyze cam image for markers
  background(0);
  nya.drawBackground(cam);  // draw the cam image to the background of our sketch
  if((!nya.isExist(0))){  // if no marker was found in the feed of the cam 
    return;            // go back to start of draw loop
  }
  pointer=nya.screen2ObjectCoordSystem(0,mouseX,mouseY); //translate mouseposition to 3D-world
  rotateY(PI);
  nya.beginTransform(0);      // start drawing in 3D of marker (0)
    shape(maptable);          // draw the map holder containing the map
    stroke(100,100,0);        // set conditions to draw a mouse pointer in 3D
    translate(0,0,50);
    fill(200);
    ellipse((int)pointer.x,(int)pointer.y,20,20);
  nya.endTransform();        // end drawing in 3D of the marker
}

import processing.video.*;
import jp.nyatla.nyar4psg.*;

Capture cam;
MultiMarker nya;
int amount = 10;
color[] colors = new color[amount];              // declare Array for colors
float[] rotation = new float[amount];            // declare Array for rotation
PShape figure;

void setup() {
  size(640,360,P3D);
  colorMode(HSB, 100);
  figure = loadShape("dummy_obj.obj");
  shapeMode(CENTER);
  //cam=new Capture(this,640,480);          // Internal Cam
  cam=new Capture(this,640,360, "Live! Cam Sync HD VF0770");
  nya=new MultiMarker(this,width,height,"data/camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  
  // Add several NyID Markers by this for-loop --------------------------
  for (int i=0; i < amount; i++){
    nya.addNyIdMarker(i,80);                      // add Marker
    colors[i] = color(i*2+75, 100,100, 40);      // add color for linked object
    rotation[i] = random(TWO_PI);              // add rotation for linked object
  }
  cam.start();
  lights();
}

void draw()
{
  if (cam.available() !=true) {
      return;
  }
  cam.read();
  nya.detect(cam);
  background(0);
  nya.drawBackground(cam);
  
  // Add transformations for all the markers in this for-loop --------------------------
  for (int i=0; i < amount; i++){
    if((nya.isExist(i))){            // test, if a marker is detected
      nya.beginTransform(i);          // start drawing in 3D of the detected marker
        figure.setFill(colors[i]);    // set color of object
        rotateX(PI/2);
        rotateY(rotation[i]);        // set rotation of object
        translate(100,80);          // center it on marker
        shape(figure, 0, 0);        // draw object
      nya.endTransform();          // end drawing in 3D of the marker
    }
  }  
}

import processing.video.*;
import jp.nyatla.nyar4psg.*;

Capture cam;
MultiMarker nya;

int amount = 11;

Blossom[] blossoms = new Blossom[amount];

float theta = 0.0;
int totalShapes = 8;
int totalPoints = 50;
float scaling = random(20, 40);

float[] pointX = new float[totalPoints];
float[] pointY = new float[totalPoints];
float[] pointZ = new float[totalPoints];

void setup() {
  size(640,360,P3D);
  colorMode(HSB);
  //cam=new Capture(this,640,480);          // Internal Cam
  cam=new Capture(this,640,360, "Live! Cam Sync HD VF0770");
  nya=new MultiMarker(this,width,height,"data/camera_para.dat",NyAR4PsgConfig.CONFIG_PSG);
  for (int i=0; i < amount; i++){
    nya.addNyIdMarker(i,80);
    blossoms[i] = new Blossom();
    blossoms[i].setPoints();
  }
  cam.start();
  lights();
}

void draw()
{
  if (cam.available() !=true) {
      return;
  }
  cam.read();
  nya.detect(cam);
  nya.drawBackground(cam);

  for (int i=0; i < amount; i++){
    if((nya.isExist(i))){
      nya.beginTransform(i);
        stroke(0,100);
        strokeWeight(6);
        line(0,0,0,0,0,blossoms[i].getStemHeight());
        translate(0, 0, blossoms[i].getStemHeight());
        blossoms[i].rotateObject();
        
        rotateX(blossoms[i].getRotation());
        rotateY(blossoms[i].getRotation());
        blossoms[i].drawObject();
      nya.endTransform();
    }
  }
}

class Blossom {
  float theta = 0.0;
  float rotationSpeed = random(0.001, 0.02);
  float stemHeight = random(100,300);
  int totalPoints = 40;
  float scaling = random(20, 40);
  
  float[] pointX = new float[totalPoints];
  float[] pointY = new float[totalPoints];
  float[] pointZ = new float[totalPoints];
  
 Blossom(){
   
 }
  
 void setPoints(){
  for(int i = 0; i < totalPoints ; i ++){
    pointX[i] = randomGaussian()*scaling;
    pointY[i] = randomGaussian()*scaling;
    pointZ[i] = randomGaussian()*scaling;
  } 
 }
  
 void drawObject(){
  beginShape(TRIANGLES);
  for(int i = 0; i < totalPoints-2 ; i ++){
    fill(205+i, 200, 200, 150);
    strokeWeight(2);
    stroke(255,80);
    vertex(pointX[i], pointY[i], pointZ[i]);
    vertex(pointX[i+1], pointY[i+1], pointZ[i+1]);
    vertex(pointX[i+2], pointY[i+2], pointZ[i+2]);
  }
  endShape(); 
 }
 
 void rotateObject(){
    theta += rotationSpeed;
 }
 
 float getStemHeight(){
    return stemHeight;
 }
 
 float getRotation(){
    return theta;
 }  
}

void setup() {
   fullScreen();
   background(10,40,10);
}

void draw(){
   float heavyness = 30-((abs(mouseX-pmouseX))+(abs(mouseY-pmouseY)));
   heavyness = constrain(heavyness, 6, 30);
   strokeWeight(heavyness);
   stroke(150,mouseY,mouseX, 100);
   //stroke(255);
     line(pmouseX, pmouseY, mouseX, mouseY);
}   
    

import android.view.MotionEvent;
import ketai.ui.*;

KetaiGesture gesture;

int amount = 10;
PImage[] images = new PImage[amount];
float radius = 1200;
float angleX = 0;
float angleY = 0;
float angleZ = 0;


void setup(){
  fullScreen(P3D);
  orientation(LANDSCAPE);
  imageMode(CENTER);
  gesture = new KetaiGesture(this);
  for (int i = 0; i < images.length; i++){
    images[i] = loadImage(i+".jpeg"); 
  }
}

void draw(){
  background(10,10,30);
  translate(width/2,0,0);
  rotateX(angleX);
  rotateY(angleY);
  rotateZ(angleZ);
  drawPics();
}

void onPinch(float x, float y, float d){
  radius = constrain(radius+d, 10, 2000);
}

void onRotate(float x, float y, float ang)
{
  angleZ += ang;
}

void onFlick( float x, float y, float px, float py, float v){
  float distX = px-x;
  float distY = y-py;
  angleY += distX/1000;
  angleX += distY/1000;
}

void drawPics(){
  float angle = 0;
  for (int i = 0; i < images.length; i++){
     float stepSize = TWO_PI / images.length;      // set stepsize for rotation
     angle = i*stepSize;
     float px = 0 + (radius * cos(angle));
     float py = 0 ;
     float pz = 0 + (radius * sin(angle));
    
     pushMatrix();
     translate(px, py, pz);
     rotateY(-angle+(PI/1.65));
     image(images[i], 0, 0);
     popMatrix();
  }
}

public boolean surfaceTouchEvent(MotionEvent event) {
  super.surfaceTouchEvent(event);          //call to keep mouseX, mouseY, etc updated
  return gesture.surfaceTouchEvent(event);  //forward event to class for processing
}

import ketai.camera.*;


KetaiCamera cam;
void setup() {
  orientation(LANDSCAPE);
  imageMode(CENTER);
  cam = new KetaiCamera(this, 1280, 720, 24);
}

void onCameraPreviewEvent(){
  cam.read();
}

void draw() {
  if(cam.isStarted())
    image(cam, width/2, height/2);
  else
    cam.start();
}

import ketai.camera.*;

KetaiCamera cam;

float resolutionX = 30;
float resolutionY = 30;

void setup() {
  orientation(LANDSCAPE);
  imageMode(CENTER);
  cam = new KetaiCamera(this, 1280, 720, 24);
}

void onCameraPreviewEvent(){
  cam.read();
}

void draw() {
  if(cam.isStarted()){
    image(cam, width/2, height/2);
    for(int y=0; y < height; y += resolutionY){ 
     for(int x=0; x < width; x += resolutionX){
       int pos = x + y * width;
       color c = cam.get(x,y);
       fill(c);
       noStroke();
       ellipse(x,y,resolutionX, resolutionY);
     }
   }
  }else{
    cam.start();
  }
}     

You know how to do this.

void mousePressed() {
  cam.savePhoto();
}

void onCameraPreviewEvent(){
  cam.read();
}

void onSavePhotoEvent(String filename){
  cam.addToMediaLibrary(filename);                               
}

void saveImage(String file) {
  displayCopy = get();
  try
  { 
    directory = new String(Environment.getExternalStorageDirectory().getAbsolutePath());
    displayCopy.save(directory + "/" + file);
  } 
}

import ketai.camera.*;
import android.os.Environment;

KetaiCamera cam;

float resolutionX = 30;                    // Resultion for the effect
float resolutionY = 30;

String directory = "";
String filename = "image.jpg";                 // filename for our saved image

PImage displayCopy;                            // PImage to store the pixels of the display image
                                               // for saving

void setup() {
  orientation(LANDSCAPE);                      // force phone in landscape mode
  imageMode(CENTER);
  cam = new KetaiCamera(this, 1280, 720, 24);  // set cam
}

void draw() {
  if(cam.isStarted()){
    image(cam, width/2, height/2);               // draw cam image
    for(int y=0; y < height; y += resolutionY){  // loop through all pixels
     for(int x=0; x < width; x += resolutionX){  // and process a tiny effect
       int pos = x + y * width;                  
       color c = cam.get(x,y);                  
       fill(c);
       noStroke();
       ellipse(x,y,resolutionX, resolutionY);
     }
   }
  }else{
    cam.start();
  }
}

// Function to save image to SD card
void saveImage(String file) {
  displayCopy = get();
  try
  { 
    directory = new String(Environment.getExternalStorageDirectory().getAbsolutePath());
    displayCopy.save(directory + "/" + file);
  } 
}

// save image when tapping the screen
void mousePressed(){
  saveImage(filename);
  //cam.savePhoto();                  // ketai`s function to save a cam image to android`s media folder
}

// read cam image if available
void onCameraPreviewEvent(){
  cam.read();                        
}

void onSavePhotoEvent(String filename){
  cam.addToMediaLibrary(filename);                               
}

import processing.cardboard.*;

PShape grid;
PShape cubes;

void setup() {
  fullScreen(PCardboard.STEREO);
  
  grid = createShape();
  grid.beginShape(LINES);
  grid.stroke(255);
  for (int x = -10000; x < +10000; x += 250) {
    grid.vertex(x, -1000, +10000);
    grid.vertex(x, -1000, -10000);
  }
  for (int z = -10000; z < +10000; z += 250) {
    grid.vertex(+10000, -1000, z);
    grid.vertex(-10000, -1000, z);      
  }  
  grid.endShape();  
  
  cubes = createShape(GROUP);
  for (int i = 0; i < 100; i++) {
    float x = random(-1000, +1000); 
    float y = random(-1000, +1000);
    float z = random(-1000, +1000);
    
    float r = random(50, 150);
    PShape cube = createShape(BOX, r, r, r);
    cube.setStroke(false);
    cube.setFill(color(180));
    cube.translate(x, y, z);
    cubes.addChild(cube);
  }
}

void draw() {
  background(0);
  ambientLight(150, 150, 150);
  pointLight(255, 255, 255, 0, 0, 0);
  translate(width/2 - 1000, height/2, 500);
  shape(cubes);
  shape(grid);
}

import processing.cardboard.*;

int amount = 10;                         // we`l use 10 images (stored in the data folder)
PImage[] images = new PImage[amount];    // declare an array for the Images
float radius = 1200;                    
float angleX = 0;
float angleY = 0;
float angleZ = 0;


void setup(){
  //fullScreen(P3D);
  //orientation(LANDSCAPE);
  fullScreen(PCardboard.STEREO);
  for (int i = 0; i < images.length; i++){// loop through our array  
    images[i] = loadImage(i+".jpeg");     // Load the images into our array (filenames are 0.jpeg, 1.jpeg,…)
  }
}

void draw(){
  background(10,10,30);                  //erase everything with deep blue
  drawPics();                            //call our function
}


void drawPics(){
  float angle = 0;
  for (int i = 0; i < images.length; i++){
     float stepSize = TWO_PI / images.length;      // set stepsize for rotation
     angle = i*stepSize;
     float px = 0 + (radius * cos(angle));         // calculate the spherical x,y,z-position for every image
     float py = 0 ;
     float pz = 0 + (radius * sin(angle));
    
     pushMatrix();                                  // save matrix to stack
     rotateZ(PI);                                   // flip image
     translate(px, py, pz);                         // move drawing location to calculated xmymz-postion
     rotateY(-angle+(PI/1.75));                     // rotate image accordingly in space
     image(images[i], 0, 0);                        // now finally draw the image
     popMatrix();                                   // restore old matrix
  }
}

//import processing.cardboard.*;

import peasy.*;
PeasyCam camera;

int len = 400;                          // length of trail

float[] angleA = new float[len];        // Array for angle 1 of spherical points 
float[] angleB = new float[len];        // Array for angle 2 of spherical points 
color[] hues = new color[len];

float radius = 1000;                    // Distance of the trail
float lastX, lastY, lastZ;              // to store last position

float noiseXoffset = 0;                 // starting position for perlin noise X
float noiseYoffset = 4;                 // starting position for perlin noise Y

int centerX, centerY, centerZ;
float hueOffset = 0;

void setup(){
   //fullScreen(PCardboard.STEREO);
   size(800,600, P3D);
   frameRate(30);
   camera = new PeasyCam(this, 0, 0, 0, 4000);
   centerX = 0;
   centerY = 0;
   centerZ = 0;
   colorMode(HSB);
   /*for(int i = 1; i < angleA.length; i++){                  // loop through Array
     noiseXoffset += random(0.1);                           // vary step size for noise
     noiseYoffset += random(0.1);
     angleA[i] = map(noise(noiseXoffset), 0, 1, 0, PI);      // calculate new angle 1 for point
     angleB[i] = map(noise(noiseYoffset), 0, 1, 0, TWO_PI);  // calculate new angle 2 for point
     hues[i] = color(i, 100, 255);                           // set hue
   }*/
   stroke(0,100);
}


void draw(){
  background(hueOffset,100,100);
  noiseXoffset += random(0.06);
  noiseYoffset += random(0.02);
  if (hueOffset<360) hueOffset += 1; else hueOffset = 0;
  
  // Shift Arrays
  for(int i = 1; i < angleA.length; i++){                          // loop through Array(s) (starting at 1)
    angleA[i-1] = angleA[i];                                       // shift actual i to i-1
    angleB[i-1] = angleB[i];
    hues[i-1] = hues[i];
  }
  
  // Add actual Position at the end of array
  angleA[angleA.length-1] = noise(noiseXoffset) * TWO_PI * 2;      // take next values from Perlin Noise and use
  angleB[angleB.length-1] = (noise(noiseYoffset)-0.5) * TWO_PI * 2;// it as a radian value for our angles
  hues[hues.length-1]  = color(hueOffset,100,255);                 // add new hue
  
  // Draw Trail
  noFill();
  beginShape();                                                    // begin a Shape made out of vertices
  for(int i = 1; i < angleA.length; i++){                          // loop through Array(s)
   float x = centerX + radius * sin(angleA[i]) * cos(angleB[i]);
   float y = centerY + radius * sin(angleA[i]) * sin(angleB[i]); 
   float z = centerZ+ radius * cos(angleA[i]); 
   //hues[i] = color(i, 255, 255);
   stroke(hues[i], i*2);                                           // set hue from array
   strokeWeight(i/(len/100));                                      // set width of stroke (the older the thinner)
   vertex(x, y, z);                                                // draw next point
  }
  endShape();
}