# Neon, a glowy vector field

DevFeed: [Neon, a glowy vector field](<https://devfeed.tech/articles/neon-a-glowy-vector-field-37319.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/neon-generative-art-piece-made-using-2d-vector-field/>)

Author: Stanko

Published: 2020-01-22T00:00:00Z

Content type: article

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [generative art](<https://devfeed.tech/topics/generative-art.md>), [Code](<https://devfeed.tech/topics/code.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [SVG](<https://devfeed.tech/topics/svg.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [core](<https://devfeed.tech/tags/core.md>), [experiment](<https://devfeed.tech/tags/experiment.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [project](<https://devfeed.tech/tags/project.md>), [svg](<https://devfeed.tech/tags/svg.md>)

## AI overview

The article explains Neon, an open-source generative art project that creates glowing lines from randomly generated vector fields. It describes how nearby vectors influence each successive point and how the resulting points are rendered as Bézier curves.

## Source excerpt

Recently I started playing with generative art. I'm new to the whole thing and I'm absolutely enjoying it. Today I want to show you the first generative art project I'm satisfied with. It is called Neon and you can check it out here or by clicking on the image below. I will try to explain in detail how Neon works, however this won't be a coding tutorial. But it is an open source project, and code is available here. My first attempts # These were very simple and I was just exploring various concepts and tools: Triangles Perlin noise grid Untitled Flow I'm sharing these to show that my initial work was pretty humble. The point is - don't be afraid to experiment with things like this. For me, it was easier than I thought it would be, and I enjoyed every minute of it. Vector fields # After watching Vladimir's talk about his Aesthetic Engine 2, I started experimenting with vector fields. This is an example of one randomly generated vector field: Think of it like it is an air or water flow. If this field was a river and you drop a leaf in it, these forces will take it and carry it around. If we plot the movement of the leaf, we'll get a line. If we draw a lot of these lines, we will visualize the flow of the field. That is the core concept I used with Neon. But for a start let's see how can we draw a single line. Drawing a line # To draw a line, we'll select a random point for its start (we are dropping a leaf). We need to define which vectors are applying "force" to our point. Let's use radial search radius of 1.5 times grid item size. We'll select only vectors that start in this area (nine in this specific scenario). For each one we will calculate a new force vector with the same direction, but with intensity reciprocal to its distance from the point. Meaning that the closer the vector is to the point, it will apply more force to it. Adding up all of these newly calculated force vectors will give us a single vector pointing where our next point should be. Let's draw the