Perlin noise vector flow field

For this module I decided to improve my coding skills by watching and reading countless tutorials and informational sites about JavaScript. JavaScript is used a lot in the Creative Technology course and when it was reintroduced in the start of module 4 I found myself lacking the essential basics to start writing programs for the class Algorithms for Create. I wanted to improve my overall understanding and skills of programming so that in the future I would never run into the issue again.

In the end i believe that a better understanding of JavaScript will help me understand other programming languages much quicker as well, as they all feature some similar structure.

The most fun part of this learning process is that you can practice and aren’t obligated to only studying other sources. By practicing coding myself and solving my own problems, my overall understanding has exceptionally expanded. It is satisfying to watch a program do what it is supposed to do and when i accomplished that, i want to add more functionality to that program. That loop keeps going on and on now and programming has become quite addicting.

Thus, for this module i decided to code my own art work with a sophisticated algorithm called Perlin noise. The method is used in procedural content generation but is different from a random number generator. random numbers can be 1 9 4 3 5 7 where as Perlin noise would me more procedural like 4 5 6 5 4 3 4 which is great for creating smooth random motion.

The code is animated but I will show screenshots of my work below.

Screenshot of code in action

The coloured particles move over the screen by following a vector field that passes the vector heading values into each particle. In combination with Perlin noise it creates the illusion as if the particles are flocking/staying together and move in a very flowing and natural way. It was great to be able to create this piece and it was surely worth the effort.

You can download the folder with the classes HERE. In addition you will also need Processing for your system. when you open any of the classes in the zip file, click on run in the top left corner and then press space bar to see the flow animation in action yourself.

Leave a Reply

Your email address will not be published. Required fields are marked *