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

Compare commits

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

No commits in common. "5dfb8253155abac53d1f767a20d4be05c8b4281a" and "11ec08b907e4d2c045a957b13a33c6ddfe9e6728" have entirely different histories.
5dfb825315 ... 11ec08b907

21 changed files with 0 additions and 589 deletions
Show Stats Expand all files Collapse all files

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

@ -1,15 +0,0 @@
<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
View File

@ -1,32 +0,0 @@
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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,43 +0,0 @@
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
View File

@ -1,7 +0,0 @@
## 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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,43 +0,0 @@
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
View File

@ -1,16 +0,0 @@
<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
View File

@ -1,73 +0,0 @@
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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,32 +0,0 @@
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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,55 +0,0 @@
// 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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,37 +0,0 @@
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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,26 +0,0 @@
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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,30 +0,0 @@
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
View File

@ -1,15 +0,0 @@
<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
View File

@ -1,60 +0,0 @@
// 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();
}