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

Notion - Update docs

Browse source
This commit is contained in:
jasongao97 2022-08-08 19:59:13 +00:00 committed by GitHub
parent 2073856778
commit 74b6950365
6 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/01_vectors.html
View file

@ -14,7 +14,7 @@
<p>In the above illustration, the vector is drawn as an arrow from point A to point B and serves as an instruction for how to travel from A to B.</p>
<h2>1.1 Vectors, You Complete Me</h2><a data-type="indexterm" data-primary="bouncing ball sketch"></a><a data-type="indexterm" data-primary="vectors" data-secondary="bouncing ball sketch"></a>
<p>Before we dive into more of the details about vectors, I’d like to create a basic p5.js example that demonstrates why you should care about vectors in the first place. If you’ve read any of the introductory p5.js textbooks or taken an introduction to creative coding course (and hopefully you’ve done one of these things to help prepare you for this book), you probably, at one point or another, learned how to write a simple bouncing ball sketch.</p>
<div data-type="example" example-path="chp01_vectors/NOC_1_01_bouncingball_novectors/">
<div data-type="example" data-p5-editor="https://editor.p5js.org/codingtrain/sketches/JmEToUfk" data-example-title="Example 1.1: Bouncing ball with no vectors" data-example-path="examples/01_vectors/Nature_of_Code_1:_Vectors_1/">
<h5>Example 1.1: Bouncing ball with no vectors</h5>
<figure>
<img src="images/01_vectors/01_vectors_2.png" alt="If you are reading this book as a PDF or in print, then you will only see screenshots of the canvas. Motion, of course, is a key element of the discussion, so to the extent possible, the static screenshots will include trails to give a sense of the behavior. For more about how to draw trails, see the code examples linked from the website.">

2
content/chapters.json
View file

@ -1 +1 @@
[{"title":"Introduction","src":"./00_7_introduction.html","slug":"00_7_introduction"},{"title":"Chapter 1. Vectors","src":"./01_vectors.html","slug":"vectors"},{"title":"Chapter 2. Forces ","src":"./02_forces.html","slug":"forces"}]
[{"title":"Introduction","src":"./00_7_introduction.html","slug":"introduction"},{"title":"Chapter 1. Vectors","src":"./01_vectors.html","slug":"vectors"},{"title":"Chapter 2. Forces ","src":"./02_forces.html","slug":"forces"}]

15
content/examples/01_vectors/Nature_of_Code_1:_Vectors_1/index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="walker.js"></script>
<script src="sketch.js"></script>
</body>
</html>

18
content/examples/01_vectors/Nature_of_Code_1:_Vectors_1/sketch.js Normal file
View file

@ -0,0 +1,18 @@
// What is a Vector
// The Nature of Code
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/learning/nature-of-code/1.1-what-is-a-vector.html
// https://editor.p5js.org/codingtrain/sketches/JmEToUfk
let walker;
function setup() {
createCanvas(400, 400);
walker = new Walker(200, 200);
background(0);
}
function draw() {
walker.update();
walker.show();
}

7
content/examples/01_vectors/Nature_of_Code_1:_Vectors_1/style.css Normal file
View file

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

22
content/examples/01_vectors/Nature_of_Code_1:_Vectors_1/walker.js Normal file
View file

@ -0,0 +1,22 @@
// What is a Vector
// The Nature of Code
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/learning/nature-of-code/1.1-what-is-a-vector.html
// https://editor.p5js.org/codingtrain/sketches/JmEToUfk
class Walker {
constructor(x, y) {
this.pos = createVector(x, y);
}
update() {
this.pos.x = this.pos.x + random(-1, 1);
this.pos.y = this.pos.y + random(-1, 1);
}
show() {
stroke(255, 100);
strokeWeight(2);
point(this.pos.x, this.pos.y);
}
}