Exquisite Corpse in Paper.js

Before we start, please grab/duplicate our paper.js starter code folder to a folder called exquisite-corpse and open it in a text editor.

In script.js, copy in this starter code:

Exquisite Corpse starter code for script.js

1//Functions for each body part
2let drawHead = function(){
3  let group = new Group();
4  //Your code here :)
5  return group;
6};
7
8let drawShirt = function(){
9  let group = new Group();
10  //Your code here :)
11  return group;
12};
13
14let drawPants = function(){
15  let group = new Group();
16  //Your code here :)
17  return group;
18};
19
20let drawRightArm = function(){
21  let group = new Group();
22  //Your code here :)
23  return group;
24};
25
26let drawLeftArm = function(){
27  let group = new Group();
28  //Your code here :)
29  return group;
30};
31
32let drawRightFoot = function(){
33  let group = new Group();
34  //Your code here :)
35  return group;
36};
37
38let drawLeftFoot = function(){
39  let group = new Group();
40  //Your code here :)
41  return group;
42};
43
44//Draw the bounds for each section
45let head = new Path.Rectangle(50,0,50,50);
46let shirt = new Path.Rectangle(25,50,100,100);
47let pants = new Path.Rectangle(25,150,100,80);
48let rightArm = new Path.Rectangle(125,60,75,30);
49let leftArm = new Path.Rectangle(-50,60,75,30);
50let leftFoot = new Path.Rectangle(25,230,30,30);
51let rightFoot = new Path.Rectangle(95,230,30,30);
52
53//Add these boxes to a new group
54let guides = new Group();
55guides.children = [head,shirt,pants,rightArm,leftArm,leftFoot,rightFoot];
56//Fit the guides to the screen
57guides.fitBounds(view.bounds);
58//Make the group visible, if we need to!
59guides.set({strokeColor: "black"})
60
61let drawExquisiteCorpse = function(){
62  let headGroup = drawHead();
63  headGroup.fitBounds(head.bounds);
64  let shirtGroup = drawShirt();
65  shirtGroup.fitBounds(shirt.bounds);
66  let pantsGroup = drawPants();
67  pantsGroup.fitBounds(pants.bounds);
68  let rightArmGroup = drawRightArm();
69  rightArmGroup.fitBounds(rightArm.bounds);
70  let leftArmGroup = drawLeftArm();
71  leftArmGroup.fitBounds(leftArm.bounds);
72  let leftFootGroup = drawLeftFoot();
73  leftFootGroup.fitBounds(leftFoot.bounds);
74  let rightFootGroup = drawRightFoot();
75  rightFootGroup.fitBounds(rightFoot.bounds);
76}
77drawExquisiteCorpse();

Here is an example of how we could add a left shoe function:

Example body part

1let drawLeftFoot = function(){
2  let group = new Group();
3  //Create a "shoe" path to eventually be added to the group
4  let shoe = new Path.Ellipse(0,0,60,100);
5  //Added a pink fillColor to <code>shoe</code>
6  shoe.fillColor = "pink";
7  //Create a green path called lace to become our shoelaces!
8  let lace = new Path();
9  lace.strokeColor = "green";
10  lace.strokeWidth = 2;
11  //2 for loops: the first adds points alternating left and right.
12  for(var i=0;i<7;i++){
13    if(i%2 === 0){
14     lace.add(0,i*10);
15    } else {
16     lace.add(40,i*10);
17    }
18  }
19  //The second continues from the bottom, and goes back up,
20  //adding points on the right and left
21  for(var i=6;i>=0;i--){
22    if(i%2 === 1){
23     lace.add(0,i*10);
24    } else {
25     lace.add(40,i*10);
26    }
27  }
28  //Use the smooth function to round out the path a bit
29  lace.smooth();
30  //Place the shoelaces on top of the pink shoe
31  lace.position = [30,50];
32  //Add shoe and lace to group, because our function needs to return it
33  group.children = [shoe,lace];
34  //Rotate the everything 45 degrees
35  group.rotate(45);
36  //Fiiiinally, return the group!
37  return group;
38};
39