{
 "blyg": "0.4",
 "id": "2qzkhmwq4nrm8d6btvfjm6825b",
 "kind": "thread",
 "origin": "https://notionparallax.co.uk/",
 "page": "https://notionparallax.co.uk/2009/317",
 "author": {
  "name": "Ben Doherty",
  "url": "https://notionparallax.co.uk/"
 },
 "created": "2009-11-04T10:05:21Z",
 "updated": "2009-11-04T10:05:21Z",
 "version": 1,
 "content_md": "# processing workshop 1\n\n\n<p>Thanks to everyone who came to todays <a href=\"http://www.processing.org\">processing</a> session.</p>\n<p><a href=\"http://processing.org/learning/drawing/\"><img class=\"alignleft\" src=\"https://notionparallax.co.uk/assets/1.11.jpg\" alt=\"picture of a man made of shapes pinched from Daniel Shiffman's book\" width=\"200\" height=\"200\" /></a>The task I set was to make the dude that Daniel Shiffman draws in his example on the <a href=\"http://processing.org/learning/drawing/\"> learning processing page</a> stick to the mouse, and scale with the mouse's position.</p>\n<p>Not only that, but to do it in a readable way with minimal use of explicit values so that we can use it to make an object for agent simulations next week.</p>\n<p>This isn't easy, so use a lot of sketches, and diagrms on graph paper to help you. A programmers best tool is their brain, and then second best is a notebook!</p>\n<p>My example of one way to do it is after the fold. I don't expect you to solve this all on your own (but extra brownie points if you do) so go through my code and get a handle on it.</p>\n<p> </p>\n<p>This is an example of one way (there are many) that you could have written your code to allow for the dude to be drawn</p>\n<pre name=\"code\" class=\"java\">\nvoid setup()\n{\n  size(400,400);\n  rectMode(CENTER);\n}\nvoid draw()\n{\n  //redraw the background\n  background(255,255,255);\n  //expose some variables\n  int centreLineX = mouseX;\n  int bodyCentreY = mouseY;\n\n//**\\*\\*\\*\\***some internal variables****\\*\\*\\*****\nint headCentreY = bodyCentreY-30;\nint bodyHeight = 100;\nint bodyWidth = 20;\nint headSize = bodyWidth\\*3;\nint eyeWidth = (headSize/3)-2;\nint legSize = 20;\n\n//****\\*\\*****draw the dude******\\*\\*\\*******\n//body\nrect(centreLineX, //centroid X\nbodyCentreY, //centroid U\nbodyWidth,\nbodyHeight);\n//head\nellipse(centreLineX,\nheadCentreY,\nheadSize,\nheadSize);\n//left eye  \n ellipse(centreLineX-19,\nheadCentreY,\neyeWidth,\nheadSize/2);\n//right eye\nellipse(centreLineX+19,\nheadCentreY,\neyeWidth,\nheadSize/2);\n//left leg\nline(centreLineX - (bodyWidth/2), //startX\nbodyCentreY + (bodyHeight/2), //startY\ncentreLineX - (bodyWidth/2) - legSize, //endX\nbodyCentreY + (bodyHeight/2) + legSize);//endY\n//right leg  \n line(centreLineX + (bodyWidth/2),\nbodyCentreY + (bodyHeight/2),\ncentreLineX + (bodyWidth/2) + legSize,\nbodyCentreY + (bodyHeight/2) + legSize);  \n}\n\n</pre>\n<p>I've delibearly left out the scaling to keep the code readable in the version above. Here it is with the scaling involved.</p>\n<pre name=\"code\" class=\"java\">void setup()\n{\n  size(800,800);\n  rectMode(CENTER);\n}\nvoid draw()\n{\n  //redraw the background\n  background(255,255,255);\n  //expose some variables\n  int centreLineX = mouseX;\n  int bodyCentreY = mouseY;\n  /* This is the scaling part\n   * it is a bit tricky to figure out, but think about \n   * it as a diagram on some graph paper. The mouseX and \n   * mouseY numbers get extremetly large, not very far \n   * away from the origin, so they need to be scaled down \n   * a lot or our man becomes a tiny dot.\n   *\n   * The +1 is so that when mouseX or mouseY = 0 that we \n   * don't get a 'divide by zero' error*/\n  int scaleX = mouseX/100 + 1;\n  int scaleY = mouseY/100 + 1;\n  \n  //some internal variables  \n  int headCentreY = bodyCentreY - (30/scaleY);\n  int bodyHeight = 100;\n  int bodyWidth = 20;\n  int headSize = bodyWidth * 3;\n  int eyeWidth = (headSize/3)-2;\n  int legSize = 20;\n  \n  //draw the dude\n  //body\n  rect(centreLineX, //centroid X\n       bodyCentreY, //centroid U\n       bodyWidth / scaleX,\n       bodyHeight / scaleY);\n  //head\n  ellipse(centreLineX,\n          headCentreY,\n          headSize / scaleX,\n          headSize / scaleY);\n  //left eye        \n  ellipse(centreLineX - (19 / scaleX), \n          headCentreY, \n          eyeWidth / scaleX, \n          headSize / 2 / scaleY); \n  //right eye\n  ellipse(centreLineX + (19 / scaleX), \n          headCentreY, \n          eyeWidth / scaleX,\n          headSize / 2 / scaleY); \n  //left leg\n  line(centreLineX - (bodyWidth  / 2 / scaleX), //startX\n       bodyCentreY + (bodyHeight / 2 / scaleY), //startY\n       centreLineX - (bodyWidth  / 2 / scaleX) - legSize / scaleX,  //endX\n       bodyCentreY + (bodyHeight / 2 / scaleY) + legSize / scaleY);//endY\n  //right leg       \n  line(centreLineX + (bodyWidth  / 2 / scaleX), //startX\n       bodyCentreY + (bodyHeight / 2 / scaleY), //startY\n       centreLineX + (bodyWidth  / 2 / scaleX) + legSize / scaleX,  //endX\n       bodyCentreY + (bodyHeight / 2 / scaleY) + legSize / scaleY);//endY       \n}\n</pre>\n<p>If you've got this far, you've done **very** well as this is some tricky stuff!</p>\n",
 "content_html": "<h1>processing workshop 1</h1>\n<p>Thanks to everyone who came to todays <a href=\"http://www.processing.org\">processing</a> session.</p>\n<p><a href=\"http://processing.org/learning/drawing/\"><img class=\"alignleft\" src=\"https://notionparallax.co.uk/assets/1.11.jpg\" alt=\"picture of a man made of shapes pinched from Daniel Shiffman's book\" width=\"200\" height=\"200\" /></a>The task I set was to make the dude that Daniel Shiffman draws in his example on the <a href=\"http://processing.org/learning/drawing/\"> learning processing page</a> stick to the mouse, and scale with the mouse’s position.</p>\n<p>Not only that, but to do it in a readable way with minimal use of explicit values so that we can use it to make an object for agent simulations next week.</p>\n<p>This isn’t easy, so use a lot of sketches, and diagrms on graph paper to help you. A programmers best tool is their brain, and then second best is a notebook!</p>\n<p>My example of one way to do it is after the fold. I don’t expect you to solve this all on your own (but extra brownie points if you do) so go through my code and get a handle on it.</p>\n<p> </p>\n<p>This is an example of one way (there are many) that you could have written your code to allow for the dude to be drawn</p>\n<pre name=\"code\" class=\"java\">\nvoid setup()\n{\n  size(400,400);\n  rectMode(CENTER);\n}\nvoid draw()\n{\n  //redraw the background\n  background(255,255,255);\n  //expose some variables\n  int centreLineX = mouseX;\n  int bodyCentreY = mouseY;\n\n//**\\*\\*\\*\\***some internal variables****\\*\\*\\*****\nint headCentreY = bodyCentreY-30;\nint bodyHeight = 100;\nint bodyWidth = 20;\nint headSize = bodyWidth\\*3;\nint eyeWidth = (headSize/3)-2;\nint legSize = 20;\n\n//****\\*\\*****draw the dude******\\*\\*\\*******\n//body\nrect(centreLineX, //centroid X\nbodyCentreY, //centroid U\nbodyWidth,\nbodyHeight);\n//head\nellipse(centreLineX,\nheadCentreY,\nheadSize,\nheadSize);\n//left eye  \n ellipse(centreLineX-19,\nheadCentreY,\neyeWidth,\nheadSize/2);\n//right eye\nellipse(centreLineX+19,\nheadCentreY,\neyeWidth,\nheadSize/2);\n//left leg\nline(centreLineX - (bodyWidth/2), //startX\nbodyCentreY + (bodyHeight/2), //startY\ncentreLineX - (bodyWidth/2) - legSize, //endX\nbodyCentreY + (bodyHeight/2) + legSize);//endY\n//right leg  \n line(centreLineX + (bodyWidth/2),\nbodyCentreY + (bodyHeight/2),\ncentreLineX + (bodyWidth/2) + legSize,\nbodyCentreY + (bodyHeight/2) + legSize);  \n}\n\n</pre>\n<p>I’ve delibearly left out the scaling to keep the code readable in the version above. Here it is with the scaling involved.</p>\n<pre name=\"code\" class=\"java\">void setup()\n{\n  size(800,800);\n  rectMode(CENTER);\n}\nvoid draw()\n{\n  //redraw the background\n  background(255,255,255);\n  //expose some variables\n  int centreLineX = mouseX;\n  int bodyCentreY = mouseY;\n  /* This is the scaling part\n   * it is a bit tricky to figure out, but think about \n   * it as a diagram on some graph paper. The mouseX and \n   * mouseY numbers get extremetly large, not very far \n   * away from the origin, so they need to be scaled down \n   * a lot or our man becomes a tiny dot.\n   *\n   * The +1 is so that when mouseX or mouseY = 0 that we \n   * don't get a 'divide by zero' error*/\n  int scaleX = mouseX/100 + 1;\n  int scaleY = mouseY/100 + 1;\n  \n  //some internal variables  \n  int headCentreY = bodyCentreY - (30/scaleY);\n  int bodyHeight = 100;\n  int bodyWidth = 20;\n  int headSize = bodyWidth * 3;\n  int eyeWidth = (headSize/3)-2;\n  int legSize = 20;\n  \n  //draw the dude\n  //body\n  rect(centreLineX, //centroid X\n       bodyCentreY, //centroid U\n       bodyWidth / scaleX,\n       bodyHeight / scaleY);\n  //head\n  ellipse(centreLineX,\n          headCentreY,\n          headSize / scaleX,\n          headSize / scaleY);\n  //left eye        \n  ellipse(centreLineX - (19 / scaleX), \n          headCentreY, \n          eyeWidth / scaleX, \n          headSize / 2 / scaleY); \n  //right eye\n  ellipse(centreLineX + (19 / scaleX), \n          headCentreY, \n          eyeWidth / scaleX,\n          headSize / 2 / scaleY); \n  //left leg\n  line(centreLineX - (bodyWidth  / 2 / scaleX), //startX\n       bodyCentreY + (bodyHeight / 2 / scaleY), //startY\n       centreLineX - (bodyWidth  / 2 / scaleX) - legSize / scaleX,  //endX\n       bodyCentreY + (bodyHeight / 2 / scaleY) + legSize / scaleY);//endY\n  //right leg       \n  line(centreLineX + (bodyWidth  / 2 / scaleX), //startX\n       bodyCentreY + (bodyHeight / 2 / scaleY), //startY\n       centreLineX + (bodyWidth  / 2 / scaleX) + legSize / scaleX,  //endX\n       bodyCentreY + (bodyHeight / 2 / scaleY) + legSize / scaleY);//endY       \n}\n</pre>\n<p>If you’ve got this far, you’ve done <strong>very</strong> well as this is some tricky stuff!</p>\n",
 "content_hash": "sha256:ccd40db589a5a21f55dc1856fd0422c1d8b74d6470094fd20ec721b37d449d35",
 "media": [],
 "changelog": [
  {
   "version": 1,
   "at": "2009-11-04T10:05:21Z",
   "note": null
  }
 ],
 "transclusions": []
}