Processing has a noble aim to be accessible to as many people as possible. This is important, not just because Processing wants to raise the number of users, but because digital literacy, the ability to code, and algorithmic thinking are important in this pervasively digital era.
In my (limited) teaching experience I found some key issues that were barriers to new or reticent coders:
- No circle command. The word ellipse is enough to scare some people away. It just isn't as simple and friendly as circle. Children know about circles. Not every child knows about ellipses, never mind having to think about an ellipse as a more general case of a circle.
- No square command. Again, children know what a square is, but the idea of a rectangle as a more general square is just too much to think about in those already overloaded early phases of learning.
- No simple way to make random integers. When asked to think of a random number, most people will pick a whole numbers. Taking the next steps to using random numbers, again most people will naturally think in terms of whole numbers. Having to deal with floats and casting them to integers is too much to think about if introduced too early.
- Loops are far too complicated. Compared to Logo's REPEAT command, the heavy boilerplate of the C-derived javascript for loop is a huge barrier to many new learners. In the last few weeks I've been teaching university students and they too have problems with for loops.
Solution: Simple.js
A discussion on the p5js GitHub on the usability of p5js for non-technical newcomers and younger learners (age 7-10) didn't convince many of the core developers:But one person made a great suggestion - instead of trying to get the core developers to change p5js, why not create a new library. That way the core developers are happy, and anyone who wants to use the library can.
I've made a start:
Currently this library implements the following drawing functions.
- circle(x,y, r) - draws a circle centred at (x,y) with a radius r. Note that the built in ellipse() command expects a diameter not a radius.
- square(x,y,w) - draws a square at (x,y) with sides of width w.
There is also a helper function:
- randomNumber(n) - picks a whole number (integer) between 0 and n. Unlike the built in random() function, this one includes n as a possible result.
- randomNumber(a,b) - picks a whole number (integer) between a and b. Unlike the built in random() function, this one includes a and b as possible results.
Repeat Loop
Introducing a new kind of code structure is more of a challenge that I'm still working on.Examples and Tests
Example sketches are included showing how to use the new functions.These also act like tests too.
Make sure your index.html refers to the correct example sketch, they're not named as the default sketch.js. For example, the index.html for referring to the circle() example sketch is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../simple.js"></script>
<script src="sketch_circle.js"></script>
</head>
<body>
</body>
</html>
Here's an example sketch comparing random() and randomNumber():
- The top row of circles have horizontal position based on random(). You can see they're properly random.
- The middle row have circles based on randomNumber(7) which only returns numbers 0, 1, 2, 3, 4, 5, 6 or 7.
- The bottom row have circles based on randomNumber(3, 5) which only returns numbers 3, 4 or 5.
No comments:
Post a Comment