rpuzonas/nature-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: rpuzonas:11ec08b907e4d2c045a957b13a33c6ddfe9e6728
Branches Tags
rpuzonas:main
...
compare: rpuzonas:5dfb8253155abac53d1f767a20d4be05c8b4281a
Branches Tags
rpuzonas:main

11 Commits
11ec08b907 ... 5dfb825315

Author SHA1 Message Date
Rokas Puzonas
5dfb825315 implement bee-like movement into ecosystem project 2024-02-05 23:48:54 +02:00
Rokas Puzonas
97c2a74712 complete exercise 0.10 2024-02-05 23:28:53 +02:00
Rokas Puzonas
7601e5f8f8 complete exercise 0.9 2024-02-05 22:52:02 +02:00
Rokas Puzonas
e24fc3db4f complete exercise 0.8 2024-02-05 22:51:54 +02:00
Rokas Puzonas
33939aeffd complete exercise 0.7 2024-02-05 22:13:49 +02:00
Rokas Puzonas
c5c6ec4fee complete exercise 0.6 2024-02-05 22:06:55 +02:00
Rokas Puzonas
e964c14974 complete exercise 0.5 2024-02-05 21:29:54 +02:00
Rokas Puzonas
b939faa914 complete exercise 0.4 2024-02-05 21:21:54 +02:00
Rokas Puzonas
cb14f6543b complete exercise 0.3 2024-02-05 20:40:30 +02:00
Rokas Puzonas
c9523bd229 complete exercise 0.2 2024-02-05 20:21:39 +02:00
Rokas Puzonas
9651423ae5 complete exercise 0.1 2024-02-05 20:20:41 +02:00
21 changed files with 589 additions and 0 deletions
Show Stats Expand all files Collapse all files

15
0. Randomness/1. Down Right Walker/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

32
0. Randomness/1. Down Right Walker/sketch.js Normal file
View File

@ -0,0 +1,32 @@
class Walker {
constructor(x = 0, y = 0) {
this.x = x
this.y = y
}
step() {
let dx = min(floor(random(4)) - 1, 1);
let dy = min(floor(random(4)) - 1, 1);
this.x += dx
this.y += dy
}
draw() {
stroke(0)
point(this.x, this.y)
}
}
let walker
function setup() {
createCanvas(640, 240)
background(255)
walker = new Walker(320, 120)
}
function draw() {
walker.step();
walker.draw();
}

15
0. Randomness/10. Perlin elevated/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

43
0. Randomness/10. Perlin elevated/sketch.js Normal file
View File

@ -0,0 +1,43 @@
let t = 0
let animationSpeed = 0.0008
function setup() {
createCanvas(640, 240, WEBGL)
pixelDensity(1)
}
function draw() {
background(255);
let pointsX = 20
let pointsY = 40
let pointGap = 10
let zs = []
for (let y = 0; y < pointsY+1; y++) {
for (let x = 0; x < pointsX; x++) {
let increment = 0.1
zs.push(noise(x*increment, y*increment, t*animationSpeed))
}
}
push()
rotateX(PI/3)
rotateZ(0.0001*t)
scale(pointGap)
translate(-pointsX/2, -pointsY/2, 0)
for (let y = 0; y < pointsY; y++) {
beginShape(QUAD_STRIP)
for (let x = 0; x < pointsX; x++) {
fill(zs[x + y * pointsX] * 255, 255)
vertex(x, y, zs[x + y * pointsX] * 10)
vertex(x, y+1, zs[x + (y+1) * pointsX] * 10)
}
endShape()
}
pop()
t += deltaTime
}

7
0. Randomness/2. Two Aces/README.md Normal file
View File

@ -0,0 +1,7 @@
## With reshuffle
4/52 * 4/52 = 16/2704 = 1/169 (~0.59%)
## Without reshuffle
4/52 * 3/51 = 12/2652 = 1/221 (~0.45%)

15
0. Randomness/3. Mouse Walker/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

43
0. Randomness/3. Mouse Walker/sketch.js Normal file
View File

