u/Bliss910's guide to Razer

Razer.md

Bliss' guide to Razer by Katkip.

if(!t){w=[];for(i=999;i--;)w.push({d:0,a:i})}
for(i of w)x.fillRect(960+C(i.a)*i.d,540+S(i.a)*i.d,2,2),i.d+=1,i.a+=S(i.a*3)/91+S(t*4)/99

At first glance this looks like an impossible mess to understand, but just remember that katkip and other dweeters mostly create them based on cool techniques they've seen or used before. They also start with longer programs and simplify them later.

There are three parts to this:

1. a list maker
2. a tiny rectangle drawer which reads locations from the list
3. a list adjuster, which updates drawing locations based on how many arms the drawing should have and how much wobble the arms should have (less as time passes)

I've renamed some variables, pressed enter a bunch and added some comments.

Remember that the code is run 60 times every second.

• t: Run time in seconds
• S: Shorthand for Math.sin()
• C: Shorthand for Math.cos()
• R: Function that generates colours using a combination of red, green, blue and clear, like: R(255, 255, 255, 0.5)
• x: The canvas, which is 1920 pixels wide and 1080 pixels high

time = t                             //  the number of seconds we've been running
canvas = x                           //  we draw on here

                                     // List Maker
if (!time) {                         //  if we've been running for more than 0 seconds:
  list = []                          //    make an empty list, known as an "array"
  for (counter = 999; counter--; ) { //    count down from 999, looping this code each time:
    list.push({                      //      push a pair of numbers onto the list:
      distance: 0,                   //        0
      angle: counter                 //        the current counter
    })
  }
}

                                     // Rectangle Drawer
for (item of list) {                 //  loop through the list, running this code on every list item:
  canvas.fillRect(                   //    the fillRect() function draws a rectangle using
                                     //    distances like: fillRect(left, top, width, height)

    960 +                            //    The left distance starts with 960 and adds it to
    Math.cos(                        //    the output of the cos() function, which tells you
                                     //    how much of the ground will be covered by a line
                                     //    that you know the length of leaning on an angle ⎳
      item.angle                     //      the angle of the line stored in this part of the list
    )
    * item.distance,                 //    times the distance of the line stored this part of the list

    540 +                            //    The top distance starts with 540 and adds it to
    Math.sin(                        //    the output of the sin() function, which tells you
                                     //    how tall a line will be if leaning on an angle ⩗
      item.angle                     //      the angle of the line in the list
    )
    * item.distance,                 //    times the distance of the line in the list

    2,                               //    the rectangles are each only 2 pixels wide

    2                                //    and only 2 pixels high
  )

                                     // List Adjuster
  item.distance += 1                 //    here we add 1 to this list item's distance
  item.angle +=                      //    update it's drawing angle
    Math.sin(                        //      based on the sin() output of
      item.angle * 3                 //        it's last angle and the number of different arms
    )
    / 91 +                           //      and a fixed wobble amount, plus
    Math.sin(                        //      the sin() output of
      time * 4                       //        it's run-time and a multiplier
    )
    / 99                             //      and another fixed wobble amount
}

There's an excellent Guide to Getting Started with Dwitter. You could also read a little about 2D graphics techniques on Wikipedia.

The Math.sin() and Math.cos() functions are pretty useful so if you want to know more about them just wake me up on Monday.

For now just remember that Math.sin() tells you how tall something is if it's leaning at an angle ⩗ and Math.cos() tells you how much of the ground it covers while it's on that angle ⎳

The numbers 960 and 540 come from the size of the canvas.
960 is half the width and 540 is half the height, so the location of every rectangle drawn is calculated from the centre