VUE JS RANDOM LINE ART GENERATOR

August 3rd, 2019 by Kevin Pimentel

Back in my day when I was just a young lad, I used to write the lines of code in Action Script 3. I spent a lot of time messing with animation, motion, and gravity. I coded in AS3. To this day, I still don’t know how to use the timeline UI. I don’t even know what the name of it really is.


Luckily, AS3 adheres to the same coding standard, ECMA Script, as JavaScript. Meaning it wasn’t a complete waste of time.


I was looking through some old AS3 projects and decided to convert a line art generator program to Vue JS. See below:


<html>
  <head>
    <style type="text/css">
      #svg {
        width:100%;
        height:100%;
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <svg id="svg" xmlns="http://www.w3.org/2000/svg">
        <path v-for="path in paths"
           :d="path.d"
           :stroke="path.stroke"
           :stroke-width="path.strokeWidth"
           :fill="path.fill"
           :opacity="path.opacity"></path>
      </svg>
    </div>
  </body>
</html>


The idea is simple. Put objects into an array and use them to generate curved lines from the center to a random plotted point on the page.


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
	let app = new Vue({
        el: '#app',

        data: {
          paths: [],
          reverse: false,
          m: ''
        },

        methods: {
		    color: function () {
    		let letters = '0123456789ABCDEF';
            let color = '#';

            for (let i = 0; i < 6; i++) {
              color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
     	},

        coordinates: function () {
            let Q = '';
            let degrees = 360;

            for (let i = 0; i < 4; i++) {
              Q += " " + (Math.floor((Math.random() * (degrees*2+1)) - degrees));
            }
            return Q;
        },

        moveToX: function () {
            return Math.ceil(window.innerWidth / 2);
        },

        moveToY: function () {
            return Math.ceil(window.innerHeight / 2);
        },

        init: function () {
            if (this.reverse) {
               this.paths.pop();
               if (this.paths.length == 1) {
                   this.reverse = false;
               }
               return;
            }

            let path = {
              d: ('d','M ' + this.m + 'q' + this.coordinates().toString()),
              stroke: this.color(),
              strokeWidth: 2,
              strokeLineJoin: 'round',
              fill: 'none',
              opacity: 1
            };

            this.paths.push(path);

            if (this.paths.length >= 300) {
              this.reverse = true;
            }
        }
	},

    mounted: function () {
      this.m = this.moveToX().toString() + " " + this.moveToY().toString();
      setInterval(e => this.init(), 5);
    }
});
</script>


The colors method generates a random color, by grabbing a random character out of the string array. This happens 6 times in order to build a hex. (Example: #123456)


The coordinates method gives us a random coordinate in a 360 degree area.


Finally, the interval in mounted keeps the program running indefinitely. When the lines hit the specified amount, the array starts to pop until it is down to one, at which point the entire thing starts all over.



GitHub / vueart

Kevin Pimentel

There are two types of people in the world: those that code, and those that don’t. I said that! Quote me. My name is Kevin and I’m one of the ones that codes.