@ -0,0 +1,43 @@
function clamp(x, min_x, max_x) {
return min(max(x, min_x), max_x)
}
class Walker {
constructor(x = 0, y = 0) {
this.x = x
this.y = y
}
step() {
let dx = 0
let dy = 0
if (random(1) < 0.5) {
dx = clamp(mouseX - this.x, -1, 1)
dy = clamp(mouseY - this.y, -1, 1)
} else {
dx = floor(random(3)) - 1
dy = floor(random(3)) - 1
}
this.x += dx
this.y += dy
}
draw() {
stroke(0)
point(this.x, this.y)
}
}
let walker
function setup() {
createCanvas(640, 240)
background(255)
walker = new Walker(320, 120)
}
function draw() {
walker.step();
walker.draw();
}

16
0. Randomness/4. Paint Splatter/index.html Normal file
View File

@ -0,0 +1,16 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
color: #EFEFEF;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

73
0. Randomness/4. Paint Splatter/sketch.js Normal file
View File

@ -0,0 +1,73 @@
let dotCount = 20
let dotDeviation = 10
let dotColor
let dotColorDeviation = 10
let dotSize = 10
let centerX = 320
let centerY = 120
let dotCountSlider
let dotDeviationSlider
let dotColorSlider
let dotColorDeviationSlider
function setup() {
createCanvas(640, 240)
dotColor = color(51, 51, 51)
splatPaint()
createSpan("Dot count")
dotCountSlider = createSlider(5, 500);
dotCountSlider.changed(() => {
dotCount = dotCountSlider.value()
splatPaint()
})
createDiv()
createSpan("Dot deviation")
dotDeviationSlider = createSlider(0, 75);
dotDeviationSlider.changed(() => {
dotDeviation = dotDeviationSlider.value()
splatPaint()
})
createDiv()
createSpan("Dot color")
dotColorSlider = createColorPicker(dotColor);
dotColorSlider.changed(() => {
dotColor = dotColorSlider.color()
splatPaint()
})
createDiv()
createSpan("Dot color deviation")
dotColorDeviationSlider = createSlider(0, 255);
dotColorDeviationSlider.changed(() => {
dotColorDeviation = dotColorDeviationSlider.value()
splatPaint()
})
}
function clamp(x, min_x, max_x) {
return min(max(x, min_x), max_x)
}
function splatPaint() {
background(255)
noStroke()
for (let i = 0; i < dotCount; i++) {
let colorR = clamp(randomGaussian(dotColor.levels[0], dotColorDeviation), 0, 255)
let colorG = clamp(randomGaussian(dotColor.levels[1], dotColorDeviation), 0, 255)
let colorB = clamp(randomGaussian(dotColor.levels[2], dotColorDeviation), 0, 255)
fill(colorR, colorB, colorG, 40)
let dotX = randomGaussian(centerX, dotDeviation)
let dotY = randomGaussian(centerY, dotDeviation)
circle(dotX, dotY, dotSize)
}
}

15
0. Randomness/5. Gaussian Walker/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

32
0. Randomness/5. Gaussian Walker/sketch.js Normal file
View File

@ -0,0 +1,32 @@
class Walker {
constructor(x = 0, y = 0) {
this.x = x
this.y = y
}
step() {
let dx = randomGaussian();
let dy = randomGaussian();
this.x += dx
this.y += dy
}
draw() {
stroke(0)
point(this.x, this.y)
}
}
let walker
function setup() {
createCanvas(640, 240)
background(255)
walker = new Walker(320, 120)
}
function draw() {
walker.step();
walker.draw();
}

15
0. Randomness/6. Levy Flight Walker/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

55
0. Randomness/6. Levy Flight Walker/sketch.js Normal file
View File

@ -0,0 +1,55 @@
// An algorithm for picking a random number based on monte carlo method
function acceptreject(formula) {
// We do this “forever” until we find a qualifying random value.
while (true) {
// Pick a random value.
let r1 = random(1);
// Assign a probability.
let probability = formula(r1);
// Pick a second random value.
let r2 = random(1);
//{!3} Does it qualify? If so, we’re done!
if (r2 < probability) {
return r1;
}
}
}
class Walker {
constructor(x = 0, y = 0) {
this.x = x
this.y = y
}
step() {
let step = 1;
if (acceptreject(x => x*x) < 0.1) {
step = 20;
}
let dx = random(-step, step);
let dy = random(-step, step);
this.x += dx
this.y += dy
}
draw() {
stroke(0)
point(this.x, this.y)
}
}
let walker
function setup() {
createCanvas(640, 240)
background(255)
walker = new Walker(320, 120)
}
function draw() {
walker.step();
walker.draw();
}

