Skip to content

Commit 58ee711

Browse files
shiffmanshiffman
committed
#154 math examples ported to p5
1 parent b289117 commit 58ee711

19 files changed

Lines changed: 234 additions & 219 deletions

File tree

‎content/examples_p5/Basics/Math/AdditiveWave/AdditiveWave.js‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,49 @@
55
* Create a more complex wave by adding two waves together.
66
*/
77

8-
int xspacing = 8; // How far apart should each horizontal location be spaced
9-
int w; // Width of entire wave
10-
int maxwaves = 4; // total # of waves to add together
8+
var xspacing = 8; // How far apart should each horizontal location be spaced
9+
var w; // Width of entire wave
10+
var maxwaves = 4; // total # of waves to add together
1111

12-
float theta = 0.0;
13-
float[] amplitude = new float[maxwaves]; // Height of wave
14-
float[] dx = new float[maxwaves]; // Value for incrementing X, to be calculated as a function of period and xspacing
15-
float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
12+
var theta = 0.0;
13+
var amplitude = new Array(maxwaves); // Height of wave
14+
var dx = new Array(maxwaves); // Value for incrementing X, to be calculated as a function of period and xspacing
15+
var yvalues; // Using an array to store height values for the wave (not entirely necessary)
1616

17-
void setup() {
18-
size(640, 360);
17+
function setup() {
18+
createCanvas(640, 360);
1919
frameRate(30);
2020
colorMode(RGB, 255, 255, 255, 100);
2121
w = width + 16;
2222

23-
for (int i = 0; i < maxwaves; i++) {
23+
for (var i = 0; i < maxwaves; i++) {
2424
amplitude[i] = random(10,30);
25-
float period = random(100,300); // How many pixels before the wave repeats
25+
var period = random(100,300); // How many pixels before the wave repeats
2626
dx[i] = (TWO_PI / period) * xspacing;
2727
}
2828

29-
yvalues = new float[w/xspacing];
29+
yvalues = new Array(w/xspacing);
3030
}
3131

32-
void draw() {
32+
function draw() {
3333
background(0);
3434
calcWave();
3535
renderWave();
3636
}
3737

38-
void calcWave() {
38+
function calcWave() {
3939
// Increment theta (try different values for 'angular velocity' here
4040
theta += 0.02;
4141

4242
// Set all height values to zero
43-
for (int i = 0; i < yvalues.length; i++) {
43+
for (var i = 0; i < yvalues.length; i++) {
4444
yvalues[i] = 0;
4545
}
4646

4747
// Accumulate wave height values
48-
for (int j = 0; j < maxwaves; j++) {
49-
float x = theta;
50-
for (int i = 0; i < yvalues.length; i++) {
48+
for (var j = 0; j < maxwaves; j++) {
49+
var x = theta;
50+
for (var i = 0; i < yvalues.length; i++) {
5151
// Every other wave is cosine instead of sine
5252
if (j % 2 == 0) yvalues[i] += sin(x)*amplitude[j];
5353
else yvalues[i] += cos(x)*amplitude[j];
@@ -56,13 +56,13 @@ void calcWave() {
5656
}
5757
}
5858

59-
void renderWave() {
59+
function renderWave() {
6060
// A simple way to draw the wave with an ellipse at each location
6161
noStroke();
6262
fill(255,50);
6363
ellipseMode(CENTER);
64-
for (int x = 0; x < yvalues.length; x++) {
65-
ellipse(x*xspacing,width/2+yvalues[x],16,16);
64+
for (var x = 0; x < yvalues.length; x++) {
65+
ellipse(x*xspacing,height/2+yvalues[x],16,16);
6666
}
6767
}
6868

‎content/examples_p5/Basics/Math/Arctangent/Arctangent.js‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@
66
* to the cursor.
77
*/
88

9-
Eye e1, e2, e3;
9+
var e1, e2, e3;
1010

11-
void setup() {
12-
size(640, 360);
11+
function setup() {
12+
createCanvas(640, 360);
1313
noStroke();
1414
e1 = new Eye( 250, 16, 120);
1515
e2 = new Eye( 164, 185, 80);
1616
e3 = new Eye( 420, 230, 220);
1717
}
1818

19-
void draw() {
19+
function draw() {
2020
background(102);
2121

2222
e1.update(mouseX, mouseY);
@@ -28,30 +28,25 @@ void draw() {
2828
e3.display();
2929
}
3030

31-
class Eye {
32-
int x, y;
33-
int size;
34-
float angle = 0.0;
35-
36-
Eye(int tx, int ty, int ts) {
37-
x = tx;
38-
y = ty;
39-
size = ts;
40-
}
41-
42-
void update(int mx, int my) {
43-
angle = atan2(my-y, mx-x);
31+
function Eye(tx, ty, ts) {
32+
this.x = tx;
33+
this.y = ty;
34+
this.size = ts;
35+
this.angle = 0.0;
36+
37+
this.update = function(mx, my) {
38+
this.angle = atan2(my-this.y, mx-this.x);
4439
}
4540

46-
void display() {
47-
pushMatrix();
48-
translate(x, y);
41+
this.display = function() {
42+
push();
43+
translate(this.x, this.y);
4944
fill(255);
50-
ellipse(0, 0, size, size);
51-
rotate(angle);
45+
ellipse(0, 0, this.size, this.size);
46+
rotate(this.angle);
5247
fill(153, 204, 0);
53-
ellipse(size/4, 0, size/2, size/2);
54-
popMatrix();
48+
ellipse(this.size/4, 0, this.size/2, this.size/2);
49+
pop();
5550
}
5651
}
5752

‎content/examples_p5/Basics/Math/Distance1D/Distance1D.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,28 @@
55
* speed and direction of the moving shapes.
66
*/
77

8-
float xpos1;
9-
float xpos2;
10-
float xpos3;
11-
float xpos4;
12-
int thin = 8;
13-
int thick = 36;
8+
var xpos1;
9+
var xpos2;
10+
var xpos3;
11+
var xpos4;
12+
var thin = 8;
13+
var thick = 36;
1414

15-
void setup()
15+
function setup()
1616
{
17-
size(640, 360);
17+
createCanvas(640, 360);
1818
noStroke();
1919
xpos1 = width/2;
2020
xpos2 = width/2;
2121
xpos3 = width/2;
2222
xpos4 = width/2;
2323
}
2424

25-
void draw()
25+
function draw()
2626
{
2727
background(0);
2828

29-
float mx = mouseX * 0.4 - width/5.0;
29+
var mx = mouseX * 0.4 - width/5.0;
3030

3131
fill(102);
3232
rect(xpos2, 0, thick, height/2);

‎content/examples_p5/Basics/Math/Distance2D/Distance2D.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,21 @@
66
* size proportionally.
77
*/
88

9-
float max_distance;
9+
var max_distance;
1010

11-
void setup() {
12-
size(640, 360);
11+
function setup() {
12+
createCanvas(640, 360);
1313
noStroke();
1414
max_distance = dist(0, 0, width, height);
1515
}
1616

17-
void draw()
17+
function draw()
1818
{
1919
background(0);
2020

21-
for(int i = 0; i <= width; i += 20) {
22-
for(int j = 0; j <= height; j += 20) {
23-
float size = dist(mouseX, mouseY, i, j);
21+
for(var i = 0; i <= width; i += 20) {
22+
for(var j = 0; j <= height; j += 20) {
23+
var size = dist(mouseX, mouseY, i, j);
2424
size = size/max_distance * 66;
2525
ellipse(i, j, size, size);
2626
}

‎content/examples_p5/Basics/Math/DoubleRandom/DoubleRandom.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@
66
* to create an irregular sawtooth line.
77
*/
88

9-
int totalPts = 300;
10-
float steps = totalPts + 1;
9+
var totalPts = 300;
10+
var steps = totalPts + 1;
1111

12-
void setup() {
13-
size(640, 360);
12+
function setup() {
13+
createCanvas(640, 360);
1414
stroke(255);
1515
frameRate(1);
1616
}
1717

18-
void draw() {
18+
function draw() {
1919
background(0);
20-
float rand = 0;
21-
for (int i = 1; i < steps; i++) {
20+
var rand = 0;
21+
for (var i = 1; i < steps; i++) {
2222
point( (width/steps) * i, (height/2) + random(-rand, rand) );
2323
rand += random(-5, 5);
2424
}

‎content/examples_p5/Basics/Math/Graphing2DEquation/Graphing2DEquation.js‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,37 @@
77
* where n is a function of horizontal mouse location.
88
*/
99

10-
void setup() {
11-
size(640, 360);
10+
function setup() {
11+
createCanvas(640, 360);
12+
// Temporary-ish fix for retina machines
13+
devicePixelScaling(false);
14+
1215
}
1316

14-
void draw() {
17+
function draw() {
1518
loadPixels();
16-
float n = (mouseX * 10.0) / width;
17-
float w = 16.0; // 2D space width
18-
float h = 16.0; // 2D space height
19-
float dx = w / width; // Increment x this amount per pixel
20-
float dy = h / height; // Increment y this amount per pixel
21-
float x = -w/2; // Start x at -1 * width / 2
22-
for (int i = 0; i < width; i++) {
23-
float y = -h/2; // Start y at -1 * height / 2
24-
for (int j = 0; j < height; j++) {
25-
float r = sqrt((x*x) + (y*y)); // Convert cartesian to polar
26-
float theta = atan2(y,x); // Convert cartesian to polar
19+
var n = (mouseX * 10.0) / width;
20+
var w = 16.0; // 2D space width
21+
var h = 16.0; // 2D space height
22+
var dx = w / width; // Increment x this amount per pixel
23+
var dy = h / height; // Increment y this amount per pixel
24+
var x = -w/2; // Start x at -1 * width / 2
25+
for (var i = 0; i < width; i++) {
26+
var y = -h/2; // Start y at -1 * height / 2
27+
for (var j = 0; j < height; j++) {
28+
var r = sqrt((x*x) + (y*y)); // Convert cartesian to polar
29+
var theta = atan2(y,x); // Convert cartesian to polar
2730
// Compute 2D polar coordinate function
28-
float val = sin(n*cos(r) + 5 * theta); // Results in a value between -1 and 1
29-
//float val = cos(r); // Another simple function
30-
//float val = sin(theta); // Another simple function
31+
var val = sin(n*cos(r) + 5 * theta); // Results in a value between -1 and 1
32+
//var val = cos(r); // Another simple function
33+
//var val = sin(theta); // Another simple function
3134
// Map resulting vale to grayscale value
32-
pixels[i+j*width] = color((val + 1.0) * 255.0/2.0); // Scale to between 0 and 255
35+
var loc = (i + j*width)*4;
36+
var b = map(val, -1, 1, 0, 255); // Scale to between 0 and 255
37+
pixels[loc] = b;
38+
pixels[loc+1] = b;
39+
pixels[loc+2] = b;
40+
pixels[loc+3] = 255; // Scale to between 0 and 255
3341
y += dy; // Increment y
3442
}
3543
x += dx; // Increment x

‎content/examples_p5/Basics/Math/IncrementDecrement/IncrementDecrement.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55
* Writing "a--" is equivalent to "a = a - 1".
66
*/
77

8-
int a;
9-
int b;
10-
boolean direction;
8+
var a;
9+
var b;
10+
var direction;
1111

12-
void setup() {
13-
size(640, 360);
12+
function setup() {
13+
createCanvas(640, 360);
1414
colorMode(RGB, width);
1515
a = 0;
1616
b = width;
1717
direction = true;
1818
frameRate(30);
1919
}
2020

21-
void draw() {
21+
function draw() {
2222
a++;
2323
if(a > width) {
2424
a = 0;

‎content/examples_p5/Basics/Math/Interpolate/Interpolate.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
* This is the same as the Easing under input only with lerp() instead.
1010
*/
1111

12-
float x;
13-
float y;
12+
var x = 0;
13+
var y = 0;
1414

15-
void setup() {
16-
size(640, 360);
15+
function setup() {
16+
createCanvas(640, 360);
1717
noStroke();
1818
}
1919

20-
void draw() {
20+
function draw() {
2121
background(51);
2222

2323
// lerp() calculates a number between two numbers at a specific increment.

‎content/examples_p5/Basics/Math/Noise1D/Noise1D.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,25 @@
44
* Using 1D Perlin Noise to assign location.
55
*/
66

7-
float xoff = 0.0;
8-
float xincrement = 0.01;
7+
var xoff = 0.0;
8+
var xincrement = 0.01;
99

10-
void setup() {
11-
size(640, 360);
10+
function setup() {
11+
createCanvas(640, 360);
1212
background(0);
1313
noStroke();
1414
}
1515

16-
void draw()
16+
function draw()
1717
{
1818
// Create an alpha blended background
1919
fill(0, 10);
2020
rect(0,0,width,height);
2121

22-
//float n = random(0,width); // Try this line instead of noise
22+
//var n = random(0,width); // Try this line instead of noise
2323

2424
// Get a noise value based on xoff and scale it according to the window's width
25-
float n = noise(xoff)*width;
25+
var n = noise(xoff)*width;
2626

2727
// With each cycle, increment xoff
2828
xoff += xincrement;

0 commit comments

Comments
 (0)