dai-shi/famous_circles3d_sample.html

## famous_circles3d_sample.html
<html>
<head>
  <title>famo.us circles 3d sample</title>
  <link type="text/css" href="//code.famo.us/famous/0.2.2/famous.css" rel="stylesheet" />
  <script type="text/javascript" src="//code.famo.us/lib/require.js"></script>
  <script type="text/javascript" src="//code.famo.us/famous/0.2.2/famous.js"></script>
  <script type="text/javascript">
require(['famous/core/Engine', 'famous/core/Surface', 'famous/core/Transform', 'famous/core/Modifier', 'famous/physics/PhysicsEngine', 'famous/physics/bodies/Circle', 'famous/physics/constraints/Distance', 'famous/physics/forces/Repulsion', 'famous/physics/forces/Drag'], function() {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');
  var Transform = require('famous/core/Transform');
  var Modifier = require('famous/core/Modifier');

  var PhysicsEngine = require('famous/physics/PhysicsEngine');
  var Circle = require('famous/physics/bodies/Circle');
  var Distance = require('famous/physics/constraints/Distance');
  var Repulsion = require('famous/physics/forces/Repulsion');
  var Drag = require('famous/physics/forces/Drag');

  var size = Math.min(window.innerHeight, window.innerWidth) * 0.4;
  var context = Engine.createContext();
  var physicsEngine = new PhysicsEngine();
  var distance = new Distance({anchor: [0, 0, 0], length: size});
  var repulsion = new Repulsion({strength: 1});
  var drag = new Drag({strength: 0.001});

  var circles = [];
  var createCircle = function() {
    var circle = new Circle({radius: 10});
    circle.setPosition([Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5]);
    physicsEngine.addBody(circle);
    physicsEngine.attach(distance, circle);
    physicsEngine.attach(drag, circle);
    physicsEngine.attach(repulsion, circles, circle);
    circles.push(circle);
    var surface = new Surface ({
      size: [20, 20],
      properties: {
        backgroundColor: 'lightblue',
        border: '1px solid blue',
        borderRadius: '10px'
      }
    });

    var modifier = new Modifier({
      origin: [0.5, 0.5]
    });
    context.add(modifier).add(surface);
    Engine.on('prerender', function() {
      var now = Date.now();
      var m1 = Transform.rotateY(0.001 * now);
      var m2 = Transform.rotateY(-0.001 * now);
      var m = circle.getTransform();
      m = Transform.multiply4x4(m, m2);
      m = Transform.multiply4x4(m1, m);
      modifier.setTransform(m);
    });
  };

  for (var i = 0; i < 80; i++) {
    createCircle();
  }

});
  </script>
</head>
<body></body>
</html>
	<html>
	<head>
	<title>famo.us circles 3d sample</title>
	<link type="text/css" href="//code.famo.us/famous/0.2.2/famous.css" rel="stylesheet" />
	<script type="text/javascript" src="//code.famo.us/lib/require.js"></script>
	<script type="text/javascript" src="//code.famo.us/famous/0.2.2/famous.js"></script>
	<script type="text/javascript">
	require(['famous/core/Engine', 'famous/core/Surface', 'famous/core/Transform', 'famous/core/Modifier', 'famous/physics/PhysicsEngine', 'famous/physics/bodies/Circle', 'famous/physics/constraints/Distance', 'famous/physics/forces/Repulsion', 'famous/physics/forces/Drag'], function() {
	var Engine = require('famous/core/Engine');
	var Surface = require('famous/core/Surface');
	var Transform = require('famous/core/Transform');
	var Modifier = require('famous/core/Modifier');

	var PhysicsEngine = require('famous/physics/PhysicsEngine');
	var Circle = require('famous/physics/bodies/Circle');
	var Distance = require('famous/physics/constraints/Distance');
	var Repulsion = require('famous/physics/forces/Repulsion');
	var Drag = require('famous/physics/forces/Drag');

	var size = Math.min(window.innerHeight, window.innerWidth) * 0.4;
	var context = Engine.createContext();
	var physicsEngine = new PhysicsEngine();
	var distance = new Distance({anchor: [0, 0, 0], length: size});
	var repulsion = new Repulsion({strength: 1});
	var drag = new Drag({strength: 0.001});

	var circles = [];
	var createCircle = function() {
	var circle = new Circle({radius: 10});
	circle.setPosition([Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5]);
	physicsEngine.addBody(circle);
	physicsEngine.attach(distance, circle);
	physicsEngine.attach(drag, circle);
	physicsEngine.attach(repulsion, circles, circle);
	circles.push(circle);
	var surface = new Surface ({
	size: [20, 20],
	properties: {
	backgroundColor: 'lightblue',
	border: '1px solid blue',
	borderRadius: '10px'
	}
	});

	var modifier = new Modifier({
	origin: [0.5, 0.5]
	});
	context.add(modifier).add(surface);
	Engine.on('prerender', function() {
	var now = Date.now();
	var m1 = Transform.rotateY(0.001 * now);
	var m2 = Transform.rotateY(-0.001 * now);
	var m = circle.getTransform();
	m = Transform.multiply4x4(m, m2);
	m = Transform.multiply4x4(m1, m);
	modifier.setTransform(m);
	});
	};

	for (var i = 0; i < 80; i++) {
	createCircle();
	}

	});
	</script>
	</head>
	<body></body>
	</html>