automata · August 13, 2012 13:41
diff --git a/paperjs.html b/paperjs.html
 <!-- be free to share this URL with others and hack this
     code together!                                       -->

 <!-- place this URL as a module at http://meemoo.org/iframework
     and have this page as a Meemoo module!               -->

 <!DOCTYPE html>

 <html>
  <head>
    <meta charset="utf-8">
    <title> paperjs example </title>
 		<script type="text/javascript" 
      src="http://paperjs.org/static/js/paper.js"></script>
 		<script type="text/javascript" 
      src="http://meemoo.org/meemoo/v1/meemoo-min.js"></script>
  </head>
  
  <body>
 
 		<canvas resize="true" id="canvas-1"></canvas> 

 		<script type="text/javascript">

  		Meemoo
    	.setInfo({
      	title: "paperjsexample",
      	author: "automata",
      	description: "original paperjs code from paperjs.org"
    	})
    	.addInputs({})
    	.addOutputs({
      	seg1: { type: 'float' },
      	seg2: { type: 'float' },
      	seg3: { type: 'float' },
      	seg4: { type: 'float' },
      	seg5: { type: 'float' },
      	seg6: { type: 'float' }
    	});
 		</script>

 <script type="text/paperscript" canvas="canvas-1">
 var width, height, center;
 var points = 6;
 var smooth = true;
 var path = new Path();
 var mousePos = view.center / 2;
 var pathHeight = mousePos.y;
 path.fillColor = 'black';
 initializePath();

 function initializePath() {
    center = view.center;
    width = view.size.width;
    height = view.size.height / 2;
    path.segments = [];
    path.add(view.bounds.bottomLeft);
    for (var i = 1; i < points; i++) {
        var point = new Point(width / points * i, center.y);
        path.add(point);
    }
    path.add(view.bounds.bottomRight);
    path.fullySelected = true;
 }

 function onFrame(event) {
    pathHeight += (center.y - mousePos.y - pathHeight) / 10;
    for (var i = 1; i < points; i++) {
        var sinSeed = event.count + (i + i % 10) * 100;
        var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
        var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
        path.segments[i].point.y = yPos;
        //  here we send segment's position to an Meemoo output 
        Meemoo.send('seg' + i, yPos); 
    }
    if (smooth)
        path.smooth();
 }

 function onMouseMove(event) {
    mousePos = event.point;
 }

 function onMouseDown(event) {
    smooth = !smooth;
    if (!smooth) {
        // If smooth has been turned off, we need to reset
        // the handles of the path:
        for (var i = 0, l = path.segments.length; i < l; i++) {
            var segment = path.segments[i];
            segment.handleIn = segment.handleOut = null;
        }
    }
 }

 // Reposition the path whenever the window is resized:
 function onResize(event) {
    initializePath();
 }
 </script>
    
  </body>
 </html>
	<!-- be free to share this URL with others and hack this
	code together! -->

	<!-- place this URL as a module at http://meemoo.org/iframework
	and have this page as a Meemoo module! -->

	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<title> paperjs example </title>
	<script type="text/javascript"
	src="http://paperjs.org/static/js/paper.js"></script>
	<script type="text/javascript"
	src="http://meemoo.org/meemoo/v1/meemoo-min.js"></script>
	</head>

	<body>

	<canvas resize="true" id="canvas-1"></canvas>

	<script type="text/javascript">

	Meemoo
	.setInfo({
	title: "paperjsexample",
	author: "automata",
	description: "original paperjs code from paperjs.org"
	})
	.addInputs({})
	.addOutputs({
	seg1: { type: 'float' },
	seg2: { type: 'float' },
	seg3: { type: 'float' },
	seg4: { type: 'float' },
	seg5: { type: 'float' },
	seg6: { type: 'float' }
	});
	</script>

	<script type="text/paperscript" canvas="canvas-1">
	var width, height, center;
	var points = 6;
	var smooth = true;
	var path = new Path();
	var mousePos = view.center / 2;
	var pathHeight = mousePos.y;
	path.fillColor = 'black';
	initializePath();

	function initializePath() {
	center = view.center;
	width = view.size.width;
	height = view.size.height / 2;
	path.segments = [];
	path.add(view.bounds.bottomLeft);
	for (var i = 1; i < points; i++) {
	var point = new Point(width / points * i, center.y);
	path.add(point);
	}
	path.add(view.bounds.bottomRight);
	path.fullySelected = true;
	}

	function onFrame(event) {
	pathHeight += (center.y - mousePos.y - pathHeight) / 10;
	for (var i = 1; i < points; i++) {
	var sinSeed = event.count + (i + i % 10) * 100;
	var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
	var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
	path.segments[i].point.y = yPos;
	// here we send segment's position to an Meemoo output
	Meemoo.send('seg' + i, yPos);
	}
	if (smooth)
	path.smooth();
	}

	function onMouseMove(event) {
	mousePos = event.point;
	}

	function onMouseDown(event) {
	smooth = !smooth;
	if (!smooth) {
	// If smooth has been turned off, we need to reset
	// the handles of the path:
	for (var i = 0, l = path.segments.length; i < l; i++) {
	var segment = path.segments[i];
	segment.handleIn = segment.handleOut = null;
	}
	}
	}

	// Reposition the path whenever the window is resized:
	function onResize(event) {
	initializePath();
	}
	</script>

	</body>
	</html>