Saturday 31 March 2018

P5 Simple.js - Update

Since my last post announcing that I started work on simple.js to try to simplify p5js for newcomers to coding, I've made a fair bit of progress.


simple.js

The library is on GitHub:


The library is documented on the wiki where I write a rationale for the feature/change and example usage:




Using simple.js

Simple.js is included in the html just like another other p5js libraries. The key is to include it after p5.js is referenced.

here's an example index.html:

<!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.js"></script>
  </head>
  <body>
  </body>
</html>


Circle, Square

The library provides a simple circle() command:

circle(x, y, diameter)

Some basic research suggested newcomers are more comfortable with diameter as a concept than radius.

Similarly a square() command is provided too:

square(x, y, size)


Integer Random Numbers

The library provides a randomNumber() function to return integer values. There are two modes of use:

randomNumber(n)

which returns a random integer between 0 and n, including 0 and n.  The second mode is:

randomNumber(a,b)

which returns an integer number between a and b, including a and b.


Easy Repetition

One of the most difficult things for new coders is the for loop for repeating instructions. For simple requirements it is unnecessarily complicated.

It isn't easy to implement something like Logo's REPEAT 5 [... ] in Javascript so a compromise  was required.

There are 2 forms of the repeat() command.

repeat(n,my_function)

This repeats a function my_function, n times. Of course if there is a need for more, such as using loop counters, then the for loop can be used.

repeat(start, end, step, my_function)

This calls a supplied my_function(x), passing it a parameter x which starts at start, increments by step, until it reaches end. The parameter x will include both the start and end values. The function must accept a parameter, but can choose to ignore it.


Friendlier Defaults

Some of the p5js defaults are not ideal for newcomers. It would have been

Here are the implemented changes so far:

  • noLoop() - looping draw() isn't expected by new coders, and causes confusion, for example when drawing with randomness
  • strokeWeight(2) - the default stroke is very thin
  • background('lightgrey') - an invisible canvas isn't as helpful as a visible one
  • fill('yellow') - filled shapes are more familiar than transparent ones



More

The library will be updated as obstacles and barriers in p5js are observed.

No comments:

Post a Comment