/jsbin.poqimumu.html

## jsbin.poqimumu.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://seenjs.io/dist/latest/seen.min.js"></script>
</head>
<body>
  <svg id="seen-canvas" width="400" height="400">
    <radialGradient id="sphere-gradient">
      <stop offset="70%" stop-color="#fff"/>
      <stop offset="100%" stop-color="#ddd"/>
    </radialGradient>
    <mask id="mask"><g id="mask-canvas"></g></mask>
    <g id="inner-canvas" mask="url(#mask)"></g>
  </svg>
</body>
</html>

## jsbin.poqimumu.js
var dragger, height, shape, width;

width = 400;

height = 400;


function inner() {
  model = new seen.Model()

  model.add(seen.Lights.directional({
    normal: seen.P(0, -200, 0).normalize(),
    intensity: 0.01
  }))

  var black = new seen.Material(seen.Colors.rgb(30, 30, 30))
  var white = new seen.Material(seen.Colors.rgb(255, 255, 255), {shader: seen.Shaders.flat()})

  c = 5
  m = 275 / c
  for (var x = -c; x < c; x++) {
  for (var y = -c; y < c; y++) {
    shape = seen.Shapes.cube()
      .scale(2 + Math.random() * 30)
      .roty(Math.PI / 4)
      .rotx(-Math.PI / 8)
      .translate(x * m, y * m, Math.random() * 400 - 200)
    shape.fill(black);
    shape.eachSurface(function(s) {
      s.stroke = white
      s['stroke-width'] = 1.2
    })
    model.add(shape)
  }
  }

  var scene = new seen.Scene({
    model: model,
    viewport: seen.Viewports.center(width, height),
    fractionalPoints: true,
    shader: seen.Shaders.diffuse()
  });

  scene.camera.translate(20, 0)

  var context = seen.Context('inner-canvas', scene).render();


  /*context.animate().onBefore(function(t, dt) {
    return scene.camera.rotx(dt * 1e-4).roty(0.7 * dt * 1e-4);
  }).start();*/
  /*setInterval(function() {
    scene.camera.rotx(.001).roty(.001)
    context.render()
  }, 1000/20)*/

  return {c: context, s: scene}
}

function clip() {
  function CirclePainter() {}
  CirclePainter.prototype.paint = function(renderModel, context) {
    var grd, p, painter, radius, scale, unit;
    unit = seen.Points.X().transform(renderModel.transform);
    scale = Math.sqrt(unit.dot(unit));
    radius = scale * renderModel.surface.radius;
    p = renderModel.projected.points[0];
    painter = context.circle();
    painter.circle(p, radius).fill({
      fill: 'url(#sphere-gradient)'
    });
  };

  circlePainter = new CirclePainter()


  model = new seen.Model()

  function makeSphere(r, x, y, z) {
    surface = new seen.Surface([seen.P(x, y, z)], circlePainter)
    surface.fill       = new seen.Material(seen.Colors.rgb(255, 255, 255))
    surface.radius     = r
    var shape = new seen.Shape('body', [surface])
    model.add(shape)
  }

  var size = 50
  var dist = 100;
  makeSphere(size, 0, 0, 0)
  for (var step = 1; step <= 6; step++) {
    var a = 2 * Math.PI / (6 / step)
    makeSphere(size, dist * Math.cos(a), dist * Math.sin(a), 0)
  }

  var scene = new seen.Scene({
    model: model,
    cullBackfaces: false,
    viewport: seen.Viewports.center(width, height),
    fractionalPoints: true,
    shader: seen.Shaders.flat()
  });

  var context = seen.Context('mask-canvas', scene).render();

  /*setInterval(function() {
    scene.camera.roty(.005)
    context.render()
  }, 1000/30)*/
  return {c: context, s: scene}
}

var c1 = inner()
var c2 = clip()

