P5.js w3_06 RuleBased system

w3_06 "rule-based system: final version"

by schrodingers

HTML

<script src="//cdn.jsdelivr.net/p5.js/0.3.9/p5.min.js"></script>

JavaScript

/*
 * @description This sketch draws a series of moving Elements (circles)
 * according to the following rules:
 * - start from a random position and move in a constant random direction
 * - if the point reaches the boundary of the screen move in the opposite
 *   direction with new velocity
 * - if the circles intersect then draw a line connecting their centres,
 *   colouring the line based on the circle being odd or even
 *
 * Creative Coding
 * Week 3, 06 - rule-based system: final version
 * by Indae Hwang and Jon McCormack
 * Copyright (c) 2014 Monash University
 *
 */

var
  // Position
  x,
  y,
  // Change per frame
  xInc,
  yInc,
  // Number of elements
  numArray,
  // If distance between elements < proximity then draw a line between them
  proximity;

function setup() {

  var i;

  createCanvas( 500, 500 );

  numArray = 50;

  // Allocate arrays
  x= new Array( numArray );
  y= new Array( numArray );
  xInc= new Array( numArray );
  yInc= new Array( numArray );

  // Influence distance
  proximity = 100;

  // Random starting position and direction
  for ( i = 0; i < numArray; i++ ) {

    x[i] = random( width );
    y[i] = random( height );
    xInc[i] = random( -1, 1 );
    yInc[i] = random( -1, 1 );
  }

  strokeWeight( 2 );
}

function draw() {

  var i,
    j,
    currDist;

  // Iterate over each point
  for ( i = 0; i < numArray; i++ ) {

    x[i] += xInc[i];
    y[i] += yInc[i];

    // Bounce off the sides of the window
    if ( x[i] > width || x[i] < 0 ) {

      xInc[i] = xInc[i] > 0 ? -random( 1 ) : random( 1 );
    }

    if ( y[i] > height || y[i] < 0 ) {

      yInc[i] = yInc[i] > 0 ? -random( 1 ) : random( 1 );
    }
  }

  for ( i = 0; i < numArray; i++ ) {

    for ( j = 0; j < i; j++ ) {

      currDist = dist( x[i], y[i], x[j], y[j] );
      if ( currDist < proximity ) {

        if ( i % 2 == 0 || j % 2 == 0 ) {

          stroke( 255, 10 );
        } else {

          stroke( 0, 10 );
        }

        line( x[i], y[i], x[j],...