p5: Noise vs Random vs Oscillation

A comparison between use of random noise and harmonic oscillation using trigonometry.


var a = 0;
var n = 0;
var ySin;
var yNoise;
var yRandom;
var yRandomWalk = 250;

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

}

function draw() {
background(0);
fill(255);
noStroke();

yRandom = random(-50, 50);
ellipse(100, 250+yRandom, 10, 10);

yRandomWalk += random(+2, -2);
ellipse(200, yRandomWalk, 10, 10);

n += 0.01;
yNoise = (noise(n)-0.5)*100;
ellipse(300, 250+yNoise, 10, 10);

a += 1;
ySin = sin(radians(a))*100;
ellipse(400, 250+ySin, 10, 10);

}

Let’s look at the noise more broadly:
http://compform.net/noise/

Trigonometry

Trigonometric functions like sine, cosine, tangent etc… are used to solve a variety of common problems in games and visual application. For now we are analyzing their application in rotational symmetry and for the creation of harmonic oscillation patterns.

var numObjects = 10;
var centerX;
var centerY;
var angle = 0;
var distance = 100;

function setup() {
createCanvas(600, 600);
centerX = width/2;
centerY = height/2;

noStroke();
ellipseMode(CENTER);
}

function draw() {
background(0);

//divide the circle 360 degrees according to the number of objects
var angleObject = 360/numObjects;

for (var i=0;i < numObjects; i++) {
//you can have a circular motion if you sum the same angle to all objects
//angle = frameCount;
//and the speed can be also linked to the object number
//angle = frameCount*i / 2;

//fun with trigonometry and oscillations
//distance = sin(radians(frameCount))*150;

//the sin(angle) cos(angle) has to be
//multiplied by the distance from the center
//because trigonometric functions assume a circle with radius=1
//centerX and centerY is the offset from the top left corner
//remember to convert in radians
var posX = centerX + distance *cos( radians(angleObject*i + angle) );
var posY = centerY + distance *sin( radians(angleObject*i + angle) );

fill(255);
ellipse(posX, posY, 10, 10);
}
}

Make an animated mandala/hypno-disc composition using the rotational symmetry algorithms below.

Bonus: use nested for-loops to give the illusion of a 3D tunnel.