Compare commits
No commits in common. "5dfb8253155abac53d1f767a20d4be05c8b4281a" and "11ec08b907e4d2c045a957b13a33c6ddfe9e6728" have entirely different histories.
5dfb825315
...
11ec08b907
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
@ -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%)
|
||||
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
@ -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>
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
@ -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>
|
||||
@ -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()
|
||||
}
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
@ -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>
|
||||
@ -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();
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user