15
0. Randomness/7. Perlin Walker/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

37
0. Randomness/7. Perlin Walker/sketch.js Normal file
View File

@ -0,0 +1,37 @@
class Walker {
constructor(x = 0, y = 0) {
this.tx = 0
this.ty = 10000
this.x = x
this.y = y
}
step() {
let dx = map(noise(this.tx), 0, 1, -1, 1)
let dy = map(noise(this.ty), 0, 1, -1, 1)
this.x += dx
this.y += dy
this.tx += 0.01
this.ty += 0.01
}
draw() {
stroke(0)
point(this.x, this.y)
}
}
let walker
function setup() {
createCanvas(640, 240)
background(255)
walker = new Walker(320, 120)
}
function draw() {
walker.step();
walker.draw();
}

15
0. Randomness/8. Perlin noise/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

26
0. Randomness/8. Perlin noise/sketch.js Normal file
View File

@ -0,0 +1,26 @@
let increment = 0.01
let octaves = 3
let falloff = 0.3
function setup() {
createCanvas(640, 240)
pixelDensity(1)
noiseDetail(octaves, falloff)
}
function draw() {
loadPixels()
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let index = (x + y * width) * 4
let noiseValue = noise(x*increment, y*increment)
let bright = map(noiseValue, 0, 1, 0, 255)
pixels[index+0] = bright
pixels[index+1] = bright
pixels[index+2] = bright
pixels[index+3] = 255
}
}
updatePixels()
}

15
0. Randomness/9. Perlin animated/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

30
0. Randomness/9. Perlin animated/sketch.js Normal file
View File

@ -0,0 +1,30 @@
let increment = 0.01
let octaves = 8
let falloff = 0.4
let t = 0
let animationSpeed = 0.0005
function setup() {
createCanvas(640, 240)
pixelDensity(1)
noiseDetail(octaves, falloff)
}
function draw() {
loadPixels()
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
let index = (x + y * width) * 4
let noiseValue = noise(x*increment, y*increment, t*animationSpeed)
let bright = map(noiseValue, 0, 1, 0, 255)
pixels[index+0] = bright
pixels[index+1] = bright
pixels[index+2] = bright
pixels[index+3] = 255
}
}
updatePixels()
t += deltaTime
}

15
Ecosystem Project/index.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.js"></script>
<script src="sketch.js"></script>
<style>
body {
background: #212121;
}
</style>
</head>
<body>
<main>
</main>
</body>
</html>

60
Ecosystem Project/sketch.js Normal file
View File

@ -0,0 +1,60 @@
// An algorithm for picking a random number based on monte carlo method
function acceptreject(formula) {
// We do this “forever” until we find a qualifying random value.
while (true) {
// Pick a random value.
let r1 = random(1);
// Assign a probability.
let probability = formula(r1);
// Pick a second random value.
let r2 = random(1);
//{!3} Does it qualify? If so, we’re done!
if (r2 < probability) {
return r1;
}
}
}
class Walker {
constructor(x = 0, y = 0) {
this.t = 0
this.x = x
this.y = y
}
step() {
let dx, dy
if (noise(this.t+20000) < 0.5) {
let step = -1.5
dx = random(-step, step)
dy = random(-step, step)
} else {
let step = 0.5;
dx = map(noise(this.t), 0, 1, -1, 1)*step;
dy = map(noise(this.t+10000), 0, 1, -1, 1)*step;
}
this.x = (this.x + dx) % width
this.y = (this.y + dy) % height
this.t += 0.01
}
draw() {
stroke(0)
point(this.x, this.y)
}
}
let walker
function setup() {
createCanvas(640, 240)
background(255)
walker = new Walker(320, 120)
}
function draw() {
walker.step();
walker.draw();
}