31:T9d0,Arrow = { class A { constructor(sketch) { this.sketch = sketch; this.position = this.resetPosition(); this.stepSize = 5; this.angle = 0; // this.frameRate = random(40, 60); } resetPosition() { var startX = this.sketch.random(1, size.width - 1); var startY = this.sketch.random(1, size.height - 1); return { topLeftX: startX, // 35 topLeftY: startY, // 20 cornerX: startX + 3, // 65 cornerY: startY + 3, // 50 bottomLeftX: startX, bottomLeftY: startY + 6 // 80 } } draw() { var noiseStrength = 0.003; var noiseScale = 30; this.update({ noiseStrength: noiseStrength, noiseScale: noiseScale }); } update(noiseArgs) { if (this.isOffScreen()) { this.position = this.resetPosition(); } else { this.angle = this.sketch.noise( this.position.topLeftX * noiseArgs.noiseStrength, this.position.topLeftY * noiseArgs.noiseStrength ) * noiseArgs.noiseScale; var updateX = this.sketch.cos(this.angle) * this.stepSize; var updateY = this.sketch.sin(this.angle) * this.stepSize; // var updateX = random(-1, 1); // var updateY = random(-1, 1); this.position = { topLeftX: this.position.topLeftX + updateX, topLeftY: this.position.topLeftY + updateY, cornerX: this.position.cornerX + updateX, cornerY: this.position.cornerY + updateY, bottomLeftX: this.position.bottomLeftX + updateX, bottomLeftY: this.position.bottomLeftY + updateY }; } this.sketch.noFill(); // frameRate(this.frameRate); this.sketch.strokeWeight(3.0); var color = this.sketch.map(this.position.topLeftX, 0, width, 100, 255); this.sketch.stroke(color, 204, 0); this.sketch.strokeJoin(this.sketch.MITER); this.sketch.beginShape(); this.sketch.vertex(this.position.topLeftX, this.position.topLeftY); this.sketch.vertex(this.position.cornerX, this.position.cornerY); this.sketch.vertex(this.position.bottomLeftX, this.position.bottomLeftY); this.sketch.endShape(); } isOffScreen() { var isOffScreen = false; if (this.position.topLeftX >= size.width || this.position.topLeftX <= 0 || this.position.topLeftY >= size.height || this.position.topLeftY <= 0) { isOffScreen = true; } return isOffScreen; } } return A; }32:T75e,html`❝

Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc.

The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program; see the noiseSeed() function). p5.js can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The resulting value will always be between 0.0 and 1.0. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time.

The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result.

Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use.

❞

Source

`33:[] 2f:{"title":"Flight Patterns with p5.js","cells":[{"id":0,"value":"md`# Flight Patterns with p5.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"md`Flight Patterns is an exercise from a workshop I took with [@catarak](https://github.com/catarak) last year. She was showing us the [p5.js web editor](https://github.com/processing/p5.js-web-editor) at the time, and I wanted to re-create it in Observable. Enjoy! 😺`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"p5 = require(\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"size = ({width: 640, height: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"p5Container = {\n \tlet el = document.createElement(\"div\");\n \tel.id = \"p5-container\";\n \tel.style.border = \"1px solid black\";\n \tel.style.width = `${size.width}px`;\n \tel.style.height = `${size.height}px`;\n\treturn el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"function generateArrows (sketch) {\n \tconst numArrows = 100;\n\tlet arrows = [];\n\tfor (var i = 0; i < numArrows; i++) {\n var arrow = new Arrow(sketch);\n arrows[i] = arrow;\n arrows[i].draw();\n\t}\n \treturn arrows;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"sketch = function(sketch) {\n var arrows;\n var noiseStrength = 0.003;\n var noiseScale = 30;\n\n sketch.setup = () => { \n sketch.createCanvas(size.width, size.height);\n\n sketch.background(220);\n arrows = generateArrows(sketch);\n } \n\n sketch.draw = () => {\n sketch.background(220, 20);\n arrows.forEach(arrow => arrow.update({ noiseStrength: noiseStrength, noiseScale: noiseScale }));\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"myP5 = {\n \t// It's important to note that since we're not using canvas, svg, or other drawing elements, \n \t// the DOM will be manipulated over and over again. In this case, appending the innerHTML again and again.\n // To stop this behavior, we need to reset the innerHTML of the p5 div container.\n\tp5Container.innerHTML = \"\";\n \t// Reinstantiate the p5 with the sketch\n\treturn new p5(sketch, p5Container);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}