Compare commits
4 Commits
fd2df012af
...
8d3c94ea3e
Author | SHA1 | Date | |
---|---|---|---|
8d3c94ea3e | |||
d33f351f24 | |||
8e633df16f | |||
d6f4d5e863 |
15
1. Vectors/5. Car Simulation/index.html
Normal file
15
1. Vectors/5. Car Simulation/index.html
Normal 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>
|
42
1. Vectors/5. Car Simulation/sketch.js
Normal file
42
1. Vectors/5. Car Simulation/sketch.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
let position
|
||||||
|
let velocity
|
||||||
|
let accelaration
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(600, 300)
|
||||||
|
|
||||||
|
position = createVector(width/2, height/2)
|
||||||
|
velocity = createVector(0, 0)
|
||||||
|
accelaration = createVector(0, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
let keyCodeW = 87
|
||||||
|
let keyCodeS = 83
|
||||||
|
|
||||||
|
accelaration.x = 0
|
||||||
|
if (keyIsDown(keyCodeW)) {
|
||||||
|
accelaration.x += 0.001
|
||||||
|
}
|
||||||
|
if (keyIsDown(keyCodeS)) {
|
||||||
|
accelaration.x -= 0.001
|
||||||
|
}
|
||||||
|
|
||||||
|
velocity.add(p5.Vector.mult(accelaration, deltaTime))
|
||||||
|
velocity.limit(2)
|
||||||
|
|
||||||
|
if (position.x < 0) {
|
||||||
|
velocity.x = 0
|
||||||
|
position.x = 0
|
||||||
|
}
|
||||||
|
if (position.x > width) {
|
||||||
|
velocity.x = 0
|
||||||
|
position.x = width
|
||||||
|
}
|
||||||
|
|
||||||
|
position.add(p5.Vector.mult(velocity, deltaTime))
|
||||||
|
|
||||||
|
background(255)
|
||||||
|
|
||||||
|
circle(position.x, position.y, 10)
|
||||||
|
}
|
15
1. Vectors/6. Random Walker/index.html
Normal file
15
1. Vectors/6. Random Walker/index.html
Normal 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>
|
62
1. Vectors/6. Random Walker/sketch.js
Normal file
62
1. Vectors/6. Random Walker/sketch.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
class Walker {
|
||||||
|
constructor(x = 0, y = 0) {
|
||||||
|
this.t = createVector(0, 10000)
|
||||||
|
this.position = createVector(x, y)
|
||||||
|
this.velocity = createVector(0, 0)
|
||||||
|
this.accelaration = createVector(0, 0)
|
||||||
|
this.topSpeed = 50
|
||||||
|
}
|
||||||
|
|
||||||
|
step() {
|
||||||
|
this.accelaration = createVector(
|
||||||
|
map(noise(this.t.x), 0, 1, -1, 1),
|
||||||
|
map(noise(this.t.y), 0, 1, -1, 1)
|
||||||
|
).normalize()
|
||||||
|
this.accelaration.mult(50)
|
||||||
|
|
||||||
|
const dt = deltaTime/1000
|
||||||
|
this.velocity.add(p5.Vector.mult(this.accelaration, dt))
|
||||||
|
this.velocity.limit(this.topSpeed)
|
||||||
|
this.position.add(p5.Vector.mult(this.velocity, dt))
|
||||||
|
this.t.add(createVector(dt, dt))
|
||||||
|
|
||||||
|
|
||||||
|
if (this.position.x < 0) {
|
||||||
|
this.position.x += width
|
||||||
|
}
|
||||||
|
if (this.position.x > width) {
|
||||||
|
this.position.x -= width
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.position.y < 0) {
|
||||||
|
this.position.y += height
|
||||||
|
}
|
||||||
|
if (this.position.y > height) {
|
||||||
|
this.position.y -= height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
stroke(0)
|
||||||
|
line(
|
||||||
|
this.position.x, this.position.y,
|
||||||
|
this.position.x + this.accelaration.x,
|
||||||
|
this.position.y + this.accelaration.y
|
||||||
|
)
|
||||||
|
circle(this.position.x, this.position.y, 20)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let walker
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(640, 240)
|
||||||
|
background(255)
|
||||||
|
walker = new Walker(width/2, height/2)
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(255)
|
||||||
|
walker.step()
|
||||||
|
walker.draw()
|
||||||
|
}
|
15
1. Vectors/8. Mouse Attractor/index.html
Normal file
15
1. Vectors/8. Mouse Attractor/index.html
Normal 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>
|
52
1. Vectors/8. Mouse Attractor/sketch.js
Normal file
52
1. Vectors/8. Mouse Attractor/sketch.js
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
class Walker {
|
||||||
|
constructor(x = 0, y = 0) {
|
||||||
|
this.position = createVector(x, y)
|
||||||
|
this.velocity = createVector(0, 0)
|
||||||
|
this.accelaration = createVector(0, 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
step() {
|
||||||
|
let target = createVector(mouseX, mouseY)
|
||||||
|
let difference = p5.Vector.sub(target, this.position)
|
||||||
|
this.accelaration = difference.copy()
|
||||||
|
this.accelaration.setMag(1000/difference.mag())
|
||||||
|
|
||||||
|
const dt = deltaTime/1000
|
||||||
|
this.velocity.add(p5.Vector.mult(this.accelaration, dt))
|
||||||
|
this.position.add(p5.Vector.mult(this.velocity, dt))
|
||||||
|
|
||||||
|
|
||||||
|
if (this.position.x < 0) {
|
||||||
|
this.position.x += width
|
||||||
|
}
|
||||||
|
if (this.position.x > width) {
|
||||||
|
this.position.x -= width
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.position.y < 0) {
|
||||||
|
this.position.y += height
|
||||||
|
}
|
||||||
|
if (this.position.y > height) {
|
||||||
|
this.position.y -= height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
draw() {
|
||||||
|
stroke(0)
|
||||||
|
circle(this.position.x, this.position.y, 20)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let walker
|
||||||
|
|
||||||
|
function setup() {
|
||||||
|
createCanvas(640, 240)
|
||||||
|
background(255)
|
||||||
|
walker = new Walker(width/2, height/2)
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
background(255)
|
||||||
|
walker.step()
|
||||||
|
walker.draw()
|
||||||
|
}
|
@ -1,3 +1,9 @@
|
|||||||
# Nature Of Code
|
# Nature Of Code
|
||||||
|
|
||||||
Book: https://natureofcode.com/
|
Book: https://natureofcode.com/
|
||||||
|
|
||||||
|
## TODO
|
||||||
|
|
||||||
|
Create a zig web server to act as a table of contents for all of the exercises that have been done.
|
||||||
|
|
||||||
|
And so that `index.html` would not need to be copy pasted.
|
||||||
|
Loading…
Reference in New Issue
Block a user