var s = 1000/30
function frame() {
  c2.s.camera.roty(1 / s);
  c2.c.render()
  c1.s.camera.roty(.1 / s);
  c1.c.render()
  s = s * 1.005
  setTimeout(frame, s)
}
frame()
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="http://seenjs.io/dist/latest/seen.min.js"></script>
	</head>
	<body>
	<svg id="seen-canvas" width="400" height="400">
	<radialGradient id="sphere-gradient">
	<stop offset="70%" stop-color="#fff"/>
	<stop offset="100%" stop-color="#ddd"/>
	</radialGradient>
	<mask id="mask"><g id="mask-canvas"></g></mask>
	<g id="inner-canvas" mask="url(#mask)"></g>
	</svg>
	</body>
	</html>
	var dragger, height, shape, width;

	width = 400;

	height = 400;


	function inner() {
	model = new seen.Model()

	model.add(seen.Lights.directional({
	normal: seen.P(0, -200, 0).normalize(),
	intensity: 0.01
	}))

	var black = new seen.Material(seen.Colors.rgb(30, 30, 30))
	var white = new seen.Material(seen.Colors.rgb(255, 255, 255), {shader: seen.Shaders.flat()})

	c = 5
	m = 275 / c
	for (var x = -c; x < c; x++) {
	for (var y = -c; y < c; y++) {
	shape = seen.Shapes.cube()
	.scale(2 + Math.random() * 30)
	.roty(Math.PI / 4)
	.rotx(-Math.PI / 8)
	.translate(x * m, y * m, Math.random() * 400 - 200)
	shape.fill(black);
	shape.eachSurface(function(s) {
	s.stroke = white
	s['stroke-width'] = 1.2
	})
	model.add(shape)
	}
	}

	var scene = new seen.Scene({
	model: model,
	viewport: seen.Viewports.center(width, height),
	fractionalPoints: true,
	shader: seen.Shaders.diffuse()
	});

	scene.camera.translate(20, 0)

	var context = seen.Context('inner-canvas', scene).render();


	/*context.animate().onBefore(function(t, dt) {
	return scene.camera.rotx(dt * 1e-4).roty(0.7 * dt * 1e-4);
	}).start();*/
	/*setInterval(function() {
	scene.camera.rotx(.001).roty(.001)
	context.render()
	}, 1000/20)*/

	return {c: context, s: scene}
	}

	function clip() {
	function CirclePainter() {}
	CirclePainter.prototype.paint = function(renderModel, context) {
	var grd, p, painter, radius, scale, unit;
	unit = seen.Points.X().transform(renderModel.transform);
	scale = Math.sqrt(unit.dot(unit));
	radius = scale * renderModel.surface.radius;
	p = renderModel.projected.points[0];
	painter = context.circle();
	painter.circle(p, radius).fill({
	fill: 'url(#sphere-gradient)'
	});
	};

	circlePainter = new CirclePainter()


	model = new seen.Model()

	function makeSphere(r, x, y, z) {
	surface = new seen.Surface([seen.P(x, y, z)], circlePainter)
	surface.fill = new seen.Material(seen.Colors.rgb(255, 255, 255))
	surface.radius = r
	var shape = new seen.Shape('body', [surface])
	model.add(shape)
	}

	var size = 50
	var dist = 100;
	makeSphere(size, 0, 0, 0)
	for (var step = 1; step <= 6; step++) {
	var a = 2 * Math.PI / (6 / step)
	makeSphere(size, dist * Math.cos(a), dist * Math.sin(a), 0)
	}

	var scene = new seen.Scene({
	model: model,
	cullBackfaces: false,
	viewport: seen.Viewports.center(width, height),
	fractionalPoints: true,
	shader: seen.Shaders.flat()
	});

	var context = seen.Context('mask-canvas', scene).render();

	/*setInterval(function() {
	scene.camera.roty(.005)
	context.render()
	}, 1000/30)*/
	return {c: context, s: scene}
	}

	var c1 = inner()
	var c2 = clip()

	var s = 1000/30
	function frame() {
	c2.s.camera.roty(1 / s);
	c2.c.render()
	c1.s.camera.roty(.1 / s);
	c1.c.render()
	s = s * 1.005
	setTimeout(frame, s)
	}
	frame()