title: Creating Visualisations in Processing and Understanding Code
body: <p>I am trying to get into creative coding mainly for creating live visuals. I have recently stumbled upon this great website called <a href="https://www.openprocessing.org/" rel="nofollow noreferrer">https://www.openprocessing.org/</a> where people can share their creations. </p>
  
  <p>I have attached code below for creating two moving circles but I am having trouble understanding how the creator went about doing so, If anyone could explain to me how the for loop is working as well as how the <code>x += 0.006; y += 0.006; if (x &gt; TWO_PI) {x = 0;}</code> section works, it would be greatly appreciated. The use of <code>sin</code>, <code>cos</code> and the Two_PI functions has me puzzled. Here is a link to the original code:</p>
  
  <p><a href="https://www.openprocessing.org/sketch/467333" rel="nofollow noreferrer">https://www.openprocessing.org/sketch/467333</a></p>
  
  <pre class="lang-java prettyprint-override"><code>//comment
  float x = 0;
  float xx = 0;
  float y = 0;
  float yy = 0;
  float sizecircle = 250;
  
  void setup() {
      size (800, 650);
      frameRate (60);
      strokeWeight (1);
      stroke (223, 170, 22);
  }
  
  void draw() {
      background (51, 51, 51);
  
      for (float i = 0; i &lt; TWO_PI; i += TWO_PI/100) {  
          line (350 + sin(x+i) * sizecircle, 275 + cos(y+i) * sizecircle, 450 + cos(xx+i) * sizecircle, 375 + sin(yy+i) * sizecircle);
      }
  
      x += 0.006;
      y += 0.006;
      if (x &gt; TWO_PI) {
          x = 0;
      }
      if (y &gt; TWO_PI) {
          y = 0;
      }
  
      xx += 0.002;
      yy += 0.002;
      if (xx &gt; TWO_PI) {
          xx = 0;
      }
      if (yy &gt; TWO_PI) {
          yy = 0;
      }
  }
  </code></pre>