​

Welcome to the "Cry(p)(s)tolizing"!

​

Please read the instruction clearly below to start playing.

​

Play with computers is recommended. 

​

Before you start, have a microphone attached to your desktop.

Or if you are using a laptop, make sure you turn it on.

Please allow the browser to use the microphone.

​

1. Press the ">"(PLAY) button on the very top left of the P5.JS interface to run the program

2. Press "a" to get into fullscreen mode.

3. Now, make some sounds and see what will happen.

(If it start changing like crazy, please go down to the code line 32, to change the value of "tresholdVoice" from 0.3 to 0.03).

4. You may navigate the project freely by using a mouse 

----(Left Click and Drag = view angle)

----(Double Left Click = reset camera position)

----(Double Left Click = reset camera position)

5. Press “r” key to print screen (might take a second to trigger)

6. If you can read the code, slide to the keypress setting to see what else can you play with different keys pressing

7. Thank you for playing!

​

Please check archgary.com for my other projects.

​

Jia-Rey(Gary) Chang

***All copyright and ownership reserved by Jia-Rey Chang

​

*/

​

let tresholdVoice = 0.3; //0.03 please try to change this value to 0.03 if it is changing too fast

​

var cam; 

let takeCapture = false;

​

let centralX = 0;

let centralY = -450;

let centralZ = 0;

​

//Tree tree;

let treeSpacing = 500;

let treeSpacingRand = 200;

​

let jointSize = 2;

let boxSize = 200;

let trussSize = 5;

let facadeOn = true;

let floorOn = true;

let jointOn = false;

let trussOn = true;

let boxOn = true;

let boxFaceOn = true;

let platformOn = false;

let sizing = 100;

​

​

let treetree;

let saving = false;

let xoff01 = 0.0;

​

//mic

let level = 0;

let open = 0;

let BGChange = false;

​

//capture

​

function setup(){

  c = createCanvas(window.innerWidth, window.innerHeight, WEBGL); 

  cam = new Dw.EasyCam(this._renderer, {distance:1800, center:[centralX,centralY,centralZ]});  

  treeList= [];

  rockList = [];

  FTreeLocList = [];

  FTreeColorList = [];

  FTreeSizeList = [];  

   for(let i = -0.5; i<= 0.5; i+=1){

     for(let j =-0.5; j<= 0.5; j+=1){

     var loc = createVector(i*treeSpacing,0,j*treeSpacing);       

     var jointList = [];

     tree = new Tree(loc, sizing,5,int(random(5,12)),50,150, jointList);        

     treeList.push(tree);

   }

   }

   //fakeTress

  for(let i = 0; i< 50; i+=1){

   locFTree = createVector(random(-680,680),random(-100,-500),random(-680,680));

   FTreeColor = createVector(random(100,255),random(100,255),random(200,255));

   FTreeSize = random(20,80);    

   FTreeLocList.push(locFTree);

   FTreeColorList.push(FTreeColor);

   FTreeSizeList.push(FTreeSize);

  }  

  //mic  

  mic = new p5.AudioIn();

  mic.start();

​

}

​

​

function draw(){

​

  if(BGChange == false){

  background(color('#607D8B'));

  }else{

  background(color('#EDD81C'));    

  }

​

  push();

  directionalLight(255,255,255,1,1,-1);

  directionalLight(255,255,255,1,1,-1); 

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

  //pop();

​

  //platform & box

   for(let i = -0.5; i<= 0.5; i+=1){

     for(let j =-0.5; j<= 0.5; j+=1){

  push();     

  translate(i*treeSpacing,150+10,j*treeSpacing);  

  fill(0,200,255,100);

  strokeWeight(2);  

  stroke(255);

  //box(500,10,500);

  pop();    

     }

   }

   for(let i = -0.5; i<= 0.5; i+=1){

     for(let j =-0.5; j<= 0.5; j+=1){  

  push();     

  translate(i*treeSpacing,150-1200/2,j*treeSpacing);  

  //fill(170,220);

  noFill();

  strokeWeight(2);  

  stroke(255);

  //box(500,1200,500);

  pop();    

     }

   }  

  //Mic Blow

  push();

  let vol = mic.getLevel(); 

  target = map(mic.getLevel(),0,1,0,3600);

  level = lerp(level,target,0.5);

  if(level > 500){

  open = open + 1;

  if(open%200 == 0){

    boxOn = !boxOn;

    BGChange = !BGChange;

    }

  }

​

  //bouncing

  push();

  translate(0, 100*sin(frameCount*0.01), 0);

​

  //floor

  push();

  translate(0,50,0);  

  fill(170);

  strokeWeight(2);  

  stroke(255);

  //box(2000,10,2000);

  pop();

​

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

      treeList[i].display();

  }

  cam.rotateY(0.005); 

  //FTree

    for(let i = 0; i< FTreeLocList.length; i+=1){

     push();

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

     strokeWeight(FTreeSizeList[i]);

     stroke(FTreeColorList[i].x, FTreeColorList[i].y, FTreeColorList[i].z);     

     point(0,0,0);

     strokeWeight(2);

     //line(0, 0, 0, 0, -FTreeLocList[i].y, 0)     

     pop();

   } 

​

  if (vol>0.3 || frameCount %100 == 0){           

     treeList = [];

   for(let i = -0.5; i<= 0.5; i+=1){

     for(let j =-0.5; j<= 0.5; j+=1){

     var loc = createVector(i*treeSpacing,0,j*treeSpacing);       

     var jointList = [];

     tree = new Tree(loc, sizing,5,int(random(5,10)),50,150, jointList);        

     treeList.push(tree);

      }

     }

   //fakeTree

    FTreeLocList = [];

    FTreeColorList = [];

    FTreeSizeList = [];      

   for(let i = 0; i< 50; i+=1){

   locFTree = createVector(random(-680,680),random(-100,-500),random(-680,680));

   FTreeColor = createVector(random(100,255),random(100,255),random(200,255));

   FTreeSize = random(20,80);    

   FTreeLocList.push(locFTree);

   FTreeColorList.push(FTreeColor);

   FTreeSizeList.push(FTreeSize);

  }  

  }

  pop();

  pop();

  pop();

    if(takeCapture){   

      saveCanvas(c, 'profile', 'jpg');

      takeCapture = false;

       spinOn = true;   

    }

}

​

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  cam.setViewport([0,0,windowWidth, windowHeight]);

}

​

​

​

function keyPressed(){

 if(key == 'a'){

   let fs = fullscreen();

   fullscreen(!fs);

 } 

 if(key == 'f'){

    facadeOn = !facadeOn;

 } 

 if(key == 'd'){

    floorOn = !floorOn;

 } 

 if(key == 'j'){

    jointOn = !jointOn;

 }  

 if(key == 't'){

    trussOn = !trussOn;

 }    

 if(key == 'b'){

    boxOn = !boxOn;

 }   

 if(key == 'p'){

    boxFaceOn = !boxFaceOn;

 }    

 if(key == 'r'){//Photo 

   takeCapture = true;

 }  

}

​