final int BOX_SIZE = 100; PImage tex; // フレームごとにテクスチャを更新する、、、はずだが void updateTexture() { colorMode(HSB, 360, 100, 100); tex.loadPixels(); for (int i = 0; i < tex.width; i++) { for (int j = 0; j < tex.height; j++) { int h = frameCount % 360; tex.set(i, j, (floor(i / 0x20) + floor(j / 0x20)) % 2 == 0 ? color(h, 10, 100) : color(h, 30, 50)); } } tex.updatePixels(); colorMode(RGB, 0xff, 0xff, 0xff); } void setup() { size(200, 200, P3D); tex = createImage(0x80, 0x80, HSB); } void draw() { background(0xff); camera(); noStroke(); translate(.5 * width, .5 * height); float angle = radians(millis() * 0.015); rotateZ(angle); rotateX(angle); rotateY(angle); updateTexture(); drawBox(BOX_SIZE); } void drawBox(float boxSize) { pushMatrix(); for (int i = 0; i < 4; i++) { rotateY(i * HALF_PI); pushMatrix(); translate(0, 0, -.5 * boxSize); drawPlane(boxSize, boxSize, tex); popMatrix(); } for (int i = 0; i < 2; i++) { rotateX(HALF_PI + i * HALF_PI); pushMatrix(); translate(0, 0, -.5 * boxSize); drawPlane(boxSize, boxSize, tex); popMatrix(); } popMatrix(); } void drawPlane(float w, float h, PImage img) { float halfWidth = .5 * w; float halfHeight = .5 * h; beginShape(); textureMode(NORMAL); texture(img); vertex(-halfWidth, -halfHeight, 0, 0, 0); vertex(-halfWidth, halfHeight, 0, 0, 1); vertex(halfWidth, halfHeight, 0, 1, 1); vertex(halfWidth, -halfHeight, 0, 1, 0); endShape(CLOSE); }
<canvas width="200px" height="200px"></canvas>
body { background-color: #fff; } </style> <script type="text/javascript"> window.addEventListener('load', function() { var scripts=document.body.getElementsByTagName('script'); var canvases=document.body.getElementsByTagName('canvas'); new Processing(canvases[0], scripts[0].text); } , false); // Here prevent javascript in body from throwing error </script> <style>