Skip to content

Commit cdb43be

Browse files
committed
Add new p5js examples
1 parent e7d2eed commit cdb43be

135 files changed

Lines changed: 1429 additions & 1903 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

assets/examples_js/Basics/arrays/Array.js

100644100755
File mode changed.
Lines changed: 25 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,31 @@
1-
/**
2-
* Array 2D.
3-
*
4-
* Demonstrates the syntax for creating a two-dimensional (2D) array.
5-
* Values in a 2D array are accessed through two index values.
6-
* 2D arrays are useful for storing images. In this example, each dot
7-
* is colored in relation to its distance from the center of the image.
8-
*/
1+
let distances;
2+
let maxDistance;
3+
let spacer;
94

10-
float* distances;
11-
float maxDistance;
12-
int spacer;
5+
function setup() {
6+
createCanvas(640, 360);
7+
maxDistance = dist(width / 2, height / 2, width, height);
8+
distances = new Array(width * height);
139

14-
void setup() {
15-
size(640, 360);
16-
maxDistance = dist(width/2, height/2, width, height);
17-
distances = new float[width * height];
18-
for (int y = 0; y < height; y++) {
19-
for (int x = 0; x < width; x++) {
20-
float distance = dist(width/2, height/2, x, y);
21-
distances[x + y * width] = distance / maxDistance * 255;
22-
}
10+
for (let y = 0; y < height; y++) {
11+
for (let x = 0; x < width; x++) {
12+
let distance = dist(width / 2, height / 2, x, y);
13+
distances[x + y * width] = distance / maxDistance * 255;
2314
}
24-
spacer = 10;
25-
strokeWeight(6);
26-
noLoop();
15+
}
16+
17+
spacer = 10;
18+
strokeWeight(6);
19+
noLoop();
2720
}
2821

29-
void draw() {
30-
background(0);
31-
for (int y = 0; y < height; y += spacer) {
32-
for (int x = 0; x < width; x += spacer) {
33-
stroke(distances[x + y * width]);
34-
point(x + spacer/2, y + spacer/2);
35-
}
22+
function draw() {
23+
background(0);
24+
25+
for (let y = 0; y < height; y += spacer) {
26+
for (let x = 0; x < width; x += spacer) {
27+
stroke(distances[x + y * width]);
28+
point(x + spacer / 2, y + spacer / 2);
3629
}
37-
}
30+
}
31+
}
Lines changed: 60 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,71 @@
1-
/**
2-
* Array Objects.
3-
*
4-
* Demonstrates the syntax for creating an array of custom objects.
5-
*/
1+
class Module {
2+
constructor(xOffset, yOffset, x, y, speed, unit) {
3+
this.xOffset = xOffset;
4+
this.yOffset = yOffset;
5+
this.x = x;
6+
this.y = y;
7+
this.unit = unit;
8+
this.xDirection = 1;
9+
this.yDirection = 1;
10+
this.speed = speed;
11+
}
612

7-
struct Module {
8-
int xOffset, yOffset;
9-
float x, y;
10-
int unit;
11-
int xDirection, yDirection;
12-
float speed;
13+
update() {
14+
this.x += this.speed * this.xDirection;
1315

14-
Module() : xOffset(0),yOffset(0),x(0),y(0),unit(0),xDirection(1),yDirection(1),speed(0) {}
15-
Module(int xOffsetTemp, int yOffsetTemp, int xTemp, int yTemp, float speedTemp, int tempUnit)
16-
: xOffset(xOffsetTemp), yOffset(yOffsetTemp), x(xTemp), y(yTemp),
17-
unit(tempUnit), xDirection(1), yDirection(1), speed(speedTemp) {}
18-
19-
void update() {
20-
x += speed * xDirection;
21-
if (x >= unit || x <= 0) {
22-
xDirection *= -1;
23-
x += 1 * xDirection;
24-
y += 1 * yDirection;
25-
}
26-
if (y >= unit || y <= 0) {
27-
yDirection *= -1;
28-
y += 1 * yDirection;
29-
}
16+
if (this.x >= this.unit || this.x <= 0) {
17+
this.xDirection *= -1;
18+
this.x += this.xDirection;
19+
this.y += this.yDirection;
3020
}
3121

32-
void display() {
33-
fill(255);
34-
ellipse(xOffset + x, yOffset + y, 6, 6);
22+
if (this.y >= this.unit || this.y <= 0) {
23+
this.yDirection *= -1;
24+
this.y += this.yDirection;
3525
}
36-
};
26+
}
3727

38-
int unit = 40;
39-
int count;
40-
Module* mods;
28+
display() {
29+
fill(255);
30+
ellipse(this.xOffset + this.x, this.yOffset + this.y, 6, 6);
31+
}
32+
}
4133

42-
void setup() {
43-
size(640, 360);
44-
noStroke();
45-
int wideCount = width / unit;
46-
int highCount = height / unit;
47-
count = wideCount * highCount;
48-
mods = new Module[count];
34+
let unit = 40;
35+
let count;
36+
let mods;
4937

50-
int index = 0;
51-
for (int y = 0; y < highCount; y++) {
52-
for (int x = 0; x < wideCount; x++) {
53-
mods[index++] = Module(x*unit, y*unit, unit/2, unit/2, random(0.05f, 0.8f), unit);
54-
}
55-
}
56-
}
38+
function setup() {
39+
createCanvas(640, 360);
40+
noStroke();
5741

58-
void draw() {
59-
background(0);
60-
for (int i = 0; i < count; i++) {
61-
mods[i].update();
62-
mods[i].display();
42+
let wideCount = floor(width / unit);
43+
let highCount = floor(height / unit);
44+
45+
count = wideCount * highCount;
46+
mods = [];
47+
48+
for (let y = 0; y < highCount; y++) {
49+
for (let x = 0; x < wideCount; x++) {
50+
mods.push(
51+
new Module(
52+
x * unit,
53+
y * unit,
54+
unit / 2,
55+
unit / 2,
56+
random(0.05, 0.8),
57+
unit
58+
)
59+
);
6360
}
61+
}
6462
}
63+
64+
function draw() {
65+
background(0);
66+
67+
for (let i = 0; i < count; i++) {
68+
mods[i].update();
69+
mods[i].display();
70+
}
71+
}

assets/examples_js/Basics/arrays/sketch.properties

100644100755
File mode changed.
Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
1-
2-
/**
3-
* Move Eye.
4-
* by Simon Greenwold.
5-
*
6-
* The camera lifts up (controlled by mouseY) while looking at the same point.
7-
*/
8-
9-
void setup() {
10-
size(640, 360, P3D);
1+
function setup() {
2+
createCanvas(640, 360, WEBGL);
113
fill(204);
124
}
135

14-
void draw() {
6+
function draw() {
157
lights();
168
background(0);
17-
18-
// Change height of the camera with mouseY
19-
camera(30.0, mouseY, 220.0, // eyeX, eyeY, eyeZ
20-
0.0, 0.0, 0.0, // centerX, centerY, centerZ
21-
0.0, 1.0, 0.0); // upX, upY, upZ
22-
9+
10+
camera(
11+
30.0, mouseY - height / 2, 220.0,
12+
0.0, 0.0, 0.0,
13+
0.0, 1.0, 0.0
14+
);
15+
2316
noStroke();
2417
box(90);
18+
2519
stroke(255);
2620
line(-100, 0, 0, 100, 0, 0);
2721
line(0, -100, 0, 0, 100, 0);
2822
line(0, 0, -100, 0, 0, 100);
29-
}
23+
}
Lines changed: 20 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,29 @@
1-
/**
2-
* Perspective.
3-
*
4-
* Move the mouse left and right to change the field of view (fov).
5-
* Click to modify the aspect ratio. The perspective() function
6-
* sets a perspective projection applying foreshortening, making
7-
* distant objects appear smaller than closer ones. The parameters
8-
* define a viewing volume with the shape of truncated pyramid.
9-
* Objects near to the front of the volume appear their actual size,
10-
* while farther objects appear smaller. This projection simulates
11-
* the perspective of the world more accurately than orthographic projection.
12-
* The version of perspective without parameters sets the default
13-
* perspective and the version with four parameters allows the programmer
14-
* to set the area precisely.
15-
*/
16-
17-
void setup() {
18-
size(640, 360, P3D);
1+
function setup() {
2+
createCanvas(640, 360, WEBGL);
193
noStroke();
204
}
215

22-
void draw() {
6+
function draw() {
237
lights();
248
background(0);
25-
float cameraY = height/2.0;
26-
float fov = mouseX/float(width) * PI/2;
27-
float cameraZ = cameraY / tan(fov / 2.0);
28-
float aspect = float(width)/float(height);
29-
if (_mousePressed) {
30-
aspect = aspect / 2.0;
9+
10+
let cameraY = height / 2;
11+
let fov = (mouseX / width) * PI / 2;
12+
let cameraZ = cameraY / tan(fov / 2);
13+
let aspect = width / height;
14+
15+
if (mouseIsPressed) {
16+
aspect /= 2;
3117
}
32-
perspective(fov, aspect, cameraZ/10.0, cameraZ*10.0);
33-
34-
translate(width/2+30, height/2, 0);
35-
rotateX(-PI/6);
36-
rotateY(PI/3 + mouseY/float(height) * PI);
18+
19+
perspective(fov, aspect, cameraZ / 10, cameraZ * 10);
20+
21+
translate(30, 0, 0);
22+
rotateX(-PI / 6);
23+
rotateY(PI / 3 + (mouseY / height) * PI);
24+
3725
box(45);
26+
3827
translate(0, 0, -50);
3928
box(30);
40-
}
29+
}
Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,36 @@
1-
/**
2-
* Perspective vs. Ortho
3-
*
4-
* Move the mouse left to right to change the "far"
5-
* parameter for the perspective() and ortho() functions.
6-
* This parameter sets the maximum distance from the
7-
* origin away from the viewer and will clip the geometry.
8-
* Click a mouse button to switch between the perspective and
9-
* orthographic projections.
10-
*/
1+
let showPerspective = false;
112

12-
13-
bool showPerspective = false;
14-
15-
void setup() {
16-
size(600, 360, P3D);
17-
noFill();
3+
function setup() {
4+
createCanvas(600, 360, WEBGL);
185
fill(255);
196
noStroke();
207
}
218

22-
void draw() {
9+
function draw() {
2310
lights();
2411
background(0);
25-
float far = map(mouseX, 0, width, 120, 400);
26-
if (showPerspective == true) {
27-
perspective(PI/3.0, float(width)/float(height), 10, far);
12+
13+
let far = map(mouseX, 0, width, 120, 400);
14+
15+
if (showPerspective) {
16+
perspective(PI / 3, width / height, 10, far);
2817
} else {
29-
ortho(-width/2.0, width/2.0, -height/2.0, height/2.0, 10, far);
18+
ortho(
19+
-width / 2,
20+
width / 2,
21+
-height / 2,
22+
height / 2,
23+
10,
24+
far
25+
);
3026
}
31-
translate(width/2, height/2, 0);
32-
rotateX(-PI/6);
33-
rotateY(PI/3);
27+
28+
rotateX(-PI / 6);
29+
rotateY(PI / 3);
30+
3431
box(180);
3532
}
3633

37-
void mousePressed() {
34+
function mousePressed() {
3835
showPerspective = !showPerspective;
39-
}
40-
36+
}

0 commit comments

Comments
 (0)