Basic JavaScript Tutorial 1

mySketch
xxxxxxxxxx
 
// x-----------------------------------------------------------------------
// This code is an example from the Processing p5.js tutorial series at:
// https://github.com/processing/p5.js/wiki
// See the JavaScript Basics tutorial on that site. 
// ------------------------------------------------------------------------
​
// This data at the top is global to the app.
​
const numShapes = 30;
const baseRadius = 5;
let shapes = [];        // Declare array to hold shape objects
​
function setup() {      // Runs once at beginning of app
​
  createCanvas(800, 600);
  
  // Use HSB colors in our app, so we can get easy changes of just color (hue).
  colorMode(HSB, 100);   // H,S,B will be in range 0 - 100
​
  // Create each object
​
  for (let i = 0; i < numShapes; i++) {
    let x = random(1, width - 2);       // Centre our circle randomly somewhere in the window
    let y = random(1, height - 2);
    shapes[i] = new Shape( x, y );
  }
}
​
function draw() {
​
  background(0, 0, 5, 10);      // Dark grey with a small alpha value, this achieves a blurring effect.
  noStroke();                   // No outline of shapes
​
  // Update some controls for our shapes.
​
  let cycle = 200;  // Change the shapes appearance over a cycle of n frames
​
  let percent = (frameCount % cycle) / cycle;     // 0.0 to 0.999
  let percent2 = percent;                         
  if (percent > 0.5 ) { percent2 = 1 - percent }  // 0.0 to 0.5, then back down
​
  let radius = baseRadius + 30 * percent2;          // Grow and shrink the radius
​
  // Update and display each shape in the array
​
  for (let i = 0; i < shapes.length; i++) {
    shapes[i].setRadius(radius);   
    shapes[i].followMouse(0.008);   // rate to follow mouse at
    shapes[i].setColor(percent);    // change hue as well
    shapes[i].display();            // draw it
  }
}
​
function Shape(xpos, ypos) {
​
  // Set initial values for properties, as supplied in the constructor, ie the New() call
​
  this.xpos = xpos;
  this.ypos = ypos;
  this.hue = 0;                     // value not important, just good practice to init to something
​
// Some methods to operate on an instance of Shape
​
// Method to set the radius
​
  this.setRadius = function(rad) {
    this.radius = rad;
  }
​
// Method to move the shape's position towards the cursor position.
// Don't move if closer than a certain distance.
​
  this.followMouse = function(fraction) {
​
    let xdiff = mouseX - this.xpos;
    let ydiff = mouseY - this.ypos;
​
    let dist = Math.sqrt(xdiff * xdiff + ydiff * ydiff);
​
    if ( dist > 100 ) {
      this.xpos += xdiff * fraction;
      this.ypos += ydiff * fraction;
    }
  }
​
​
// Method to reposition the shapes randomly. This is only because our simple
// follow-the-cursor code eventually clumps all the shapes together :=(
​
  this.resetPos = function () {
    this.xpos = random(1, width - 2);
    this.ypos = random(1, height - 2);
  }
​
// Method to set color of the shape. Use the HSB system, and vary hue from 0.0 to 1.0
​
  this.setColor = function(hue) { 
    this.hue = 100 * hue;
  }
​
// Method to draw the shape to the screen. This is it! draw those pixels.
​
  this.display = function() {
    fill(this.hue, 100, 100);
    ellipse(this.xpos, this.ypos, this.radius, this.radius );  // a solid circle
  }
}
​
// Separate callback function for user keystrokes.
// Allow any key to reset the app.
​
function keyTyped() {
​
  for (let i = 0; i < numShapes; i++) {
    shapes[i].resetPos();
  }
}