p5js - 3D Spikey Plane Ball

p5js-3d-spikey-plane-ball.markdown

p5js - 3D Spikey Plane Ball

Testing 3D plane creation in p5js

A Pen by Kultur Design on CodePen.

License.

script.js

// rotation
var objRotateX = 0;
var objRotateY = 0;
var objRotateZ = 0;

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

function draw() {
  background(230);
  doAnimate();
  objRotate();
  drawModel();
  
}

function drawModel() {
  var spikeCount = 1000;
  var spikeMaxLen = height/10;
  var groupRadius = (height/2) - (height/10);
  
  
    
  basicMaterial(32);
  
  for (var s=0; s < spikeCount; s++) {
    
    var noiseCoord = s;
    var rnd = lerp(-1,1,noise(noiseCoord));

    
    // translate
    rotateY(PI*rnd);
    rotateZ(PI*rnd);
    translate(groupRadius,0,0); 
    
    plane(rnd * spikeMaxLen,0.5);
    
    //reset translation
    translate(-groupRadius,0,0);  
    rotateY(-(PI*rnd));
    rotateZ(-(PI*rnd));
  }
  
}

function doAnimate() {
  // increment animation variables
  objRotateX -= 0.1;
  objRotateY -= 0.1;
  objRotateZ -= 0.1;
}

function objRotate() {
  rotateX(radians(objRotateX));
  rotateY(radians(objRotateY));
  rotateZ(radians(objRotateZ));
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>

style.css

body {
  background:#e6e6e6;
  margin: 0;
  padding: 0;
}