Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #235 from nature-of-code/notion-update-docs

Browse source 
[Notion] Update docs
This commit is contained in:
Daniel Shiffman 2023-02-23 14:38:45 -05:00 committed by GitHub
commit 5ed79c4cf1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 114 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
content/04_particles.html
View file

@ -263,14 +263,14 @@ function draw() {
<div data-type="example">
<h3 id="example-42-array-of-particles">Example 4.2: Array of particles</h3>
<figure>
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/B1tgPxW_e"></div>
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/-xTbGZMim" data-example-path="examples/04_particles/noc_4_02_array_particles"></div>
<figcaption></figcaption>
</figure>
</div>
<pre class="codesplit" data-code-language="javascript">let particles = [];
function setup() {
createCanvas(640, 360);
createCanvas(640, 240);
}
function draw() {

14
content/examples/04_particles/noc_4_01_single_particle/particle.js
View file

@ -8,16 +8,16 @@
class Particle {
constructor(position) {
this.acceleration = createVector(0, 0.05);
constructor(x, y) {
this.position = createVector(x, y);
this.velocity = createVector(random(-1, 1), random(-1, 0));
this.position = position.copy();
this.acceleration = createVector(0, 0.05);
this.lifespan = 255.0;
}
run() {
this.update();
this.display();
this.show();
}
// Method to update position
@ -28,11 +28,11 @@ class Particle {
}
// Method to display
display() {
stroke(255, this.lifespan);
show() {
stroke(0, this.lifespan);
strokeWeight(2);
fill(127, this.lifespan);
ellipse(this.position.x, this.position.y, 12, 12);
circle(this.position.x, this.position.y, 12);
}
// Is the particle still useful?

8
content/examples/04_particles/noc_4_01_single_particle/sketch.js
View file

@ -5,16 +5,16 @@
let p;
function setup() {
createCanvas(640, 360);
p = new Particle(createVector(width / 2, 20));
createCanvas(640, 240);
p = new Particle(width / 2, 20);
}
function draw() {
background(51);
background(255);
p.run();
if (p.isDead()) {
p = new Particle(createVector(width / 2, 20));
p = new Particle(width / 2, 20);
//println("Particle dead!");
}
}

13
content/examples/04_particles/noc_4_02_array_particles/index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
<meta charset="utf-8">
<title>NOC_4_02_ArrayParticles</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="particle.js"></script>
<script src="sketch.js"></script>
</body>
</html>

46
content/examples/04_particles/noc_4_02_array_particles/particle.js Normal file
View file

@ -0,0 +1,46 @@
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com
// Simple Particle System
// A simple Particle class
class Particle {
constructor(x, y) {
this.position = createVector(x, y);
this.acceleration = createVector(0, 0.05);
this.velocity = createVector(random(-1, 1), random(-1, 0));
this.lifespan = 255.0;
}
run() {
this.update();
this.show();
}
// Method to update position
update() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.lifespan -= 2;
}
// Method to display
show() {
stroke(0, this.lifespan);
strokeWeight(2);
fill(127, this.lifespan);
circle(this.position.x, this.position.y, 12);
}
// Is the particle still useful?
isDead() {
if (this.lifespan < 0.0) {
return true;
} else {
return false;
}
}
}

24
content/examples/04_particles/noc_4_02_array_particles/sketch.js Normal file
View file

@ -0,0 +1,24 @@
// The Nature of Code
// Daniel Shiffman
// http://natureofcode.com
let particles = [];
function setup() {
createCanvas(640, 240);
}
function draw() {
background(255);
particles.push(new Particle(width / 2, 50));
// Looping through backwards to delete
for (var i = particles.length - 1; i >= 0; i--) {
var p = particles[i];
p.run();
if (p.isDead()) {
//remove the particle
particles.splice(i, 1);
}
}
}

7
content/examples/04_particles/noc_4_02_array_particles/style.css Normal file
View file

@ -0,0 +1,7 @@
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}

10
content/examples/04_particles/noc_4_03_particle_system_class/particle.js
View file

@ -7,16 +7,16 @@
// A simple Particle class
class Particle {
constructor(position) {
constructor(x, y) {
this.position = createVector(x,y);
this.acceleration = createVector(0, 0.05);
this.velocity = createVector(random(-1, 1), random(-1, 0));
this.position = position.copy();
this.lifespan = 255.0;
}
run() {
this.update();
this.display();
this.show();
}
// Method to update position
@ -27,8 +27,8 @@ class Particle {
}
// Method to display
display() {
stroke(200, this.lifespan);
show() {
stroke(0, this.lifespan);
strokeWeight(2);
fill(127, this.lifespan);
ellipse(this.position.x, this.position.y, 12, 12);

6
content/examples/04_particles/noc_4_03_particle_system_class/particle_system.js
View file

@ -3,13 +3,13 @@
// http://natureofcode.com
class ParticleSystem {
constructor(position) {
this.origin = position.copy();
constructor(x, y) {
this.origin = createVector(x,y);
this.particles = [];
}
addParticle() {
this.particles.push(new Particle(this.origin));
this.particles.push(new Particle(this.origin.x, this.origin.y));
}
run() {

6
content/examples/04_particles/noc_4_03_particle_system_class/sketch.js
View file

@ -5,12 +5,12 @@
let ps;
function setup() {
createCanvas(640, 360);
ps = new ParticleSystem(createVector(width / 2, 50));
createCanvas(640, 240);
ps = new ParticleSystem(width / 2, 50);
}
function draw() {
background(51);
background(255);
ps.addParticle();
ps.run();
}