Processing笔记（五）

Contents

1. 1. 使用Processing.js创建3D图形
   1. 1.1. 预览图
   2. 1.2. html代码(格式难看就不要吐槽了)

使用Processing.js创建3D图形

之前一直以为processingjs是放在Canvas上的就认为没有办法取得3D绘图环境。当然只是我以为。事实证明只是我不太了解processingjs这个包的强大了。当然互动的话现在暂时只有鼠标位置的互动，其他的功能我暂时没有得到很好的实现。具体做法是根据processingjs的语法，把以前玩的一个鼠标互动3dbox的Pocessing文件进行了简单的翻译，改的地方很多，而且真的要实现的话对那个包要非常的熟悉。一个好的创意的实现，是99%的思考加上1%的代码这就是你偷懒的理由？。效果大概目前这个样子

预览图

原图链接：
http://pan.baidu.com/s/1i3xOC8t

html代码(格式难看就不要吐槽了)

function sketchProc(processing) {
  var color1 = 0;
  var abox = 125;
  var bbox = 75;
  var cbox = 30.0;
  var value = "Created by Xana";
  var dbox = 60;
  processing.setup = function () {
  	processing.size(400, 400, processing.P3D);
  	processing.noFill();
  	processing.smooth();
  }
  processing.draw = function() {
  	if (processing.mousePressed == true) { processing.background(0); } 
  	else{ processing.background(222); };
  	processing.translate(processing.width/2, processing.height/2, -(processing.width/2));	//在中心绘图
  	processing.rotateY(processing.map(processing.mouseX, 0, processing.width, -Math.PI, Math.PI));	//水平旋转
  	processing.stroke(100);
  	processing.box(2*abox);
  	processing.textSize(25);
		processing.text(value, abox, abox);
		for(var i = -1;i<2;i+=2)
		  for(var j = -1;j<2;j+=2)
		    for(var k = -1; k<2; k+=2){
			  processing.translate(abox*i, abox*j, abox*k);
			  processing.box(abox/5);
			  processing.translate(-abox*i, -abox*j, -abox*k);
			}
    processing.rotateX(processing.map(processing.mouseY, 0, processing.height, -Math.PI, Math.PI));	//竖直旋转
    processing.stroke(150);
	processing.box(2*bbox);					//绘制立方体
	for(var i = -1;i<2;i+=2)
		for(var j = -1;j<2;j+=2)
			for(var k = -1; k<2; k+=2){
				processing.translate(bbox*i, bbox*j, bbox*k);
        processing.box(bbox/4);
        processing.translate(-bbox*i, -bbox*j, -bbox*k);
      }
      processing.rotateZ(processing.map(-processing.mouseX, 0, processing.width, -Math.PI, Math.PI));
      processing.strokeWeight(5);
      processing.fill(0);
      processing.box(dbox);
      processing.noFill();
      processing.strokeWeight(1);
    }
/*鼠标滚轮似乎出了点问题
processing.mouseWheel = function(MouseEvent event) {
  var e = event.getAmount();
  println(e);
  value += e;
  println(value);
  }
*/
}
var canvas = document.getElementById("canvas1");
var p = new Processing(canvas, sketchProc);