Skip to main content

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!

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began over a decade ago. The current website team consists of five people: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, and Staff Writer Amelia Bamsey. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.