New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3 suggestions for making p5js easier for newcomers #2305
Comments
Nice write up! Most of these are issues with Processing that p5 inherited - but I certainly agree with a lot of them.
|
I think I'm in favor of adding circle() and square() to Processing. I'll speak with @benfry about it. For context, the language was originally designed for university students. In that situation, ellipse() and rect() for circles and squares are not an issue and having extra functions to do the same thing as ellipse(x, y, d, d) and rect(x, y, w, w) was just more functions to clutter the language. |
|
Some of the points were brought up in the past and there's discussions around them while not necessarily conclusive, it would be helpful to add more opinions building on them.
Below are some of my thoughts, although would be more or less rehashing my comments in those issues:
|
I'm using p5js this year to teach Javascript to beginners, so I am in strong agreement with @tawez @sixhat and @limzykenneth that the language should include the core programming processes common to programming languages. |
That noted, I'd love to have the ability to center any type of shape on an axis by introducing, perhaps, a shape mesh that could provide a nine-point registration grid ... because perfectly centering a triangle on a central translation point is tedious for the mathematically-challenged! |
@limzykenneth Althought the same in this case @tawez I was considering making a PR for an iterator range but I don't know if you can write iterators that don't break backward compatibility. It looks like you can, though. I'd be happy to try to whip up a range that had feature-parity with python's range whilst being backwards compatible |
@meiamsome Ah yes, my mistake, I meant to say |
I'm not an expert but I managed to create a circle() and square() primitive by adding them to src/core/2d_primitives.js by duplicating much of the existing code for ellipse() and rect(). A test sketch shows it works. If that's the the correct way, I'd be happy to submit a PR. In effect this is creating aliases but with different parameter handling. |
@meiamsome According to https://github.com/processing/p5.js/wiki/Supported-browsers IMHO supporting IE nowadays is like supporting IE6 a few years ago. |
I did not know that page existed - I was assuming that there was just a general want to be pre-ES6. My main issue with generator using the |
Responding to Casey's note above, some background on where these decisions came from originally…
|
I've got to agree with @benfry that I've also got to agree that the ellipse() and rect() have never tripped up any of my students in the past, but I don't really see any issue with having square() and circle() as aliases as long as there is parity in the functionality. Its likely pretty straightforward to wrap all of these ideas up into a little library which could extend or further abstract p5.js to your liking. It could be as simple as just passing variables on depending on how complex or how much feature parity you want: function draw() {
circle(200,200,50,50)
square(20,20,100,100)
}
//~+~+~+~+~+~+~+~+~+
p5.prototype.circle = function(x,y,w,h){
ellipse(x,y,w,h)
}
p5.prototype.square = function(x,y,w,h){
rect(x,y,w,h)
} |
Or shorter
I prefer
I use I like lodash random |
I think there's an assumption that "students" means undergraduate students. My experience includes younger learners of the age 6 to 12. In this case, the difference between ellipse and circle is huge, as is rectangle and square. Similarly int(random(x)) is just too much compared to the lower barriers that a potential randomNumber() would. Today I helped teach a class at a UK university to first year under-graduates. C/Java/Javscript style loops are an enduring pain compared to something like Logo:
Logo was created in 1967! The option to have simple repeat as well as a more complex for(start; condition; stuff) would be good because it doesn't take away the capabilities this it provides. p5js provides for (x of list) is simple and I'm not sure the Java based Processing provides it .. My final thought - Processing should be made accessible to non-technical artists as well as children learners of age 7-12 too. Design thinking means thinking about how the user experiences p5js, not just a core developer's perspective about overlapping functionality and redundancy of functions. |
Let's not confuse a feature of a language with a feature of a library.
P5.js is a library whose language is Javascript. People tend to bash loops as difficult for newcomers because of the *for* loop, but if you look at the *while* loop in JS it is as simple as the *repeat* in Logo and probably the place to start if you want to teach loops.
while (condition) {
code block to be executed
}
https://www.w3schools.com/js/js_loop_while.asp
Cheers
|
most 7-12 year olds and non-technical artists coming to p5js don't really. understand this statement "feature of a language with a feature of a library". It is a valid point for a core developer - but not for the user. Similarly while(condition) needs further boilerplate like a variable to be tested. That really isn't easier than "repeat 4". Anyway I've tried several times to get p5js developers to think about the Processing foundation's own objectives, but I guess I will move onto other tasks. Thanks everyone for your patience!
|
What is your suggestion?
Please state this in normal javascript code.
On Sat, 24 Feb 2018 at 21:14, Make Your Own Algorithmic Art < ***@***.***> wrote:
most 7-12 year olds and non-technical artists coming to p5js don't really.
understand this statement "feature of a language with a feature of a
library".
It is a valid point for a core developer - but not for the user.
Similarly while(condition) needs further boilerplate like a variable to be
tested. That really isn't easier than "repeat 4".
Anyway I've tried several times to get p5js developers to think about the
Processing foundation's own objectives, but I guess I will move onto other
tasks. Thanks everyone for your patience!
Our mission is to promote software literacy within the visual arts, and
visual literacy within technology-related fields — and to make these fields
accessible to diverse communities. Our goal is to empower people of all
interests and backgrounds to learn how to program and make creative work
with code, especially those who might not otherwise have access to these
tools and resources.
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#2305 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ADRyi7nff6L2mHPrdSj9qi7pPUjpPFGAks5tYG2IgaJpZM4QGyJr>
.
--
/Christer Nilsson
070-749 6800
|
This discussion has been very instructive. I've learned that Logo has both for loops and repeat loops---JS has corresponding for loops and while loops. What I don't understand is this need to ask a Javascript library to be written as Logo( or any other language) and not even compare the corresponding equivalent constructs in the arguments used.
|
@makeyourownalgorithmicart I'm not a core developer but as a responder to this thread I can say that when I say my students, I do mean my undergraduate students. I think it's awesome that you are teaching p5js to 7-12 yo's and that perhaps whats been discussed previously in this thread has been geared toward an adult beginner rather that a young beginner. Of course those students are going to have a hard time getting a for loop down at first. I can see both sides of this argument, particularly with the forloop discussion. repeat(5){ // block to execute} Which allows instant understanding, but will make engaging with a native loop at a later time require a more in depth re-learning of loops. This is probably not an issue for 7-12yos who will take the idea and run as they progress. This however is more problematic for the older beginner student who often has direct ambitions and desires for the language and often times want to immediately use the power of the let i = 0;
if(i < 5){
i++
//codeblock
} is so similar to and a nice transition into let i = 0;
while(i < 5){
i++
//codeblock
} but, I can see how let i = 0;
repeat(5){
i++
// codeblock
} would be appealing for young beginners I suppose that my ideal scenario for this situation would be to have a As I'm sure the kids are starting with a template or using the web editor it should be easy enough to put together a boilerplate project for them to start from. I'm sure there are more things which could be abstracted for young beginners within this library too. I'd be happy to start work on something like this as it seems like it could be cool & fun, but is likely outside of what is possible to be supported directly in the p5js library without breaking too many things & plotting a course to changing p5.js into it's own fully abstracted language ontop of JS instead of being a library which rides ontop of the JS to facilitate canvas operations. @lmccart @shiffman @benfry would have more ability to respond to the community statement than I. But, I do think simply stating that Processing Foundation is not adhering to the mission because of not including a few functions reads as misdirected frustration. There are a lot of scales to balance working on FLOSS projects and PF does an amazing job in having an open and honest conversation about the limitations of themselves and the projects they run. It's not always possible to meet every need, desire or proposed direction. With that, this is exactly why OSS projects are so amazing – because they let people build on top of them, add to them, and expand. So I propose we do just that – by making a library on top of this library just for kids learning. One that is specific to, and suited just for them! What do you think? |
@bmoren - thanks for your thoughts, and also understanding. I agree with your suggestion is great. An additional library wouldn't break the existing p5js and wouldn't upset those who want to keep such ideas out of the core. I have on suggestion in response to yours - rather than a develop centric approach to developing a p5.kids library - we apply a filter for every suggestion to ensure that the proposals are based o actual user research. I'm sure this can be done proportionately - even a set of observations that "ellipse" scares people away but "circle" does not .. or the observation over several classes that kids are finding it tough to get over "int(random())". That way all features have a rationale and basis. In the coming months I will get more experience with teaching younger people, and also non-technical artists, some who have never coded before .. and I hope to write down my learning. Thanks everyone who commented. |
@bmoren - I'm not an expert coder but I've made a start with a library to make entry to p5js even easier for new and young coders so far I've implemented and tested:
I'm trying to think how I might implement a simpler loop like I'm also working on test sketches to accompany this library to demonstrate (and test) the new functions. Blog write up: http://makeyourownalgorithmicart.blogspot.co.uk/2018/03/p5-simplejs.html |
I was trying to figure this out and was running into walls, does anyone here working on p5 have any ideas? Stack overflow was quick to make it even more complex than a while loop. Good work getting it started, I will say that I think radius is much more difficult than diameter for circle. |
As far as I can think, I can't come up with any solution in JS syntax that can make something like As mentioned in the stackoverflow question, the closest you can get may be a lodash style |
@bmoren - thanks for the feedback and encouragement. I haven't solved the issue about a new kind of structure for loops - the more I read about javascript the more I realise it will be very hard, and even impossible to do elegantly. I wanted the user to have some nice default when they first start coding - for new these are: noLoop() because loop() confuses beginners when creating random patterns, stroke weight that's actually visible, and a default fill colour Sadly I can't make these happen upon invoking simple.js as I think they need a p5 context already set up? So for now we have to use a simple() in setup() to invoke these. Is there a way of invoking these defaults without the need for a call from setup() .. that, only the inclusion of simple.js with <script> after p5.js being necessary? also for the circle() command .. I did some quick research and yes, people do seem prefer diameter so I've changed that back @limzykenneth I'll look at the lodash style .. it may be the best compromise for now. |
I've started a wiki on GitHub to
|
I won't bore anyone with too many more posts, but I've implemented a wiki - https://github.com/makeyourownalgorithmicart/simple.js/wiki/repeat() |
Cool, @makeyourownalgorithmicart! Does this mean that you usually teach the students how to write functions before they learn to write loops? I'm also curious how beginner students react to seeing a function as an argument to another function? I usually don't include this in a beginner class, because it seems difficult to me—but I've never been sure if that's because I learned languages like Java and C++ before JavaScript. I wonder if students learning JavaScript as their first programming language are more open to this, or don't find it strange. |
@kjhollen - I didn't want to teach functions before loops - and in languages like Python this is fine. But javascript's for loop is so problematic that - in my experience - students have understood the idea of functions far more quickly and comfortably. I still have 1st year undergraduate students (arts background) who 7 weeks into their creative coding course still can't construct a for loop, but they're very happy with functions as re-usable named code. I know from a technical perspective the idea of functions and higher-order functions is seen as advanced .. but they don't see that .. because there's no need to talk theory of meta-programming or functional programming. I also have a daughter who was coding since age 5 - beginning with scratch with avoids typing any code yet introduces the key ideas of loops and logic tests. She progressed onto Python easily. Logo is easy too ( Anyway - thanks for your question and thoughts. What I'm finding is that many of the challenges are coming from people who are already technically comfortable and their experience is not that of new / young / non-technical coders. |
I've now implemented 2 forms of
documented on the GitHub wiki: https://github.com/makeyourownalgorithmicart/simple.js/wiki/repeat() |
@bmoren - I've fleshed out the repo with examples, tests, documentation, wiki and even a tutorial: https://github.com/makeyourownalgorithmicart/simple.js/wiki/Tutorial I'd love feedback on improving this nascent simple.js. |
I'm using Coffeescript and p5. @makeyourownalgorithmicart: I can't see how the loop variable is accessed in your code. My site: |
@ChristerNilsson - really interesting you've done, i'm going to explore it more :) PS - i don't cover the case of loops within loops .. but it is possible by habing a repeat() inside the function called by repeat(). I've only wanted to cover the simple cases - not the more advanced cases because it is the new coders that find for loops difficult. |
Thank's a lot for this interesting discussion, sorry to arrive so late. |
hey folks, I'm going to close this because it feels like the conversation has mostly wrapped up—but please feel free to open new issues for specific feature requests (like circle() etc). It's a little easier to track things if we have them broken into smaller items so people can sign up to work on them! We've also got a brand new forum that can be great for future discussions like this: https://discourse.processing.org/ thank you all for a productive conversation. |
Thanks @kjhollen - as OP I agree the conversation has moved. I implemented a simple.js to address most of the issues. I still think changing core processing would make it more open to more diverse communities of people. I respectfully disagree that it should be done in pieces - as that leads to the current state where circle() or sqaure() is rejected because it is seen as duplication - in the narrow view. But in a wider view conscious of a broad ambition and strategy (promote to more people, kids coding, first time artist coders) then a whole series of changes can be considered as a coherent change. |
Thanks for the feedback. I still encourage you to file issues to track requested work items for the core library—for example, one for circle() and another one for square(). These were not rejected! I think no one picked them up to implement from this issue because when they browse through the github issues, the title of this issue doesn't make it obvious that is what is needed here. Filing issues for smaller work items makes it more likely that someone will find and implement the features—and that they can take on concise, contained pieces of work even if they don't have time to implement a huge feature or overhaul. In the future, we're working toward having a project roadmap that will make it clearer how a collection of features are scheduled for release and why those features were chosen. The smaller issues are the detailed todo list for the bigger goal and helps us track progress. :) |
support for nested loops now included https://github.com/makeyourownalgorithmicart/simple.js/wiki/repeat() |
Processing and p5js are designed to be accessible to newcomers to coding, especially artists who have never coded before.
For this reason I make 3 suggestions for language design changes.
They are arrived at as a result of writing (in progress) a book which aims to introduce algorithmic concepts and processing/p5js coding to complete beginners, and also first hand experience of teaching complete beginners.
They are:
I have written a more detailed rationale here: http://makeyourownalgorithmicart.blogspot.co.uk/2017/10/ideas-for-making-processing-even-easier.html
The text was updated successfully, but these errors were encountered: