Dark Side of the Moon

inCreactive Experiment, HTML5 Leave a Comment

Here’s a looped video I made using Bit101’s GIF Loop Coder, a really great tool for making looped gifs out of code. I first tried to export it as a gif but the glow and the colors didn’t look right because of the 256 color limit on the gif format. So I made it into a video instead using OBS and Premiere.

Here’s the source code and here is a live demo. I made it resizable, so you can change the parameters on this line of code:”glc.size(600, 600);” and it will look nice as long as you keep both the width and the height values equal to each other.

function onGLC(glc){
  
      glc.size(600, 600);
      glc.loop();
      glc.setDuration(3);
      glc.setFPS(60);
      glc.styles.backgroundColor = "#000000";
      glc.setMode("single");

      var list =  glc.renderList,
                  width = glc.w,
                  height = glc.h, 
                  color = glc.color;

      var rainbowColors = [color.rgba(255,0,0,1),      // Red
                           color.rgba(255,127,0,1),    // Orange
                           color.rgba(255,255,0,1),    // Yellow
                           color.rgba(0,255,0,1),      // Green
                           color.rgba(0,166,234,1),    // Blue
                           color.rgba(127,0,255,1)];   // Violet
      
      var colorLightWidth = width * 0.00833333333333;
      var colorLightSegments = 25;


      // your code goes here:

      addLightRay();
      addRedLight();
      addOrangeLight();
      addYellowLight();
      addGreenLight();
      addBlueLight();
      addVioletLight();
      addLightInisideTriangle();
      addTriangle();

      //addGuides();

      function addTriangle()
      {
            list.addPoly({x: width * 0.5,
                          y: height * 0.43,
                          radius: width * 0.18,
                          sides: 3,
                          rotation: -90,
                          stroke: true,
                          fill: false,
                          lineWidth: width * 0.008333333333,
                          strokeStyle: color.rgba( 255, 255, 255, 1),
                          shadowColor: color.rgba(150,150,255,  1),
                          shadowBlur: [0, width * 0.05],
                          phase: 0.5,
                          shake: 0.5});

            list.addPoly({x: width * 0.5,
                          y: height * 0.43,
                          radius: width * 0.18,
                          sides: 3,
                          rotation: -90,
                          stroke: true,
                          fill: false,
                          lineWidth: width * 0.008333333333,
                          strokeStyle: color.rgba( 255, 255, 255, 1),
                          shadowColor: color.rgba(150,150,255,  1),
                          shadowBlur: [width * 0.05, 0],
                          phase: 0.5,
                          shake: 0});
      }

      function addLightInisideTriangle()
      {
            addQuadSegments({x:0.430, y:0.374},
                            {x:0.556, y:0.346},
                            {x:0.592, y:0.406},
                            {x:0.430, y:0.374},
                            100,
                            [width * 0.001666666667, width * 0.008333333333],
                            [color.rgba(255,255,255,1), color.rgba(0,0,0, 1)]);
      }

      function addQuadSegments(point1, point2, point3, point4, numLines, lineWidth, lineStrokeStyle)
      {
            var currentInitPoint;
            var currentEndPoint;

            for(var i=0; i < numLines; i++){
                  currentInitPoint = interpolatePoints(point1, point4, i/numLines);
                  currentEndPoint = interpolatePoints(point2, point3, i/numLines);
                  addSegment(currentInitPoint.x, currentInitPoint.y, currentEndPoint.x, currentEndPoint.y, lineWidth, lineStrokeStyle);
            }
      }

      function interpolatePoints(initPoint, endPoint, percent)
      {
            var resultPoint = {x:0, y:0};
              
            resultPoint.x = initPoint.x + (endPoint.x - initPoint.x) * percent;
            resultPoint.y = initPoint.y + (endPoint.y - initPoint.y) * percent;
            
            return resultPoint;
      }

      function addLine(percentX0, percentY0, percentX1, percentY1, lineWidth, lineStrokeStyle)
      {
            lineWidth = typeof lineWidth !== 'undefined' ? lineWidth : 1;
            lineStrokeStyle = typeof lineStrokeStyle !== 'undefined' ? lineStrokeStyle : color.rgba(0, 0, 0, 1);

            list.addLine({x0: width * percentX0,
                          y0: height * percentY0,
                          x1: width * percentX1,
                          y1: height * percentY1,
                          lineWidth: lineWidth,
                          strokeStyle: lineStrokeStyle,
                          shadowColor: lineStrokeStyle,
                          shadowBlur: 10});
      }

      function addSegment(percentX0, percentY0, percentX1, percentY1, segmentLineWidth, segmentStrokeStyle, segmentLength, phase)
      {
            segmentLineWidth = typeof segmentLineWidth !== 'undefined' ? segmentLineWidth : 1;
            segmentStrokeStyle = typeof segmentStrokeStyle !== 'undefined' ? segmentStrokeStyle : color.rgba(0, 0, 0, 1);
            segmentLength = typeof segmentLength !== 'undefined' ? segmentLength : Math.random() * 0.05;
            phase = typeof phase !== 'undefined' ? phase : Math.random();


            list.addSegment({x0: width * percentX0,
                             y0: height * percentY0,
                             x1: width * percentX1,
                             y1: height * percentY1,
                             lineWidth: segmentLineWidth,
                             strokeStyle: segmentStrokeStyle,
                             segmentLength: width * segmentLength,
                             phase: phase,
                             shadowColor: segmentStrokeStyle,
                             shadowOffsetX: Math.random() * (width * 0.003333333333) - Math.random() * (width * 0.003333333333),
                             shadowOffsetY: Math.random() * (width * 0.003333333333) - Math.random() * (width * 0.003333333333),
                             shadowBlur: 10});
      }

      function addLightRay()
      {
            var lightRayWidth = width * 0.00333333333333;
            var lightRayColor = color.rgba(255, 255, 255, 1);
            var lightRaySegments = 10;

            for(var i=0; i < lightRaySegments; i++){
                  lightRayColor = color.rgba(255, 255, 255, .75);
                  addSegment(0, 0.488, 0.43, 0.374, lightRayWidth, lightRayColor, 2);
            }
      }

      function addRedLight()
      {
            for(var i=0; i < colorLightSegments; i++){
                  addSegment(0.555, 0.346, 1, 0.414, colorLightWidth * Math.random(), rainbowColors[0]);
                  addSegment(0.562, 0.356, 1, 0.43, colorLightWidth * Math.random(), rainbowColors[0]);
            }
      }

      function addOrangeLight()
      {
            for(var i=0; i < colorLightSegments; i++){
                  addSegment(0.562, 0.356, 1, 0.43, colorLightWidth * Math.random(), rainbowColors[1]);
                  addSegment(0.568, 0.366, 1, 0.448, colorLightWidth * Math.random(), rainbowColors[1]);
            }
      }

      function addYellowLight()
      {
            for(var i=0; i < colorLightSegments; i++){
                  addSegment(0.568, 0.366, 1, 0.448, colorLightWidth * Math.random(), rainbowColors[2]);
                  addSegment(0.574, 0.376, 1, 0.464, colorLightWidth * Math.random(), rainbowColors[2]);
            }
      }

      function addGreenLight()
      {
            for(var i=0; i < colorLightSegments; i++){
                  addSegment(0.574, 0.376, 1, 0.464, colorLightWidth * Math.random(), rainbowColors[3]);
                  addSegment(0.58, 0.386, 1, 0.48, colorLightWidth * Math.random(), rainbowColors[3]);
            }
      }

      function addBlueLight()
      {
            for(var i=0; i < colorLightSegments; i++){
                  addSegment(0.58, 0.386, 1, 0.48, colorLightWidth * Math.random(), rainbowColors[4]);
                  addSegment(0.586, 0.396, 1, 0.496, colorLightWidth * Math.random(), rainbowColors[4]);
            }
      }

      function addVioletLight()
      {
            for(var i=0; i < colorLightSegments; i++){
                  addSegment(0.586, 0.396, 1, 0.496, colorLightWidth * Math.random(), rainbowColors[5]);
                  addSegment(0.592, 0.406, 1, 0.512, colorLightWidth * Math.random(), rainbowColors[5]);
            }
      }

      function addGuides()
      {
            var guidesLineWidth = 1;
            var guidesColor = color.rgba(255, 255, 255, 1);

            function addVerticalGuide(percentageX){
                  addLine(percentageX, 0, percentageX, height, guidesLineWidth, guidesColor);
            }

            function addHorizontalGuide(percentageY){
                  addLine(0, percentageY, width, percentageY, guidesLineWidth, guidesColor);
            }

            // Triangular Prism Guides
            addVerticalGuide( 0.5 );
            addVerticalGuide( 0.344 );
            addVerticalGuide( 0.656 );

            addHorizontalGuide( 0.248 );
            addHorizontalGuide( 0.52 );

            // Light Ray Guides
            addHorizontalGuide( 0.488 );
            addHorizontalGuide( 0.374 );
            addVerticalGuide( 0.43 );

            // Red Light Guides
            addVerticalGuide( 0.555 );
            addHorizontalGuide( 0.346 );
            addHorizontalGuide( 0.414 );

            // Orange Light Guides
            addVerticalGuide( 0.562 );
            addHorizontalGuide( 0.356 );
            addHorizontalGuide( 0.43 );

            // Yellow Light Guides
            addVerticalGuide( 0.574 );
            addHorizontalGuide( 0.376 );

            addHorizontalGuide( 0.464 );

            // Green Light Guides
            addVerticalGuide( 0.58 );
            addHorizontalGuide( 0.386 );
            addHorizontalGuide( 0.48 );

            // Blue Light Guides
            addVerticalGuide( 0.586 );
            addHorizontalGuide( 0.396 );
            addHorizontalGuide( 0.496 );

            // Violet Light Guides
            addVerticalGuide( 0.592 );
            addHorizontalGuide( 0.406 );
            addHorizontalGuide( 0.512 );

      }

}

Leave a Reply

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