Skip to content

Commit e5b8e0a

Browse files
committed
raw files from archive
1 parent 9e05f6d commit e5b8e0a

File tree

1,406 files changed

+878931
-0
lines changed

Some content is hidden

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

1,406 files changed

+878931
-0
lines changed

001_StarField/P5/Star.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for: https://youtu.be/17WoOqgXsRM
5+
6+
function Star() {
7+
this.x = random(-width, width);
8+
this.y = random(-height, height);
9+
this.z = random(width);
10+
this.pz = this.z;
11+
12+
this.update = function() {
13+
this.z = this.z - speed;
14+
if (this.z < 1) {
15+
this.z = width;
16+
this.x = random(-width, width);
17+
this.y = random(-height, height);
18+
this.pz = this.z;
19+
}
20+
};
21+
22+
this.show = function() {
23+
fill(255);
24+
noStroke();
25+
26+
var sx = map(this.x / this.z, 0, 1, 0, width);
27+
var sy = map(this.y / this.z, 0, 1, 0, height);
28+
29+
var r = map(this.z, 0, width, 16, 0);
30+
ellipse(sx, sy, r, r);
31+
32+
var px = map(this.x / this.pz, 0, 1, 0, width);
33+
var py = map(this.y / this.pz, 0, 1, 0, height);
34+
35+
this.pz = this.z;
36+
37+
stroke(255);
38+
line(px, py, sx, sy);
39+
};
40+
}

001_StarField/P5/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>StarField_p5.js</title>
6+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
7+
8+
9+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js"></script>
10+
11+
<script type="text/javascript" src="sketch.js"></script>
12+
<script type="text/javascript" src="Star.js"></script>
13+
14+
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
15+
</head>
16+
<body>
17+
</body>
18+
</html>

