example p5.js sketch by dribnet

p5.js hello world

This is the canonical p5.js “Make Circles” sketch formatted as a p5.js block.

index.html

<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.1/p5.js"></script>
    <script language="javascript" type="text/javascript" src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
</head>

<body style="background-color:white">
</body>

sketch.js

function setup () {
  createCanvas(960, 500);
}

function draw () {
  if (mouseIsPressed) {
    fill(0);
  }
  else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}