+ * // Click the canvas to begin detecting key presses.
*
- * With a 'while loop', the code inside of the loop body (between the curly
- * braces) is run repeatedly until the test condition (inside of the parenthesis)
- * evaluates to false. The condition is tested before executing the code body
- * with
, so if the condition is initially false
- * the loop body, or statement, will never execute.
+ * // Create a Boolean variable.
+ * let isPlaying = false;
*
- * As with any loop, it is important to ensure that the loop can 'exit', or that
- * the test condition will eventually evaluate to false. This is to keep your loop
- * from trying to run an infinite amount of times, which can crash your browser.
+ * function setup() {
+ * createCanvas(100, 100);
*
- * From
:
- * The while statement creates a loop that executes a specified statement as long
- * as the test condition evaluates to true.The condition is evaluated before
- * executing the statement.
+ * describe(
+ * 'The message "Begin?\nY or N" written in green on a black background. The message "Good luck!" appears when they press the "y" key.'
+ * );
+ * }
*
- * @property while
+ * function draw() {
+ * background(0);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textFont('Courier New');
+ * textSize(16);
+ * fill(0, 255, 0);
+ *
+ * // Display a different message when the user begins playing.
+ * if (isPlaying === false) {
+ * text('Begin?', 50, 40);
+ * text('Y or N', 50, 60);
+ * } else {
+ * text('Good luck!', 50, 50);
+ * }
+ * }
*
- * @example
- *
- *
- * @alt
- * This example does not render anything
+ *
*/
/**
- * From
:
- * The JSON.stringify() method converts a JavaScript object or value to a JSON
.
- * @method stringify
- * @static
- * @for JSON
- * @param {Object} object :Javascript object that you would like to convert to JSON
+ * A sequence of text characters.
+ *
+ * The `String` data type is helpful for working with text. For example, a
+ * string could contain a welcome message:
*
- * @example
- *
*
- * let myObject = { x: 5, y: 6 };
- * let myObjectAsString = JSON.stringify(myObject);
- * console.log(myObjectAsString); // prints "{"x":5,"y":6}" to the console
- * console.log(typeof myObjectAsString); // prints 'string' to the console
+ * // Use a string literal.
+ * text('hello!', 10, 10);
+ *
+ *
+ *
+ * // Create a string variable.
+ * let message = 'hello!';
+ *
+ * // Use the string variable.
+ * text(message, 10, 10);
+ *
+ *
+ * The most common way to create strings is to use some form of quotations as
+ * follows:
+ *
+ *
+ * text("hi", 50, 50);
+ *
+ *
+ *
+ * text('hi', 50, 50);
+ *
+ *
+ *
+ * text(`hi`, 50, 50);
+ *
+ *
+ * `"hi"`, `'hi'`, and ``hi`` are all string literals. A "literal" means a
+ * value was actually written, as in `text('hi', 50, 50)`. By contrast,
+ * `text(message, 50, 50)` uses the variable `message`, so it isn't a string
+ * literal.
+ *
+ * Single quotes `''` and double quotes `""` mean the same thing. It's nice to
+ * have the option for cases when a string contains one type of quote:
+ *
+ *
+ * text("What's up?", 50, 50);
+ *
+ *
+ *
+ * text('Air quotes make you look "cool."', 50, 50);
+ *
+ *
+ * Backticks ```` create template literals. Template literals have many uses.
+ * For example, they can contain both single and double quotes as needed:
+ *
+ *
+ * text(`"Don't you forget about me"`, 10, 10);
+ *
+ *
+ * Template literals are helpful when strings are created from variables like
+ * so:
+ *
+ *
+ * let size = random(10, 20);
+ * circle(50, 50, size);
+ *
+ * text(`The circle's diameter is ${size} pixels.`, 10, 10);
+ *
+ *
+ * The `size` variable's value will replace `${size}` when the string is
+ * created. `${}` is a placeholder for any value. That means an expression can
+ * be used, as in `${round(PI, 3)}`. All of the following are valid template
+ * literals:
+ *
+ *
+ * text(`π is about ${round(PI, 2)} pixels.`, 10, 10);
+ * text(`It's ${mouseX < width / 2} that I'm on the left half of the canvas.`, 10, 30);
+ *
+ *
+ * Template literals can include several variables:
+ *
+ *
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * let size = random(10, 20);
+ * circle(x, y, size);
+ *
+ * text(`The circle at (${x}, ${y}) has a diameter of ${size} pixels.`, 10, 10);
+ *
+ *
+ * Template literals are also helpful for creating multi-line text like so:
+ *
+ *
+ * let poem = `My sketch doesn't run;
+ * it waits for me patiently
+ * while bugs point the way.`;
+ *
+ * text(poem, 10, 10);
+ *
+ *
+ * @property String
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(20);
+ *
+ * // Display a welcome message.
+ * text('hello!', 50, 50);
+ *
+ * describe('A gray square with the text "hello!" written at the center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(20);
+ *
+ * // Create a string variable.
+ * let world = '🌍';
+ *
+ * // Display a welcome message using a template string.
+ * text(`hello! ${world}`, 50, 50);
+ *
+ * describe('A gray square with the text "hello! 🌍" written at the center.');
+ * }
+ *
+ *
+ */
+
+/**
+ * A number that can be positive, negative, or zero.
+ *
+ * The `Number` data type is useful for describing values such as position,
+ * size, and color. A number can be an integer such as 20 or a decimal number
+ * such as 12.34. For example, a circle's position and size can be described
+ * by three numbers:
+ *
+ *
+ * circle(50, 50, 20);
+ *
+ *
+ *
+ * circle(50, 50, 12.34);
+ *
+ *
+ * Numbers support basic arithmetic and follow the standard order of
+ * operations: Parentheses, Exponents, Multiplication, Division, Addition,
+ * and Subtraction (PEMDAS). For example, it's common to use arithmetic
+ * operators with p5.js' system variables that are numbers:
+ *
+ *
+ * // Draw a circle at the center.
+ * circle(width / 2, height / 2, 20);
+ *
+ *
+ *
+ * // Draw a circle that moves from left to right.
+ * circle(frameCount * 0.01, 50, 20);
+ *
+ *
+ * Here's a quick overview of the arithmetic operators:
+ *
+ *
+ * 1 + 2 // Add
+ * 1 - 2 // Subtract
+ * 1 * 2 // Multiply
+ * 1 / 2 // Divide
+ * 1 % 2 // Remainder
+ * 1 ** 2 // Exponentiate
+ *
+ *
+ * It's common to update a number variable using arithmetic. For example, an
+ * object's location can be updated like so:
+ *
+ *
+ * x = x + 1;
+ *
+ *
+ * The statement above adds 1 to a variable `x` using the `+` operator. The
+ * addition assignment operator `+=` expresses the same idea:
+ *
+ *
+ * x += 1;
+ *
+ *
+ * Here's a quick overview of the assignment operators:
+ *
+ *
+ * x += 2 // Addition assignment
+ * x -= 2 // Subtraction assignment
+ * x *= 2 // Multiplication assignment
+ * x /= 2 // Division assignment
+ * x %= 2 // Remainder assignment
+ *
+ *
+ * Numbers can be compared using the
+ *
relational operators
+ * `>`, `<`, `>=`, `<=`, `===`, and `!==`. For example, a sketch's
+ *
frameCount can be used as a timer:
+ *
+ *
+ * if (frameCount > 1000) {
+ * text('Game over!', 50, 50);
+ * }
+ *
+ *
+ * An expression such as `frameCount > 1000` evaluates to a `Boolean` value
+ * that's either `true` or `false`. The relational operators all produce
+ * `Boolean` values:
+ *
+ *
+ * 2 > 1 // true
+ * 2 < 1 // false
+ * 2 >= 2 // true
+ * 2 <= 2 // true
+ * 2 === 2 // true
+ * 2 !== 2 // false
+ *
+ *
+ * See
Boolean for more information about comparisons and conditions.
+ *
+ * Note: There are also `==` and `!=` operators with one fewer `=`. Don't use them.
+ *
+ * Expressions with numbers can also produce special values when something
+ * goes wrong:
+ *
+ *
+ * sqrt(-1) // NaN
+ * 1 / 0 // Infinity
+ *
+ *
+ * The value `NaN` stands for
+ *
Not-A-Number.
+ * `NaN` appears when calculations or conversions don't work. `Infinity` is a
+ * value that's larger than any number. It appears during certain
+ * calculations.
+ *
+ * @property Number
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * background(200);
+ *
+ * // Draw a circle at the center.
+ * circle(50, 50, 70);
+ *
+ * // Draw a smaller circle at the center.
+ * circle(width / 2, height / 2, 30);
+ *
+ * describe('A gray square with two concentric white circles drawn at its center.');
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A white circle travels from left to right on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * circle(frameCount * 0.01, 50, 20);
+ * }
+ *
+ *
+ */
+
+/**
+ * A container for data that's stored as key-value pairs.
+ *
+ * Objects help to organize related data of any type, including other objects.
+ * A value stored in an object can be accessed by name, called its key. Each
+ * key-value pair is called a "property." Objects are similar to dictionaries
+ * in Python and maps in Java and Ruby.
+ *
+ * For example, an object could contain the location, size, and appearance of
+ * a dog:
+ *
+ *
+ * // Declare the dog variable and assign it an object.
+ * let dog = { x: 50, y: 50, size: 20, emoji: '🐶' };
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(dog.size);
+ *
+ * // Draw the dog.
+ * text(dog.emoji, dog.x, dog.y);
+ *
+ *
+ * The variable `dog` is assigned an object with four properties. Objects
+ * are declared with curly braces `{}`. Values can be accessed using the dot
+ * operator, as in `dog.size`. In the example above, the key `size`
+ * corresponds to the value `20`. Objects can also be empty to start:
+ *
+ *
+ * // Declare a cat variable and assign it an empty object.
+ * let cat = {};
+ *
+ * // Add properties to the object.
+ * cat.x = 50;
+ * cat.y = 50;
+ * cat.size = 20;
+ * cat.emoji = '🐱';
+ *
+ * // Style the text.
+ * textAlign(CENTER, CENTER);
+ * textSize(cat.size);
+ *
+ * // Draw the cat.
+ * text(cat.emoji, cat.x, cat.y);
+ *
+ *
+ * An object's data can be updated while a sketch runs. For example, the `cat`
+ * could run away from the `dog` by updating its location:
+ *
+ *
+ * // Run to the right.
+ * cat.x += 5;
+ *
+ *
+ * If needed, an object's values can be accessed using square brackets `[]`
+ * and strings instead of dot notation:
+ *
+ *
+ * // Run to the right.
+ * cat["x"] += 5;
+ *
+ *
+ * This syntax can be helpful when the key's name has spaces, as in
+ * `cat['height (m)']`.
+ *
+ * @property Object
+ *
+ * @example
+ *
+ *
+ * // Declare the variable data and assign it an object with three properties.
+ * let data = { x: 50, y: 50, d: 20 };
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with a white circle drawn at its center.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the object's values using the . operator.
+ * circle(data.x, data.y, data.d);
+ * }
+ *
+ *
+ *
+ *
+ * // Declare the variable data and assign it an object with three properties.
+ * let data = { x: 50, y: 50, d: 20 };
+ *
+ * // Add another property for color.
+ * data.color = 'deeppink';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with a pink circle drawn at its center.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the object's values using the . operator.
+ * fill(data.color);
+ * circle(data.x, data.y, data.d);
+ * }
+ *
+ *
+ *
+ *
+ * // Declare the variable data and assign it an object with three properties.
+ * let data = { x: 50, y: 50, d: 20 };
+ *
+ * // Add another property for color.
+ * data.color = 'deeppink';
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with a white circle drawn at its center.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the object's values using the . operator.
+ * fill(data.color);
+ * circle(data.x, data.y, data.d);
+ *
+ * // Update the object's x and y properties.
+ * data.x += random(-1, 1);
+ * data.y += random(-1, 1);
+ * }
+ *
+ *
+ */
+
+/**
+ * A list that keeps several pieces of data in order.
+ *
+ * Arrays are helpful for storing related data. They can contain data of any
+ * type. For example, an array could contain a list of someone's favorite
+ * colors as strings. Arrays are created as follows:
+ *
+ *
+ * let colors = ['deeppink', 'darkorchid', 'magenta'];
+ *
+ *
+ * Each piece of data in an array is called an element. Each element has an
+ * address, or index, within its array. The variable `colors` refers to an
+ * array with three
String> elements, `'deeppink'`,
+ * `'darkorchid'`, and `'magenta'`. Arrays are zero-indexed, which means
+ * that `'deeppink'` is at index 0, `'darkorchid'` is at index 1, and
+ * '`magenta'` is at index 2. Array elements can be accessed using their
+ * indices as follows:
+ *
+ *
+ * let zeroth = colors[0]; // 'deeppink'
+ * let first = colors[1]; // 'darkorchid'
+ * let second = colors[2]; // 'magenta'
+ *
+ *
+ * Elements can be added to the end of an array by calling the `push()`
+ * method as follows:
+ *
+ *
+ * colors.push('lavender');
+ *
+ * let third = colors[3]; // 'lavender'
+ *
+ *
+ * See MDN
+ * for more information about arrays.
+ *
+ * @property Array
+ *
+ * @example
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an array
+ * // with three numeric elements.
+ * let xCoordinates = [25, 50, 75];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe(
+ * 'Three white circles drawn in a horizontal line on a gray background.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the element at index 0, which is 25.
+ * circle(xCoordinates[0], 50, 20);
+ *
+ * // Access the element at index 1, which is 50.
+ * circle(xCoordinates[1], 50, 20);
+ *
+ * // Access the element at index 2, which is 75.
+ * circle(xCoordinates[2], 50, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an array with three numeric elements.
+ * let xCoordinates = [20, 40, 60];
+ *
+ * // Add another element to the end of the array.
+ * xCoordinates.push(80);
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Four white circles drawn in a horizontal line on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the element at index 0, which is 20.
+ * circle(xCoordinates[0], 50, 20);
+ *
+ * // Access the element at index 1, which is 40.
+ * circle(xCoordinates[1], 50, 20);
+ *
+ * // Access the element at index 2, which is 60.
+ * circle(xCoordinates[2], 50, 20);
+ *
+ * // Access the element at index 3, which is 80.
+ * circle(xCoordinates[3], 50, 20);
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an empty array.
+ * let xCoordinates = [];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Add elements to the array using a loop.
+ * for (let x = 20; x < 100; x += 20) {
+ * xCoordinates.push(x);
+ * }
+ *
+ * describe('Four white circles drawn in a horizontal line on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the element at index i and use it to draw a circle.
+ * for (let i = 0; i < xCoordinates.length; i += 1) {
+ * circle(xCoordinates[i], 50, 20);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an empty array.
+ * let xCoordinates = [];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Add elements to the array using a loop.
+ * for (let x = 20; x < 100; x += 20) {
+ * xCoordinates.push(x);
+ * }
+ *
+ * describe('Four white circles drawn in a horizontal line on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access each element of the array and use it to draw a circle.
+ * for (let x of xCoordinates) {
+ * circle(x, 50, 20);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an empty array.
+ * let xCoordinates = [];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Add elements to the array using a loop.
+ * for (let x = 20; x < 100; x += 20) {
+ * xCoordinates.push(x);
+ * }
+ *
+ * describe(
+ * 'A gray square with four white circles drawn in a horizontal line. The circles move randomly.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * for (let i = 0; i < xCoordinates.length; i += 1) {
+ * // Update the element at index i.
+ * xCoordinates[i] += random(-1, 1);
+ *
+ * // Use the element at index i to draw a circle.
+ * circle(xCoordinates[i], 50, 20);
+ * }
+ * }
+ *
+ *
+ */
+
+/**
+ * A template for creating objects of a particular type.
+ *
+ * Classes can make it easier to program with objects. For example, a `Frog`
+ * class could create objects that behave like frogs. Each object created
+ * using a class is called an instance of that class. All instances of a class
+ * are the same type. Here's an example of creating an instance of a `Frog`
+ * class:
+ *
+ *
+ * let fifi = new Frog(50, 50, 20);
+ *
+ *
+ * The variable `fifi` refers to an instance of the `Frog` class. The keyword
+ * `new` is used to call the `Frog` class' constructor in the statement
+ * `new Frog()`. Altogether, a new `Frog` object was created and assigned to
+ * the variable `fifi`. Classes are templates, so they can be used to create
+ * more than one instance:
+ *
+ *
+ * // First Frog instance.
+ * let frog1 = new Frog(25, 50, 10);
+ *
+ * // Second Frog instance.
+ * let frog2 = new Frog(75, 50, 10);
+ *
+ *
+ * A simple `Frog` class could be declared as follows:
+ *
+ *
+ * class Frog {
+ * constructor(x, y, size) {
+ * // This code runs once when an instance is created.
+ * this.x = x;
+ * this.y = y;
+ * this.size = size;
+ * }
+ *
+ * show() {
+ * // This code runs once when myFrog.show() is called.
+ * textAlign(CENTER, CENTER);
+ * textSize(this.size);
+ * text('🐸', this.x, this.y);
+ * }
+ *
+ * hop() {
+ * // This code runs once when myFrog.hop() is called.
+ * this.x += random(-10, 10);
+ * this.y += random(-10, 10);
+ * }
+ * }
+ *
+ *
+ * Class declarations begin with the keyword `class` followed by the class
+ * name, such as `Frog`, and curly braces `{}`. Class names should use
+ * `PascalCase` and can't have spaces in their names. For example, naming a
+ * class `Kermit The Frog` with spaces between each word would throw a
+ * `SyntaxError`. The code between the curly braces `{}` defines the class.
+ *
+ * Functions that belong to a class are called methods. `constructor()`,
+ * `show()`, and `hop()` are methods in the `Frog` class. Methods define an
+ * object's behavior. Methods can accept parameters and return values, just
+ * like functions. Note that methods don't use the `function` keyword.
+ *
+ * `constructor()` is a special method that's called once when an instance of
+ * the class is created. The statement `new Frog()` calls the `Frog` class'
+ * `constructor()` method.
+ *
+ * A class definition is a template for instances. The keyword `this` refers
+ * to an instance's data and methods. For example, each `Frog` instance has
+ * unique coordinates stored in `this.x` and `this.y`. The `show()` method
+ * uses those coordinates to draw the frog. The `hop()` method updates those
+ * coordinates when called. Once a `Frog` instance is created, its data and
+ * methods can be accessed using the dot operator `.` as follows:
+ *
+ *
+ * // Draw a lily pad.
+ * fill('green');
+ * stroke('green');
+ * circle(fifi.x, fifi.y, 2 * fifi.size);
+ *
+ * // Show the Frog.
+ * fifi.show();
+ *
+ * // Hop.
+ * fifi.hop();
+ *
+ *
+ * @property class
+ *
+ * @example
+ *
+ *
+ * // Declare a frog variable.
+ * let fifi;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Assign the frog variable a new Frog object.
+ * fifi = new Frog(50, 50, 20);
+ *
+ * describe('A frog face drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background('cornflowerblue');
+ *
+ * // Show the frog.
+ * fifi.show();
+ * }
+ *
+ * class Frog {
+ * constructor(x, y, size) {
+ * this.x = x;
+ * this.y = y;
+ * this.size = size;
+ * }
+ *
+ * show() {
+ * textAlign(CENTER, CENTER);
+ * textSize(this.size);
+ * text('🐸', this.x, this.y);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare two frog variables.
+ * let frog1;
+ * let frog2;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Assign the frog variables a new Frog object.
+ * frog1 = new Frog(25, 50, 10);
+ * frog2 = new Frog(75, 50, 20);
+ *
+ * describe('Two frog faces drawn next to each other on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background('cornflowerblue');
+ *
+ * // Show the frogs.
+ * frog1.show();
+ * frog2.show();
+ * }
+ *
+ * class Frog {
+ * constructor(x, y, size) {
+ * this.x = x;
+ * this.y = y;
+ * this.size = size;
+ * }
+ *
+ * show() {
+ * textAlign(CENTER, CENTER);
+ * textSize(this.size);
+ * text('🐸', this.x, this.y);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare two frog variables.
+ * let frog1;
+ * let frog2;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Assign the frog variables a new Frog object.
+ * frog1 = new Frog(25, 50, 10);
+ * frog2 = new Frog(75, 50, 20);
+ *
+ * // Slow the frame rate.
+ * frameRate(1);
+ *
+ * describe('A gray square with two frog faces drawn next to each other. The frogs hop around the screen.');
+ * }
+ *
+ * function draw() {
+ * background('cornflowerblue');
+ *
+ * // Show the frogs.
+ * frog1.show();
+ * frog2.show();
+ *
+ * // Move the frogs.
+ * frog1.hop();
+ * frog2.hop();
+ *
+ * // Wrap around if they've hopped off the edge.
+ * frog1.checkEdges();
+ * frog2.checkEdges();
+ * }
+ *
+ * class Frog {
+ * constructor(x, y, size) {
+ * this.x = x;
+ * this.y = y;
+ * this.size = size;
+ * }
+ *
+ * show() {
+ * textAlign(CENTER, CENTER);
+ * textSize(this.size);
+ * text('🐸', this.x, this.y);
+ * }
+ *
+ * hop() {
+ * this.x += random(-10, 10);
+ * this.y += random(-10, 10);
+ * }
+ *
+ * checkEdges() {
+ * if (this.x > width) {
+ * this.x = this.x - width;
+ * } else if (this.x < 0) {
+ * this.x = width - this.x;
+ * }
+ *
+ * if (this.y > height) {
+ * this.y = this.y - height;
+ * } else if (this.y < 0) {
+ * this.y = height - this.y;
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare two frog variables.
+ * let frog1;
+ * let frog2;
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Assign the frog variables a new Frog object.
+ * frog1 = new Frog(25, 50, 10);
+ * frog2 = new Frog(75, 50, 20);
+ *
+ * describe('Two frog faces drawn next to each other on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background('cornflowerblue');
+ *
+ * // Show the frogs.
+ * frog1.show();
+ * frog2.show();
+ * }
+ *
+ * class Frog {
+ * constructor(x, y, size) {
+ * this.x = x;
+ * this.y = y;
+ * this.size = size;
+ * }
+ *
+ * show() {
+ * textAlign(CENTER, CENTER);
+ * textSize(this.size);
+ * text('🐸', this.x, this.y);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Create an array that will hold frogs.
+ * let frogs = [];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Add Frog objects to the array.
+ * for (let i = 0; i < 5; i += 1) {
+ * // Calculate random coordinates and size.
+ * let x = random(0, 100);
+ * let y = random(0, 100);
+ * let s = random(2, 20);
+ *
+ * // Create a new Frog object.
+ * let frog = new Frog(x, y, s);
+ *
+ * // Add the Frog to the array.
+ * frogs.push(frog);
+ * }
+ *
+ * // Slow the frame rate.
+ * frameRate(1);
+ *
+ * describe(
+ * 'A gray square with five frog faces drawn next to each other. The frogs hop around the screen.'
+ * );
+ * }
+ *
+ * function draw() {
+ * background('cornflowerblue');
+ *
+ * for (let frog of frogs) {
+ * // Show the frog.
+ * frog.show();
+ *
+ * // Move the frog.
+ * frog.hop();
+ *
+ * // Wrap around if they've hopped off the edge.
+ * frog.checkEdges();
+ * }
+ * }
+ *
+ * class Frog {
+ * constructor(x, y, size) {
+ * this.x = x;
+ * this.y = y;
+ * this.size = size;
+ * }
+ *
+ * show() {
+ * textAlign(CENTER, CENTER);
+ * textSize(this.size);
+ * text('🐸', this.x, this.y);
+ * }
+ *
+ * hop() {
+ * this.x += random(-10, 10);
+ * this.y += random(-10, 10);
+ * }
+ *
+ * checkEdges() {
+ * if (this.x > width) {
+ * this.x = this.x - width;
+ * } else if (this.x < 0) {
+ * this.x = width - this.x;
+ * }
+ *
+ * if (this.y > height) {
+ * this.y = this.y - height;
+ * } else if (this.y < 0) {
+ * this.y = height - this.y;
+ * }
+ * }
+ * }
+ *
+ *
+ */
+
+/**
+ * A way to repeat a block of code when the number of iterations is known.
+ *
+ * `for` loops are helpful for repeating statements a certain number of times.
+ * For example, a `for` loop makes it easy to express the idea
+ * "draw five lines" like so:
+ *
+ *
+ * for (let x = 10; x < 100; x += 20) {
+ * line(x, 25, x, 75);
+ * }
+ *
+ *
+ * The loop's header begins with the keyword `for`. Loops generally count up
+ * or count down as they repeat, or iterate. The statements in parentheses
+ * `let x = 10; x < 100; x += 20` tell the loop how it should repeat:
+ * - `let x = 10` tells the loop to start counting at `10` and keep track of iterations using the variable `x`.
+ * - `x < 100` tells the loop to count up to, but not including, `100`.
+ * - `x += 20` tells the loop to count up by `20` at the end of each iteration.
+ *
+ * The code between the curly braces `{}` is the loop's body. Statements in the
+ * loop body are repeated during each iteration of the loop.
+ *
+ * It's common to create infinite loops accidentally. When this happens,
+ * sketches may become unresponsive and the web browser may display a warning.
+ * For example, the following loop never stops iterating because it doesn't
+ * count up:
+ *
+ *
+ * for (let x = 10; x < 100; x = 20) {
+ * line(x, 25, x, 75);
+ * }
+ *
+ *
+ * The statement `x = 20` keeps the variable `x` stuck at `20`, which is
+ * always less than `100`.
+ *
+ * `for` loops can also count down:
+ *
+ *
+ * for (let d = 100; d > 0; d -= 10) {
+ * circle(50, 50, d);
+ * }
+ *
+ *
+ * `for` loops can also contain other loops. The following nested loop draws a
+ * grid of points:
+ *
+ *
+ * // Loop from left to right.
+ * for (let x = 10; x < 100; x += 10) {
+ *
+ * // Loop from top to bottom.
+ * for (let y = 10; y < 100; y += 10) {
+ * point(x, y);
+ * }
+ *
+ * }
+ *
+ *
+ * `for` loops are also helpful for iterating through the elements of an
+ * array. For example, it's common to iterate through an array that contains
+ * information about where or what to draw:
+ *
+ *
+ * // Create an array of x-coordinates.
+ * let xCoordinates = [20, 40, 60];
+ *
+ * for (let i = 0; i < xCoordinates.length; i += 1) {
+ * // Update the element.
+ * xCoordinates[i] += random(-1, 1);
+ *
+ * // Draw a circle.
+ * circle(xCoordinates[i], 50, 20);
+ * }
+ *
+ *
+ * If the array's values aren't modified, the `for...of` statement can
+ * simplify the code. They're similar to `for` loops in Python and `for-each`
+ * loops in C++ and Java. The following loops have the same effect:
+ *
+ *
+ * // Draw circles with a for loop.
+ * let xCoordinates = [20, 40, 60];
+ *
+ * for (let i = 0; i < xCoordinates.length; i += 1) {
+ * circle(xCoordinates[i], 50, 20);
+ * }
+ *
+ *
+ *
+ * // Draw circles with a for...of statement.
+ * let xCoordinates = [20, 40, 60];
+ *
+ * for (let x of xCoordinates) {
+ * circle(x, 50, 20);
+ * }
+ *
+ *
+ * In the code snippets above, the variables `i` and `x` have different roles.
+ *
+ * In the first snippet, `i` counts from `0` up to `2`, which is one less than
+ * `xCoordinates.length`. `i` is used to access the element in `xCoordinates`
+ * at index `i`.
+ *
+ * In the second code snippet, `x` isn't keeping track of the loop's progress
+ * or an index. During each iteration, `x` contains the next element of
+ * `xCoordinates`. `x` starts from the beginning of `xCoordinates` (`20`) and
+ * updates its value to `40` and then `60` during the next iterations.
+ *
+ * @property for
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with five black vertical lines.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw vertical lines using a loop.
+ * for (let x = 10; x < 100; x += 20) {
+ * line(x, 25, x, 75);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Five white concentric circles drawn on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Draw concentric circles using a loop.
+ * for (let d = 100; d > 0; d -= 20) {
+ * circle(50, 50, d);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A grid of black dots on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Set the spacing for points on the grid.
+ * let space = 10;
+ *
+ * // Increase the stroke weight.
+ * strokeWeight(3);
+ *
+ * // Loop from the left to the right.
+ * for (let x = space; x < 100; x += space) {
+ * // Loop from the top to the bottom.
+ * for (let y = space; y < 100; y += space) {
+ * point(x, y);
+ * }
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an array of numbers.
+ * let xCoordinates = [20, 40, 60, 80];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('Four white circles drawn in a horizontal line on a gray background.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access the element at index i and use it to draw a circle.
+ * for (let i = 0; i < xCoordinates.length; i += 1) {
+ * circle(xCoordinates[i], 50, 20);
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * // Declare the variable xCoordinates and assign it an array of numbers.
+ * let xCoordinates = [20, 40, 60, 80];
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with four white circles drawn in a horizontal line.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Access each element of the array and use it to draw a circle.
+ * for (let x of xCoordinates) {
+ * circle(x, 50, 20);
+ * }
+ * }
+ *
+ *
+ */
+
+/**
+ * A way to repeat a block of code.
+ *
+ * `while` loops are helpful for repeating statements while a condition is
+ * `true`. They're like `if` statements that repeat. For example, a `while`
+ * loop makes it easy to express the idea "draw several lines" like so:
+ *
+ *
+ * // Declare a variable to keep track of iteration.
+ * let x = 10;
+ *
+ * // Repeat as long as x < 100
+ * while (x < 100) {
+ * line(x, 25, x, 75);
+ *
+ * // Increment by 20.
+ * x += 20;
+ * }
+ *
+ *
+ * The loop's header begins with the keyword `while`. Loops generally count up
+ * or count down as they repeat, or iterate. The statement in parentheses
+ * `x < 100` is a condition the loop checks each time it iterates. If the
+ * condition is `true`, the loop runs the code between the curly braces `{}`,
+ * The code between the curly braces is called the loop's body. If the
+ * condition is `false`, the body is skipped and the loop is stopped.
+ *
+ * It's common to create infinite loops accidentally. For example, the
+ * following loop never stops iterating because it doesn't count up:
+ *
+ *
+ * // Declare a variable to keep track of iteration.
+ * let x = 10;
+ *
+ * // Repeat as long as x < 100
+ * while (x < 100) {
+ * line(x, 25, x, 75);
+ * }
+ *
+ * // This should be in the loop's body!
+ * x += 20;
+ *
+ *
+ * The statement `x += 20` appears after the loop's body. That means the
+ * variable `x` is stuck at `10`, which is always less than `100`.
+ *
+ * `while` loops are useful when the number of iterations isn't known in
+ * advance. For example, concentric circles could be drawn at random
+ * increments:
+ *
+ *
+ * let d = 100;
+ * let minSize = 5;
+ *
+ * while (d > minSize) {
+ * circle(50, 50, d);
+ * d -= random(10);
+ * }
+ *
+ *
+ * @property while
+ *
+ * @example
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * describe('A gray square with five black vertical lines.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * // Declare a variable to keep track of iteration.
+ * let x = 10;
+ *
+ * // Repeat as long as x < 100
+ * while (x < 100) {
+ * line(x, 25, x, 75);
+ *
+ * // Increment by 20.
+ * x += 20
+ * }
+ * }
+ *
+ *
+ *
+ *
+ *
+ * function setup() {
+ * createCanvas(100, 100);
+ *
+ * // Slow the frame rate.
+ * frameRate(5);
+ *
+ * describe('A gray square with several concentric circles at the center. The circles' sizes decrease at random increments.');
+ * }
+ *
+ * function draw() {
+ * background(200);
+ *
+ * let d = 100;
+ * let minSize = 5;
+ *
+ * while (d > minSize) {
+ * circle(50, 50, d);
+ * d -= random(5, 15);
+ * }
+ * }
+ *
+ *
+ */
+
+/**
+ * Prints a message to the web browser's console.
+ *
+ * The
console
+ * object is helpful for printing messages while debugging. For example, it's
+ * common to add a `console.log()` statement while studying how a section of
+ * code works:
+ *
+ *
+ * if (isPlaying === true) {
+ * // Add a console.log() statement to make sure this block of code runs.
+ * console.log('Got here!');
+ *
+ * // Game logic.
+ * }
+ *
+ *
+ * `console.error()` is helpful for tracking errors because it prints
+ * formatted messages. For example, it's common to encounter errors when
+ * loading media assets:
+ *
+ *
+ * // Logs an error message with special formatting.
+ * function handleFailure(error) {
+ * console.error('Oops!', error);
+ * }
+ *
+ * // Try to load an image and call handleError() if it fails.
+ * loadImage('https://example.com/cat.jpg', handleImage, handleError);
*
- *
*
- * @alt
- * This example does not render anything
- */
-
-/**
- * Prints a message to your browser's web console. When using p5, you can use
interchangeably.
- *
- * The console is opened differently depending on which browser you are using.
- * Here are links on how to open the console in
the console
- * is embedded directly in the page underneath the code editor.
- *
- * From
:
- * The Console method log() outputs a message to the web console. The message may
- * be a single
(with optional substitution values),
- * or it may be any one or more JavaScript
.
- * @method log
- * @static
* @for console
- * @param {String|Expression|Object} message :Message that you would like to print to the console
+ * @param {String|Expression|Object} message message to print to the console.
*
* @example
- *