// Create a Paper.js Path to draw a line into it:
var line = new Path();
line.style = {
    strokeColor: 'black',
    strokeWidth: 4
}

var start = new Point(300, 100);
// Move to start and draw a line from there
line.moveTo(start);
// Note the plus operator on Point objects.
line.lineTo(start + [200, -50]);

// if view is resized and then redrawn, pathCircle will recenter itself
var pathCircle = new Path.Circle({
    center: view.center,
    radius: 30,
    fillColor: new Color(0.9, 0.5, 0.5),
    strokeColor: 'red',
    strokeWidth: 10
});

// rounded rectangle
var rectOrigin = new Point(50, 140)
var rectHeight = 50
var rectWidth = 200
var rectEnd = new Point(rectOrigin.x + rectWidth, rectOrigin.y + rectHeight);
var rect = new Rectangle(rectOrigin, rectEnd);
var cornerSize = new Size(20, 20);
var roundRect = new Path.RoundRectangle(rect, cornerSize);
roundRect.style = {
    fillColor: 'orange',
    strokeColor: 'brown',
    strokeWidth: 6
};

// text
var text = new PointText({
    point: [rectOrigin.x + 20, (rectOrigin.y + rectHeight/2)],
    content: 'Hello text',
    fillColor: 'brown',
    fontSize: 25
});

@@ -546,113 +546,190 @@
 );%0A%0A
+%0A
 // 
-rounded rectangle%0Avar rectOrigin = new Point(50, 140)%0Avar rectHeight = 50%0Avar rectWidth = 200%0A
+Create player object with a name, rounded rectangle and text showing name.%0Afunction Player(name, origin, textColor)%0A%7B%0A    this.name = name;%0A%0A    // rounded rectangle%0A    
 var rect
 End 
@@ -728,78 +728,38 @@
 rect
-End
+Size
  = new 
-Point(rectOrigin.x + rectWidth, rectOrigin.y + rectHeight);%0A
+Size(200, 50);%0A    
 var 
@@ -779,21 +779,17 @@
 ctangle(
-rectO
+o
 rigin, r
@@ -795,14 +795,20 @@
 rect
-End);%0A
+Size);%0A%0A    
 var 
@@ -838,20 +838,25 @@
 0, 20);%0A
-var 
+    this.
 roundRec
@@ -902,16 +902,25 @@
 rSize);%0A
+    this.
 roundRec
@@ -927,24 +927,28 @@
 t.style = %7B%0A
+    
     fillColo
@@ -960,24 +960,28 @@
 range',%0A    
+  
+  
 strokeColor:
@@ -986,24 +986,28 @@
 r: 'brown',%0A
+    
     strokeWi
@@ -1017,24 +1017,103 @@
 : 6%0A
-%7D;%0A%0A// text%0Avar 
+    %7D;%0A%0A        //point: %5Bthis.position.x + 20, this.position.y + rectSize.height/2%5D,%0A    this.
 text
@@ -1135,24 +1135,28 @@
 t(%7B%0A    
+   
+ 
 point: %5B
 rectOrig
@@ -1147,21 +1147,17 @@
 point: %5B
-rectO
+o
 rigin.x 
@@ -1166,14 +1166,9 @@
 20, 
-(rectO
+o
 rigi
@@ -1181,24 +1181,32 @@
 rect
-H
+Size.h
 eight/2
-)
 %5D,%0A    
+   
+ 
 cont
@@ -1214,63 +1214,1188 @@
 nt: 
-'Hello text',%0A    fillColor: 'brown',%0A    fontSize: 25
+this.name,%0A        fillColor: textColor,%0A        fontSize: 25%0A    %7D);%0A%0A    //return new Group(%5Bthis.roundRect, this.text%5D);%0A%7D%0A%0A// must use new Point, not %5B50, 140%5D%0AplayerOrigin = new Point(50, 80);%0A//var playerA = Player(playerOrigin, 'blue');%0A//var playerA = new Player(playerOrigin, 'blue');%0Avar playerA = new Player('bill', playerOrigin, 'blue');%0A%0A// when playerA returns new Group and instantiate as = Player, set position works%0A// when playerA doesn't return group and instantiate as = new Player, set position doesn't work??%0A// for group or other 'item'?%0A//playerA.position = %5B300, 340%5D;%0A%0A// when playerA returns new Group and instantiate as = Player, set color doesn't work%0A// when playerA doesn't return new Group and instantiate as = new Player, set color works%0AplayerA.text.fillColor = 'red';%0A%0A%0A// Loop through array of players and draw them all.%0Avar playerNames = %5B'Bill', 'Joe', 'Fred', 'John'%5D;%0Avar offset = 60;%0Afor(var i = 0; i %3C playerNames.length; i++) %7B%0A    var player = new Player(playerNames%5Bi%5D, playerOrigin, 'blue');%0A    // TODO: translate as a Group or using a function%0A    player.roundRect.translate(0, offset * i);%0A    player.text.translate(0, offset * i);
 %0A%7D
-)
 ;%0A

Create player object with a name, rounded rectangle and text showing name. Loop through array of players and draw them all.