realtime 3D vectorballs in CSS/JavaScript

c0dex10h · May 24, 2014

Other than the image used as a border (included as attatchment), this demo is purely CSS/JavaScript.
The colors are randomly selected when executed, as well as when you click on the image.

Enjoy!

Copy the following code, save as an html, and place the attatched image in the same folder as the html file.

HTML:

<!-- realtime 3D vectorballs in CSS/JavaScript - www.c0de.it -->
<!doctype html>
<html>
<head>
<title>c0de the planet</title>
</head>
<body>
<div onclick="changeColor()">
<center>
<div style="position:relative; width:400px; height:300px;">
<div id="box" style="visibility:hidden; z-index:-1; position:absolute; width:400px; height:300px; overflow:hidden;"></div>
<img src="box.png" onload="boxloaded()">
</div>
</center>
<style>
.divball{position:absolute; box-shadow: inset -5px -5px 20px 0px #000000; border-radius:255px; overflow:hidden;}
.hilite{position:absolute; width:5px; height:5px; border-radius:255px;}
</style>
<script>
// -- script main entry point --

var speed = 0;
var dbx = new Array(); var cbx = new Array();
var dby = new Array(); var cby = new Array();
var dbz = new Array(); var cbz = new Array();
var dbcolor = 0;
var population = 20;
var DIVBALL$ = "";
var x,y,tx,ty,tz;
var timer;
var shape=0;
var rt1 = new Array("0,0,0",  "0,0,2",  "0,-4,0",  "0,2,0",  "1,2,0",  "0,2,0",  "1,2,1");
var rt2 = new Array("0,0,0",  "0,-2,2", "0,6,0",  "1,2,0",  "0,2,1",  "0,2,1",  "1,1,2");
var rt3 = new Array("0,0,0",  "3,-3,2", "0,-10,0",  "-1,2,1",  "2,1,0",  "1,2,0",  "-2,2,2");

for (x=0; x<population; x++)
  { DIVBALL$ += "<div id='divball"+x+"' class='divball'><div id='hilite"+x+"' class='hilite'></div></div>"; }
document.getElementById('box').insertAdjacentHTML('BeforeEnd',DIVBALL$);

center();
copy();
changeColor()
draw();

// -- end of main entry point --

function timeline(){
  shape++;if(shape>6){shape=1}
  timer = setInterval("morph("+shape+"); draw();",(1000/30));
  setTimeout('copy(); clearTimeout(timer); timer=setInterval("rotateIt('+rt1[shape]+')",33)',1500);
  setTimeout('clearTimeout(timer); timer=setInterval("rotateIt('+rt2[shape]+')",33)',6000);
  setTimeout('clearTimeout(timer); timer=setInterval("rotateIt('+rt3[shape]+')",33)',10000);
  setTimeout('clearTimeout(timer); timeline()',15000);
}

function rotateIt(rx,ry,rz){
  for (a=0; a<population; a++) {
    var angle = ((Math.PI / 180)*speed);
    rotateX(a, angle*rx);
    rotateY(a, angle*ry);
    rotateZ(a, angle*rz);
  }
  draw();
  speed=speed+.05;if(speed>2){speed=2}
}

function copy() {
  for (x=0; x<population; x++) {cbx[x]=dbx[x];cby[x]=dby[x];cbz[x]=dbz[x];} }

function center() {
  for (x=0; x<population; x++) { dbx[x]=0; dby[x]=0; dbz[x]=0; } }

function circle() {
  for (x=0; x<population; x++) {
    dbx[x] = Math.round((Math.cos(x*((Math.PI*2)/population)))*95);
    dby[x] = Math.round((Math.sin(x*((Math.PI*2)/population)))*95);
    dbz[x] = 0;
} }

function square() {
  for (y=0; y<6; y++){
    for (x=0; x<5; x++){
      dbx[x+(y*5)] = -80+(x*40);
      dby[x+(y*5)] = -60+(y*40);
      dbz[x+(y*5)] = 0;
} } }

function box() {
  dbx = new Array(-50,0,50,-50,0,50,-50,0,50,-50,0,50,-50,50,-50,50,-50,50,-50,50);
  dby = new Array(-50,-50,-50,-50,-50,-50,50,50,50,50,50,50,50,50,-50,-50,0,0,0,0);
  dbz = new Array(-50,-50,-50,50,50,50,-50,-50,-50,50,50,50,0,0,0,0,-50,-50,50,50);
}

function spring() {
  for (x=0; x<population; x++) {
    dbx[x] = Math.round((Math.cos(x*((Math.PI*4)/population)))*38);
    dbz[x] = Math.round((Math.sin(x*((Math.PI*4)/population)))*38);
    dby[x] = -145+x*16;
} }

function plus() {
  center();
  for(x=0; x<3; x++){
    dbx[x]=100-(x*28); dby[x+3]=100-(x*28); dbz[x+6]=100-(x*28);
    dbx[x+9]=-100+(x*28); dby[x+12]=-100+(x*28); dbz[x+15]=-100+(x*28);
} }

function smile() {
  for (x=0; x<14; x++) {
    dbx[x] = Math.round((Math.cos(.04+x*((Math.PI*1.5)/population)))*120);
    dby[x] = Math.round((Math.sin(.04+x*((Math.PI*1.5)/population)))*120);
    dbz[x] = 0;
  }
  for (x=14; x<20; x+=2) {
    dbx[x]=-40;  dby[x]=-100+((x-13)*15); dbz[x]=0;
    dbx[x+1]=40; dby[x+1]=-100+((x-13)*15); dbz[x+1]=0;
} }

function draw() {
  for (x=0; x<population; x++) {
    document.getElementById('divball'+x).style.left = cbx[x]+((cbz[x]*cbx[x])/360)+ 180 + "px";
    document.getElementById('divball'+x).style.top = cby[x]+((cbz[x]*cby[x])/360)+ 130 + "px";
    document.getElementById('divball'+x).style.width = (cbz[x]/(Math.PI*4)) + 30 + "px";
    document.getElementById('divball'+x).style.height = (cbz[x]/(Math.PI*4)) + 30 + "px";
    document.getElementById('divball'+x).style.zIndex = Math.round((cbz[x]+1)*100);
    hisize = ((cbz[x]+55)/8); if(hisize>5){hisize=5}; if(hisize<0){hisize=0}
    document.getElementById('hilite'+x).style.boxShadow = (8+(cbz[x])/20)+"px "+(8+(cbz[x])/20)+"px 10px "+ hisize +"px rgba(255,255,255,.75)";
} }

function rotateX(vect,rad) {
  ty = cby[vect]; tz = cbz[vect];
  cby[vect] = ((ty * Math.cos(rad)) + (tz * Math.sin(rad)));
  cbz[vect] = ((ty * -Math.sin(rad)) + (tz * Math.cos(rad)));
}

function rotateY(vect,rad) {
  tx = cbx[vect]; tz = cbz[vect];
  cbx[vect] = (tx * Math.cos(rad)) + (tz * Math.sin(rad));
  cbz[vect] = (tx * -Math.sin(rad)) + (tz * Math.cos(rad));
}

function rotateZ(vect,rad) {
  tx = cbx[vect]; ty = cby[vect];
  cbx[vect] = (tx * Math.cos(rad)) + (ty * -Math.sin(rad));
  cby[vect] = (tx * Math.sin(rad)) + (ty * Math.cos(rad));
}

function morph(shape){
  speed=0;
  switch(shape){
    case 0: center();  break;
    case 1: circle();  break;
    case 2: spring();  break;
    case 3:    box();  break;
    case 4: square();  break;
    case 5:  smile();  break;
    case 6:   plus();  break;
  }
  for (b=0; b<population; b++) {
    if(cbx[b] != dbx[b]) {cbx[b] = cbx[b] + ((dbx[b]-cbx[b])*.17)}
    if(cby[b] != dby[b]) {cby[b] = cby[b] + ((dby[b]-cby[b])*.17)}
    if(cbz[b] != dbz[b]) {cbz[b] = cbz[b] + ((dbz[b]-cbz[b])*.17)}
} }

function changeColor() {
  do {
    red = Math.round(Math.random()*255);
    green = Math.round(Math.random()*255);
    blue = Math.round(Math.random()*255);
  } while( (red<180) & (green<180) & (blue<180) )
  newcolor = "rgb("+red+","+green+","+blue+")";
  for (x=0; x<population; x++)
    { document.getElementById('divball'+x).style.backgroundColor = newcolor; }
  red+=64; if(red>230){red=230}; if(red<180){red=180};
  green+=64; if(green>230){green=230}; if(green<180){green=180};
  blue+=64; if(blue>230){blue=230}; if(blue<180){blue=180};
  newcolor = "rgb("+red+","+green+","+blue+")";
  document.getElementById('box').style.backgroundColor = newcolor;
}

function boxloaded()
{
  document.getElementById('box').style.visibility="visible";
  setTimeout('timeline()',1250)
}

</script>
</body>
</html>
<!-- c0de the planet -->

NOTE: Some browsers, such as Internet Explorer. have a relatively slow rendering when it comes to certain things, like box-shadow styles. Google seems to handle this demo very nicely, while Internet Explorer doesn't give a very good performance.

EDIT: Made a few small tweaks.

realtime 3D vectorballs in CSS/JavaScript

c0dex10h

New Member

Attachments

Free Web Hosting

Our Community

Legal