001_StarField/P5/sketch.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for: https://youtu.be/17WoOqgXsRM
5+
6+
let stars = [];
7+
8+
let speed;
9+
10+
function setup() {
11+
createCanvas(600, 600);
12+
for (let i = 0; i < 800; i++) {
13+
stars[i] = new Star();
14+
}
15+
}
16+
17+
function draw() {
18+
speed = map(mouseX, 0, width, 0, 50);
19+
background(0);
20+
translate(width / 2, height / 2);
21+
for (let i = 0; i < stars.length; i++) {
22+
stars[i].update();
23+
stars[i].show();
24+
}
25+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for: https://youtu.be/17WoOqgXsRM
5+
6+
// I create an array named "stars",
7+
// it will be filled with 800 elements made with the Star() class.
8+
Star[] stars = new Star[800];
9+
10+
// I create a variable "speed", it'll be useful to control the speed of stars.
11+
float speed;
12+
13+
void setup() {
14+
size(600, 600);
15+
// I fill the array with a for loop;
16+
// running 800 times, it creates a new star using the Star() class.
17+
for (int i = 0; i < stars.length; i++) {
18+
stars[i] = new Star();
19+
}
20+
}
21+
22+
void draw() {
23+
// i link the value of the speed variable to the mouse position.
24+
speed = map(mouseX, 0, width, 0, 50);
25+
26+
background(0);
27+
// I shift the entire composition,
28+
// moving its center from the top left corner to the center of the canvas.
29+
translate(width/2, height/2);
30+
// I draw each star, running the "update" method to update its position and
31+
// the "show" method to show it on the canvas.
32+
for (int i = 0; i < stars.length; i++) {
33+
stars[i].update();
34+
stars[i].show();
35+
}
36+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for: https://youtu.be/17WoOqgXsRM
5+
6+
// I create a "Star" Class.
7+
class Star {
8+
// I create variables to specify the x and y of each star.
9+
float x;
10+
float y;
11+
// I create "z", a variable I'll use in a formula to modify the stars position.
12+
float z;
13+
14+
// I create an other variable to store the previous value of the z variable.
15+
// (the value of the z variable at the previous frame).
16+
float pz;
17+
18+
Star() {
19+
// I place values in the variables
20+
x = random(-width/2, width/2);
21+
// note: height and width are the same: the canvas is a square.
22+
y = random(-height/2, height/2);
23+
// note: the z value can't exceed the width/2 (and height/2) value,
24+
// beacuse I'll use "z" as divisor of the "x" and "y",
25+
// whose values are also between "0" and "width/2".
26+
z = random(width/2);
27+
// I set the previous position of "z" in the same position of "z",
28+
// which it's like to say that the stars are not moving during the first frame.
29+
pz = z;
30+
}
31+
32+
void update() {
33+
// In the formula to set the new stars coordinates
34+
// I'll divide a value for the "z" value and the outcome will be
35+
// the new x-coordinate and y-coordinate of the star.
36+
// Which means if I decrease the value of "z" (which is a divisor),
37+
// the outcome will be bigger.
38+
// Wich means the more the speed value is bigger, the more the "z" decrease,
39+
// and the more the x and y coordinates increase.
40+
// Note: the "z" value is the first value I updated for the new frame.
41+
z = z - speed;
42+
// when the "z" value equals to 1, I'm sure the star have passed the
43+
// borders of the canvas( probably it's already far away from the borders),
44+
// so i can place it on more time in the canvas, with new x, y and z values.
45+
// Note: in this way I also avoid a potential division by 0.
46+
if (z < 1) {
47+
z = width/2;
48+
x = random(-width/2, width/2);
49+
y = random(-height/2, height/2);
50+
pz = z;
51+
}
52+
}
53+
54+
void show() {
55+
fill(255);
56+
noStroke();
57+
58+
// with theese "map", I get the new star positions
59+
// the division x / z get a number between 0 and a very high number,
60+
// we map this number (proportionally to a range of 0 - 1), inside a range of 0 - width/2.
61+
// In this way we are sure the new coordinates "sx" and "sy" move faster at each frame
62+
// and which they finish their travel outside of the canvas (they finish when "z" is less than a).
63+
64+
float sx = map(x / z, 0, 1, 0, width/2);
65+
float sy = map(y / z, 0, 1, 0, height/2);;
66+
67+
// I use the z value to increase the star size between a range from 0 to 16.
68+
float r = map(z, 0, width/2, 16, 0);
69+
ellipse(sx, sy, r, r);
70+
71+
// Here i use the "pz" valute to get the previous position of the stars,
72+
// so I can draw a line from the previous position to the new (current) one.
73+
float px = map(x / pz, 0, 1, 0, width/2);
74+
float py = map(y / pz, 0, 1, 0, height/2);
75+
76+
// Placing here this line of code, I'm sure the "pz" value are updated after the
77+
// coordinates are already calculated; in this way the "pz" value is always equals
78+
// to the "z" value of the previous frame.
79+
pz = z;
80+
81+
stroke(255);
82+
line(px, py, sx, sy);
83+
84+
}
85+
}

002_MengerSponge/P5/box.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for this video: https://youtu.be/LG8ZK-rRkXo
5+
6+
function Box(x, y, z, r) {
7+
this.pos = createVector(x, y, z);
8+
this.r = r;
9+
10+
this.generate = function() {
11+
let boxes = [];
12+
for (let x = -1; x < 2; x++) {
13+
for (let y = -1; y < 2; y++) {
14+
for (let z = -1; z < 2; z++) {
15+
let sum = abs(x) + abs(y) + abs(z);
16+
let newR = this.r / 3;
17+
if (sum > 1) {
18+
let b = new Box(
19+
this.pos.x + x * newR,
20+
this.pos.y + y * newR,
21+
this.pos.z + z * newR,
22+
newR
23+
);
24+
boxes.push(b);
25+
}
26+
}
27+
}
28+
}
29+
return boxes;
30+
};
31+
32+
this.show = function() {
33+
push();
34+
translate(this.pos.x, this.pos.y, this.pos.z);
35+
box(this.r);
36+
pop();
37+
};
38+
}

002_MengerSponge/P5/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MengerSponge_p5.js</title>
6+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
7+
8+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js"></script>
9+
10+
<script type="text/javascript" src="sketch.js"></script>
11+
<script type="text/javascript" src="box.js"></script>
12+
13+
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
14+
</head>
15+
<body>
16+
</body>
17+
</html>

002_MengerSponge/P5/sketch.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for this video: https://youtu.be/LG8ZK-rRkXo
5+
6+
var a = 0;
7+
8+
var sponge = [];
9+
10+
function setup() {
11+
createCanvas(400, 400, WEBGL);
12+
// as of p5.js 0.6.0, normal material is no longer the default and
13+
// has to be explicitly selected.
14+
normalMaterial();
15+
16+
// An array of Box objects
17+
// Star with one
18+
var b = new Box(0, 0, 0, 200);
19+
sponge.push(b);
20+
}
21+
22+
function mousePressed() {
23+
// Generate the next set of boxes
24+
var next = [];
25+
for (var i = 0; i < sponge.length; i++) {
26+
var b = sponge[i];
27+
var newBoxes = b.generate();
28+
next = next.concat(newBoxes);
29+
}
30+
sponge = next;
31+
}
32+
33+
function draw() {
34+
background(51);
35+
rotateX(a);
36+
rotateY(a * 0.4);
37+
rotateZ(a * 0.1);
38+
// Show what you've got!
39+
for (var i = 0; i < sponge.length; i++) {
40+
sponge[i].show();
41+
}
42+
a += 0.01;
43+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for this video: https://youtu.be/LG8ZK-rRkXo
5+
6+
class Box {
7+
PVector pos;
8+
float r;
9+
10+
Box(float x, float y, float z, float r_) {
11+
pos = new PVector(x, y, z);
12+
r = r_;
13+
}
14+
15+
ArrayList<Box> generate() {
16+
ArrayList<Box> boxes = new ArrayList<Box>();
17+
for (int x = -1; x < 2; x++) {
18+
for (int y = -1; y < 2; y++) {
19+
for (int z = -1; z < 2; z++) {
20+
int sum = abs(x) + abs(y) + abs(z);
21+
float newR = r/3;
22+
if (sum > 1) {
23+
Box b = new Box(pos.x+x*newR, pos.y+ y*newR, pos.z+z*newR, newR);
24+
boxes.add(b);
25+
}
26+
}
27+
}
28+
}
29+
return boxes;
30+
}
31+
32+
void show() {
33+
pushMatrix();
34+
translate(pos.x, pos.y, pos.z);
35+
noStroke();
36+
fill(255);
37+
box(r);
38+
popMatrix();
39+
}
40+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Daniel Shiffman
2+
// http://codingtra.in
3+
// http://patreon.com/codingtrain
4+
// Code for this video: https://youtu.be/LG8ZK-rRkXo
5+
6+
float a = 0;
7+
8+
ArrayList<Box> sponge;
9+
void setup() {
10+
size(400, 400, P3D);
11+
12+
// An array of Box objects
13+
sponge = new ArrayList<Box>();
14+
15+
// Star with one
16+
Box b = new Box(0, 0, 0, 200);
17+
sponge.add(b);
18+
}
19+
void mousePressed() {
20+
// Generate the next set of boxes
21+
ArrayList<Box> next = new ArrayList<Box>();
22+
for (Box b : sponge) {
23+
ArrayList<Box> newBoxes = b.generate();
24+
next.addAll(newBoxes);
25+
}
26+
sponge = next;
27+
}
28+
29+
void draw() {
30+
background(51);
31+
stroke(255);
32+
noFill();
33+
lights();
34+
translate(width/2, height/2);
35+
rotateX(a);
36+
rotateY(a*0.4);
37+
rotateZ(a*0.1);
38+
// Show what you've got!
39+
for (Box b : sponge) {
40+
b.show();
41+
}
42+
a += 0.01;
43+
}

0 commit comments

Comments
 (0)