knorthfield · December 7, 2020 14:42
diff --git a/paper.html b/paper.html
 <!DOCTYPE html>
 <html>
 <head>
 	<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/paperjs/[email protected]/dist/paper-full.js"></script>
 	<script type="text/paperscript" canvas="myCanvas">
 	var background = new Path.Rectangle(view.bounds);
 	background.fillColor = 'white';
 	
 	var think = new Path.Circle(new Point(115, 120), 55);
 	think.strokeColor = '#B42371';
 	think.strokeWidth = '20';
 	think.blendMode = 'multiply';
 	
 	var feel = new Path.Circle(new Point(115, 120), 55);
 	feel.strokeColor = '#71CFEB';
 	feel.strokeWidth = '20';
 	feel.blendMode = 'multiply';
 	
 	var doo = new Path.Circle(new Point(115, 120), 55);
 	doo.strokeColor = '#FFC600';
 	doo.strokeWidth = '20';
 	doo.blendMode = 'multiply';
 	
 	
 	var khws = new Path.Circle(new Point(115, 120), 65);
 	khws.fillColor = '#28225C';
 	
 	
 	function randomPoint() {
 		return ( Point.random() * 70 ) + 80;
 	}
 	
 	var destination = randomPoint();
 	var destination2 = randomPoint();
 	var destination3 = randomPoint();
 	

 	function onFrame(event) {
 	
 	    var vector = destination - think.position;
 	    think.position += vector / 300;
 	    think.content = Math.round(vector.length);

 	    if (vector.length < 10) {
 	        destination = randomPoint();
 	    }
 	
 	    var vector2 = destination2 - feel.position;
 	    feel.position += vector2 / 300;
 	    feel.content = Math.round(vector2.length);

 	    if (vector2.length < 10) {
 	        destination2 = randomPoint();
 	    }
 	
 	    var vector3 = destination3 - doo.position;
 	    doo.position += vector3 / 300;
 	    doo.content = Math.round(vector3.length);

 	    if (vector3.length < 10) {
 	        destination3 = randomPoint();
 	    }
        
 	}
 	</script>
 </head>
 <body>

    <canvas id="myCanvas" width="245" height="245"></canvas>
    
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/paperjs/[email protected]/dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="myCanvas">
	var background = new Path.Rectangle(view.bounds);
	background.fillColor = 'white';

	var think = new Path.Circle(new Point(115, 120), 55);
	think.strokeColor = '#B42371';
	think.strokeWidth = '20';
	think.blendMode = 'multiply';

	var feel = new Path.Circle(new Point(115, 120), 55);
	feel.strokeColor = '#71CFEB';
	feel.strokeWidth = '20';
	feel.blendMode = 'multiply';

	var doo = new Path.Circle(new Point(115, 120), 55);
	doo.strokeColor = '#FFC600';
	doo.strokeWidth = '20';
	doo.blendMode = 'multiply';


	var khws = new Path.Circle(new Point(115, 120), 65);
	khws.fillColor = '#28225C';


	function randomPoint() {
	return ( Point.random() * 70 ) + 80;
	}

	var destination = randomPoint();
	var destination2 = randomPoint();
	var destination3 = randomPoint();


	function onFrame(event) {

	var vector = destination - think.position;
	think.position += vector / 300;
	think.content = Math.round(vector.length);

	if (vector.length < 10) {
	destination = randomPoint();
	}

	var vector2 = destination2 - feel.position;
	feel.position += vector2 / 300;
	feel.content = Math.round(vector2.length);

	if (vector2.length < 10) {
	destination2 = randomPoint();
	}

	var vector3 = destination3 - doo.position;
	doo.position += vector3 / 300;
	doo.content = Math.round(vector3.length);

	if (vector3.length < 10) {
	destination3 = randomPoint();
	}

	}
	</script>
	</head>
	<body>

	<canvas id="myCanvas" width="245" height="245"></canvas>

	</body>
	</html>