An add-on for p5.js with a range function, offering an alternative way to repeat steps from standard for and while loops.
The function's design aims to simplify syntax and prevent infinite loops. It works similarly to Python's range function.
You can use this template by signing in to the editor, opening the template, and clicking File > Duplicate.
On an existing p5 sketch, you can add the range add-on by editing the index.html file and adding the following script tag:
<script
src="https://cdn.jsdelivr.net/gh/calebfoss/p5.range@latest/p5.range.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/addons/p5.sound.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/calebfoss/p5.range@latest/p5.range.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>
- range(stop) ⇒
object Creates an iterator, which is an object that produces a sequence of values. This may be used in a for...of loop.
- range(start, stop, [increment]) ⇒
object
Creates an iterator, which is an object that produces a sequence of values. This may be used in a for...of loop.
Kind: global function
Returns: object - Iterator that returns values from 0 to stop with
each value 1 apart.
| Param | Type | Description |
|---|---|---|
| stop | number |
when the range reaches or goes past this value, it will stop returning values |
Example
for(let i of range(100)) {
circle(random(width), random(height), random(100));
}
describe("100 circles with random sizes and positions.")Kind: global function
Returns: object - Iterator that returns values from start to stop with
each value increment apart.
| Param | Type | Description |
|---|---|---|
| start | number |
initial value |
| stop | number |
when the range reaches or goes past this value, it will stop returning values |
| [increment] | number |
change between each value (default is 1 or -1 depending on whether stop is greater than or less than start) (Optional) |
Example
for(let x of range(25, width, 50)) {
circle(x, height / 2, 50);
}
describe("A row of circles spanning the width of " +
"the canvas halfway down the canvas.");
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent