JS exercise 11 – Smiley revisited, in Paper.js

In this exercise, we will see how we can replicate our earlier JavaScript “paths” exercise of drawing a smiley using Paper.js. This will allow us to see the similarities and differences between both approaches. We also added a resize functionality. More info is available at the Paper.js tutorials “Getting Started” and “Paths“, and checking Paper.js Path reference is very useful. This is the code for the exercise:

<!DOCTYPE html>
<html>
<head>
	<title>Paper.js Paths</title>
	<script type="text/javascript" src="paper.js"></script>
	<script type="text/paperscript" canvas="myCanvas">
		//1. irregular triangle
		var myPath=new Path();
		myPath.strokeColor="red";
		myPath.fillColor="rgb(255,126,0)";
		myPath.moveTo(200,10);
		myPath.lineTo(300,50);
		myPath.lineTo(150,50);
		myPath.closePath();
		//2. circle
		var myCircle=new Path.Circle(view.center,100);
		myCircle.strokeColor="green";
		//3. arc
		var distance = 50;
		var start = new Point(view.center.x-distance,view.center.y);
		var through = new Point(view.center.x,view.center.y+distance);
		var to = new Point(view.center.x+distance,view.center.y);
		var mySmile = new Path.Arc(start,through,to);
		mySmile.strokeColor="blue";
		//4. rectangle
		var myRectangle = new Path.Rectangle(150, 40, 150, 50);
		myRectangle.fillColor="pink";
		myRectangle.fillColor.alpha = 0.5;
		//5. rectangle2
		var point1 = new Point(150,90);
		var point2 = new Point(300,130);
		var rect2 = new Path.Rectangle(point1,point2);
		rect2.fillColor="purple";
		//6. "wave"
		var myWave = new Path();
		myWave.moveTo(150,400);
		myWave.lineTo(200,350);
		myWave.lineTo(250,400);
		myWave.lineTo(300,450);
		myWave.lineTo(350,400);
		myWave.strokeColor="rgb(255,126,0)";
		myWave.smooth();
		myWave.simplify();
		//myWave.fullySelected=true;
		//Resize
		function onResize(event){
			myCircle.position=view.center;
			var smilePosition = new Point(view.center.x,view.center.y+distance/2);
			mySmile.position=smilePosition;
		}
	</script>
</head>
<body style="margin:0; overflow:hidden">
	<canvas id="myCanvas" resize></canvas>
</body>
</html>

Since we are using a library, we must first load it into the document, before we can start coding using that library. To load the library, we used the following code:

<script type="text/javascript" src="paper.js"></script>

The value of the src attribute is the URL where the library is located. We have stored this file in the same directory as our html file, so the URL is simply the file name: paper.js.

Next, we need to add another script tag, informing the browser that we will now write also using the library, (type=”text/paperscript”) and linking to the canvas (canvas=”myCanvas”).

<script type="text/paperscript" canvas="myCanvas">

We finish setting up the page by styling the body, eliminating any margins and overflow:

<body style="margin:0; overflow:hidden">

And also naming our canvas, and making it resizeable:

<canvas id="myCanvas" resize></canvas>

To create an irregular triangle, we will use a simple path object (to draw a regular triangle we could have used the Path.RegularPolygon method). First, we create a path that will contain the triangle, named “myPath”. Then, we define stroke and fill colors, using the strokeColor and fillColor properties:

var myPath=new Path();
myPath.strokeColor="red";
myPath.fillColor="rgb(255,126,0)";

We define an initial coordinate with the moveTo() method, and draw two lines with two lineTo() methods. The closePath() method closes the path (as the name implies), creating the third side of the triangle:

myPath.moveTo(200,10);
myPath.lineTo(300,50);
myPath.lineTo(150,50);
myPath.closePath();

To create a circle in the center of the canvas, we will use the view object, From Paperjs.org:

The View object wraps a canvas element and handles drawing and user interaction through mouse and keyboard for it. It offer means to scroll the view, find the currently visible bounds in project coordinates, or the center, both useful for constructing artwork that should appear centered on screen

view.center is a point, meaning it is a pair of x and y coordinates. A circle is defined by a center point (using a pair of numbers or a point object, as in this case) and a radius. The circle was colored green:

var myCircle=new Path.Circle(view.center,100);
myCircle.strokeColor="green";

Next we defined an arc, to draw the smile. To draw an arc we need 3 points:

  • from: Point — the starting point of the circular arc
  • through: Point — the point the arc passes through
  • to: Point — the end point of the arc

(from Paperjs.org)

We defined these points relatively to the view.center, by using a variable distance, and the arc was colored blue:

var distance = 50;
var start = new Point(view.center.x-distance,view.center.y);
var through = new Point(view.center.x,view.center.y+distance);
var to = new Point(view.center.x+distance,view.center.y);
var mySmile = new Path.Arc(start,through,to);
mySmile.strokeColor="blue";

We then created a onResize function that triggers the relocation of myCircle and mySmile when the document is resized, using the position property to move these paths:

function onResize(event){
	myCircle.position=view.center;
	mySmile.position=new Point(view.center.x,view.center.y+distance/2);
}

We then created a rectangle using a x,y,width,height structure. It’s important to note that the alpha channel (transparency) is not defined using an “RGBA” logic, but using a dedicated alpha property of the color:

var myRectangle = new Path.Rectangle(150, 40, 150, 50);
myRectangle.fillColor="pink";
myRectangle.fillColor.alpha = 0.5;

And another one using a “point A to point B” logic:

var point1 = new Point(150,90);
var point2 = new Point(300,130);
var rect2 = new Path.Rectangle(point1,point2);
rect2.fillColor="purple";

Next, we create a wave. There are many ways to do it, including the quadraticCurveTo we saw in JavaScript and bezier cubicCurveTo (check Paperjs.org path reference). But we choose to convert lines to curves, to exemplify the smooth() method. First we drew an orange ramp of lines going up, down, and back up:

var myWave = new Path();
myWave.moveTo(150,400);
myWave.lineTo(200,350);
myWave.lineTo(250,400);
myWave.lineTo(300,450);
myWave.lineTo(350,400);
myWave.strokeColor="rgb(255,126,0)";

Then we converted these lines to curves:

myWave.smooth();

And finally we simplify the curves, making them more symmetrical:

myWave.simplify();

We check if the simplification of the curves was well handled by observing the handles, using the fullySelected property, set to true (can be commented out if not needed):

myWave.fullySelected=true;

This is the resulting image:

Link to the exercise (requires Paper.js): http://mlab.taik.fi/mediacode/coursefiles/course_2011_10/11-paperjs_paths.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s