Creating Your Own Functions in p5.js

main.tour

{
  "$schema": "https://aka.ms/codetour-schema",
  "title": "Custom Functions",
  "steps": [
    {
      "file": "sketch.js",
      "selection": {
        "start": {
          "line": 27,
          "character": 1
        },
        "end": {
          "line": 59,
          "character": 2
        }
      },
      "description": "## Custom Functions: The Why\n\nThis is the `drawCoordinateSystem()` function. Before I defined it here, it didn't exist! The code inside the *function body* (i.e. the code between the `{` and `}`) was up in the `draw()` function before I moved it down here. It works the same in either location, so why go to the trouble of defining this new function? Well, I wanted the code in my `draw()` function to be a little easier to follow! Let's look.",
      "title": "Custom Functions: The Why (Part 1)",
      "contents": "let angle = 0;\n\nfunction setup() {\n  createCanvas(600, 600);\n  angleMode(DEGREES);\n}\n\nfunction draw() {\n  background(220);\n  // Add to my angle\n  angle = angle + 1;\n\n  // Call the function I created\n  drawCoordinateSystem();\n\n  circle(0, 0, 2);\n  \n  // Draw a line using the sin and cos functions to get it to rotate\n  // following the angle value\n  let currentSecond = second()*6 - 90;\n  let x = cos(currentSecond);\n  let y = sin(currentSecond);\n  line(0, 0, x, y);\n}\n\n// Defined a new function called \"drawCoordinateSystem\"\nfunction drawCoordinateSystem() {\n  // translate to the center and scale up to make\n  // a small coordinate system\n  translate(width/2, height/2);\n  scale(50);\n  strokeWeight(.05);\n  \n  line(0, -height/2, 0, height/2);\n  line(-width/2, 0, width/2, 0);\n\n  // Add hash marks and labels along the x-axis\n  textSize(.5);\n  for (let i = -5; i < 6; i++) {\n    line(i, -.5, i, .5);\n    text(i, i, .5);\n  }\n\n  for (i = 1; i < 6; i++) {\n    //line(-i, -1, -i, 1);\n    line(1, i, -1, i);\n    line(1, -i, -1, -i);\n    text(i, 1, -i);\n    //text(\"-\" + i, -i, 1);\n    text(\"-\" + i, -1, i);\n  }\n\n  // Create a nested for loop to draw a grid on the canvas \n  for (let i = -5; i < 6; i++) {\n    for (let j = -5; j < 6; j++) {\n      point(i, j);\n    }\n  }\n}"
    },
    {
      "file": "sketch.js",
      "selection": {
        "start": {
          "line": 13,
          "character": 1
        },
        "end": {
          "line": 14,
          "character": 26
        }
      },
      "description": "## Custom Functions: The Why (Part 2)\n\nBefore creating the `drawCoordinateSystem()` function, all the code that is now inside that function was right here. I could have added some fancy code comments to create some visual indicators of what this code was doing, but it's much easier to just read `drawCoordinateSystem()` and understand what that line of code is doing. This covers the first two out of my three reasons for creating your own function:\n\n1. You want to make your code more readable and easier to understand.\n2. You want to organize your code better by grouping related code into a single function.\n3. You find yourself writing the same code multiple times.\n\n",
      "contents": "let angle = 0;\n\nfunction setup() {\n  createCanvas(600, 600);\n  angleMode(DEGREES);\n}\n\nfunction draw() {\n  background(220);\n  // Add to my angle\n  angle = angle + 1;\n\n  // Call the function I created\n  drawCoordinateSystem();\n\n  circle(0, 0, 2);\n  \n  // Draw a line using the sin and cos functions to get it to rotate\n  // following the angle value\n  let currentSecond = second()*6 - 90;\n  let x = cos(currentSecond);\n  let y = sin(currentSecond);\n  line(0, 0, x, y);\n}\n\n// Defined a new function called \"drawCoordinateSystem\"\nfunction drawCoordinateSystem() {\n  // translate to the center and scale up to make\n  // a small coordinate system\n  translate(width/2, height/2);\n  scale(50);\n  strokeWeight(.05);\n  \n  line(0, -height/2, 0, height/2);\n  line(-width/2, 0, width/2, 0);\n\n  // Add hash marks and labels along the x-axis\n  textSize(.5);\n  for (let i = -5; i < 6; i++) {\n    line(i, -.5, i, .5);\n    text(i, i, .5);\n  }\n\n  for (i = 1; i < 6; i++) {\n    //line(-i, -1, -i, 1);\n    line(1, i, -1, i);\n    line(1, -i, -1, -i);\n    text(i, 1, -i);\n    //text(\"-\" + i, -i, 1);\n    text(\"-\" + i, -1, i);\n  }\n\n  // Create a nested for loop to draw a grid on the canvas \n  for (let i = -5; i < 6; i++) {\n    for (let j = -5; j < 6; j++) {\n      point(i, j);\n    }\n  }\n}"
    },
    {
      "file": "sketch.js",
      "selection": {
        "start": {
          "line": 1,
          "character": 4
        },
        "end": {
          "line": 1,
          "character": 40
        }
      },
      "description": "## Recipe for Custom Functions (Part 1)\n\nTo \"define\" a custom function, you need five things:\n\n1. The `function` keyword, followed by\n2. The function's name, followed by\n3. A pair of parentheses `()` (with function parameters inside, if you are using them—more on these in a future class), followed by:\n4. A pair of braces `{}` \n5. The function body (i.e. the code that you want to run when the function is \"called\")",
      "title": "Recipe for Custom Functions (Part 1)",
      "contents": "let angle = 0;\n\nfunction setup() {\n  createCanvas(600, 600);\n  angleMode(DEGREES);\n}\n\nfunction draw() {\n  background(220);\n  // Add to my angle\n  angle = angle + 1;\n\n  // Call the function I created\n  drawCoordinateSystem();\n\n  circle(0, 0, 2);\n  \n  // Draw a line using the sin and cos functions to get it to rotate\n  // following the angle value\n  let currentSecond = second()*6 - 90;\n  let x = cos(currentSecond);\n  let y = sin(currentSecond);\n  line(0, 0, x, y);\n}\n\n// Defined a new function called \"drawCoordinateSystem\"\nfunction drawCoordinateSystem() {\n  // translate to the center and scale up to make\n  // a small coordinate system\n  translate(width/2, height/2);\n  scale(50);\n  strokeWeight(.05);\n  \n  line(0, -height/2, 0, height/2);\n  line(-width/2, 0, width/2, 0);\n\n  // Add hash marks and labels along the x-axis\n  textSize(.5);\n  for (let i = -5; i < 6; i++) {\n    line(i, -.5, i, .5);\n    text(i, i, .5);\n  }\n\n  for (i = 1; i < 6; i++) {\n    //line(-i, -1, -i, 1);\n    line(1, i, -1, i);\n    line(1, -i, -1, -i);\n    text(i, 1, -i);\n    //text(\"-\" + i, -i, 1);\n    text(\"-\" + i, -1, i);\n  }\n\n  // Create a nested for loop to draw a grid on the canvas \n  for (let i = -5; i < 6; i++) {\n    for (let j = -5; j < 6; j++) {\n      point(i, j);\n    }\n  }\n}"
    },
    {
      "file": "sketch.js",
      "selection": {
        "start": {
          "line": 14,
          "character": 3
        },
        "end": {
          "line": 14,
          "character": 26
        }
      },
      "description": "## Recipe for Custom Functions (Part 2)\n\nThe last thing to do—the step that actually causes the code inside the \"function body\" to run—is to call the function. Like a magic spell, you just need to say (in this case, type) the function's name! If the function is expecting any arguments, you should include those too. \"Arguments\" are the values that you \"pass\" into functions like `circle`, `rect`, `color` and many others, and are separated by commas. Functions are not required to have these!",
      "contents": "let angle = 0;\n\nfunction setup() {\n  createCanvas(600, 600);\n  angleMode(DEGREES);\n}\n\nfunction draw() {\n  background(220);\n  // Add to my angle\n  angle = angle + 1;\n\n  // Call the function I created\n  drawCoordinateSystem();\n\n  circle(0, 0, 2);\n  \n  // Draw a line using the sin and cos functions to get it to rotate\n  // following the angle value\n  let currentSecond = second()*6 - 90;\n  let x = cos(currentSecond);\n  let y = sin(currentSecond);\n  line(0, 0, x, y);\n}\n\n// Defined a new function called \"drawCoordinateSystem\"\nfunction drawCoordinateSystem() {\n  // translate to the center and scale up to make\n  // a small coordinate system\n  translate(width/2, height/2);\n  scale(50);\n  strokeWeight(.05);\n  \n  line(0, -height/2, 0, height/2);\n  line(-width/2, 0, width/2, 0);\n\n  // Add hash marks and labels along the x-axis\n  textSize(.5);\n  for (let i = -5; i < 6; i++) {\n    line(i, -.5, i, .5);\n    text(i, i, .5);\n  }\n\n  for (i = 1; i < 6; i++) {\n    //line(-i, -1, -i, 1);\n    line(1, i, -1, i);\n    line(1, -i, -1, -i);\n    text(i, 1, -i);\n    //text(\"-\" + i, -i, 1);\n    text(\"-\" + i, -1, i);\n  }\n\n  // Create a nested for loop to draw a grid on the canvas \n  for (let i = -5; i < 6; i++) {\n    for (let j = -5; j < 6; j++) {\n      point(i, j);\n    }\n  }\n}"
    }
  ]
}