New tool helps creatives turn ideas into code

Drawing Stars

Finally, Star's draw() method actually draws the star to the canvas. Once again, we're using fill() and ellipse(), although this time we're calling fill() with a grayscale value and an alpha value for transparency. To give the stars a twinkle, the alpha value is determined using p5's noise() function.

This returns the Perlin noise value for the specified coordinates, meaning you get a smooth, fluid sequence of random numbers. For the third parameter, we're passing a time-based value rather than a spatial value, so that the noise will animate over time.

Star.prototype.draw = function() { 
  var alpha = noise(,,
  fill(255, alpha * 255);
    this.position.x, this.position.y,
    this.diameter, this.diameter

That's it for our first sketch! Click and drag to see new stars appear and conform to the hint image.

What's next?

From here, you might add some HTML elements to control variables using the p5.dom add-on or even add sound to the visuals using p5.sound.

We've only scratched the surface of what's possible with p5.js, and with new features and an official editor on the way, there's even more to look forward to. Have fun!

Words: Scott Garner

Scott Garner is an expert in creative technology and interactive design. Follow him on Twitter at @scottgarner. This article first appeared in net magazine issue 261.

Like this? Read this!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.