range function for iteration

[calebfoss]

Increasing Access

In my experience, iteration tends to be one of the most intimidating foundational programming concepts to beginners. As discussed in issue #6607, there are factors in every different structure for iteration that can be difficult for beginners.

The risk of crashing a browser tab with an infinite loop can be particularly discouraging. Iteration unlocks so many creative opportunities, and I think what p5 does best is lower barriers for creative opportunities.

This proposal offers a way to iterate without the risk of infinite loops. It does so with syntax that I would argue is one of the simplest and easiest to read. As such, I am proposing this to increase accessibility of iteration.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

I propose adding a range() function that returns an iterator for a sequence of numbers for be used in for...of loops. I built this function as an add-on called p5.range. I can submit this as a library, but I think this may be a helpful addition to p5's base library.

One factor that came up in issue #6607 is that introducing a new structure for iterating over arrays vs numerical iteration faces beginners with new, unfamiliar syntax. Using range() would allow for one consistent format for both:

Numerical

// 100 random circles
for(let count of range(100)) {
 circle(random(width), random(height), random(100));
}

// A row of circles starting 25 units from the left, 
// spanning the width of the canvas,
// 50 units apart
for(let x of range(25, width, 50)) {
 circle(x, height / 2, 50);
}

Array

for(let index of range(myArray.length)) {
 myArray[index] += 1;
}

3 statement for loop for comparison:

Numerical

// 100 random circles
for(let count = 0; count < 100; count += 1) {
 circle(random(width), random(height), random(100));
}

// A row of circles starting 25 units from the left, 
// spanning the width of the canvas,
// 50 units apart
for(let x = 0; x < width; x += 50) {
 circle(x, height / 2, 50);
}

Array

for(let index = 0; index < myArray.length; index += 1) {
 myArray[index] += 1;
}

This proposed function is inspired by Python's range function.

From Processing Python reference:

loadPixels()
for i in range((width*height/2)-width/2): 
    pixels[i] = pink
updatePixels()

Notably, the proposed function uses for...of rather than for...in, which do different things in JS. This has been noted as a concern for causing confusion with beginners in #6607. I would argue, though, that the risk of accidentally passing in array keys instead of values is less discouraging that crashing the browser tab. If for...in were used with this range() function, it would simply do nothing, but the program would still run otherwise.

[samrudh3125]

I am contributing first time. Can we make a range function which just returns a array of numbers from start to stop. The array can be created with for loop. In this way we can just change the syntax of for loop to an range function

[calebfoss]

@samrudh3125 Yes, that's the general idea! I already have the implementation ready to go, and I opened this issue to discuss whether this is a wanted addition to p5. Rather than return an array, my implementation returns an object following the iterator protocol that produces values in the range one by one.

[Vishal2002]

Hi @calebfoss, I saw your range function, and my question is can we implement in more simpler fashion like this

[davepagurek]

I think a big benefit to using an iterator like in @calebfoss's implementation is that you don't need to store an array with all n items at once, similar to how a standard for loop wouldn't either.

This is a construct I find myself using often. I guess the question is whether we think it should be a part of p5. @limzykenneth if we're planning on making p5 2.0 more modular, does that change the way we consider utilities like this? Compared to a more complicated data structure, the maintenance cost seems low.

[limzykenneth]

For something like a range function, iterators is definitely preferred over arrays mainly for memory efficiency and partially for semantics (range don't necessarily imply array/list). Whether to include range() as part of core I would like to consider it as part of 2.0.

[ohayouarmaan]

hey @calebfoss my implementation of the range method is kinda similar to the python's range method it has dynamic arguments if only 1 argument is provided it gets assigned to the end if two arguments are provided then the first one gets assigned to the start and the second one goes to the limit and if three are provided then it gets assigned to start, end, step respectively.

I think this is a great feature which can be included infact I've came across certain scenarios where I myself wanted to use this. If this is included it will be a very nice-to-have tool

I have opened a PR which includes this you can check it if you want to include it in the 2.0 @limzykenneth PR#6711

[ksen0]

When this was considered for inclusion in p5.js 2.0, one big reason it was ultimately not included (as noted in #6711) is that while it could initially help beginners overcome the hurdles of iteration in JavaScript, it would also teach them a pattern that isn't used in JavaScript more widely, and would have to be "unlearned" later on.

However, because it's such a well-scoped stand-alone feature, that already has an implementation that can be tested (p5.range.js) I wonder if this is a good candidate for some kind of wider opinion poll?

Not for 2.0, but for a 2.x minor release (like 2.1, 2.2., 2.3, etc...), maybe if we have multiple possible additions like this implemented and testable we could use some kind of voting mechanism that invites opinions from beginners users that can try it out? For example, #6795 is also a well-scoped proposal that could be considered for inclusion. The main blocking consideration is that adding too many new functions makes p5.js harder to get started with and navigate, as well as to keep consistent/maintain - but there are really nice features that could introduce low maintenance cost individually, and potentially high impact for learners! So maybe at each minor release, there could be a vote for which one thing to add?

In general, I think voting on features has significant limitations:

1. focus on access means not going by popularity alone, so I'm hesitant to introduce it as a practice; but these would be all features that address "increase access" requirement as a prerequisite so maybe this is one way to include people who are outside GitHub discussions (vast majority of p5.js users) in the decision making process, which also seems really important
2. really sensitive to how this polling is done and what kind of outreach happens

But it was just a thought about how we could move forward on this? Open to your ideas, if there is still interest to consider this for a future minor release.

PS: This message is part of cleaning up the p5.js 2.x board prior to release, to make outstanding more more approachable for new contributors. You can join the conversation about this new version on this Discourse thread or this GitHub thread!

If you're new to p5.js contribution, welcome! Please be sure to read through the contributor guidelines, and keep in mind that you should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation and assigned. This issue does not require implementation at this time, but please share your thoughts about the minor releases proposal!

[calebfoss]

@ksen0 Thanks for the update! Yeah I respect the critique on this. Maybe I could bundle it with a couple other beginner-friendly tools and submit it as a library? Might be a good fit in a template for educators who are teaching p5 not as an intro to JS but as an intro to programmatic thinking more generally.