"The importance of algorithms in our lives today cannot be overstated. They are used virtually everywhere, from financial institutions to dating sites. But some algorithms shape and control our world more than others — and these ten are the most significant.
Just a quick refresher before we get started. Though there's no formal definition, computer scientists describe algorithms as a set of rules that define a sequence of operations. They're a series of instructions that tell a computer how it's supposed to solve a problem or achieve a certain goal. A good way to think of algorithms is by visualizing a flowchart."
— The 10 Algorithms That Dominate Our World
the javascript Math
object can do more than just output PI, it has lots of built in methods including Math.sin()
and Math.cos()
for sine and cosine, Math.round()
to round a number, and my favorite Math.random()
which outputs a random number between 0 and 1. Javascript ( like most programming languages ) has mathematical operators for doing arithmetic like +
addition, -
subtraction, *
multiplication, /
division and %
modulus ( which returns the remainder of a division operation instead of the product )
we can use these in different ways to create algorithms for our sketch
you can use Math.random()
to create variables for positioning. the random method returns a value between 0 and 1, so if you want your range to be wider ( say between 0 and the width of your canvas ) you need to multiply it by some number
you can use Math.random()
to generate a random integer ( whole number ) between 0 and some number and then use that to choose an item in an array. This is another example of controlled randomness.
trigonometric functions or “circular functions” ( like sine, cosine and tangent ) may have seemed pointless in math class but can and are used for all sorts of things. this is an art class… so we’ll use them to draw. below is a gif that shows how the sine and cosine functions relate to different shapes ( circles and “sine waves” )
step 1: to the right we've created two variables for position and have a fillRect function with it's position parameters set with those variables and it's width and height set to 5
lets say we wanna draw 3 rectangles, we simply need to write the ctx.fillRect();
function three times, but if we wanted to draw 100 or 1000 or 1,000,000 squares we'd have to write an awful lot of code. there's a simpler way to do the same thing over and over again in programming, this is called a 'loop', there are all kinds of loops ( which we'll be talking about next week ) but the simplest is called a for loop seen below
step 2: the for loop will do whatever is in between the {
and the }
however many times you tell it to, in this example it will draw a square in the same spot 100 times
step 3: in this example we're incrementing the value of x and y each time the loop runs ( so the first square will have an x of 1, y of 5, the next will have an x of 2 and a y of 10, the next an x of 3 and a y of 15, and so on )
step 4: now we're going to do more or less the same thing but organize our code a little differently, creating a separate variable for our incremental value ( how much to add each time ) and our starting value ( count which will change each time )
step 5: now lets introduce the Math.sin()
function and assign it as the value for y. this function will return values between 0 and 1 so our sketch should look like a straight line ( with little or no change on the y axis )
step 6: now lets decrease the increment to a fractional value and create a new variable for our radius, this will essentially by the size of our wave. lets multiply it to our current x and y values ( so our y will no longer be between 0 and 1, it will be between 0 and our radius value );
step 7: next lets change the amount of times we're looping to 1000 so we can get a longer wave
step 8: half our wave is going off the top of our screen, so in order to move it down to the center of our screen lets create two new variables, one to calculate the center of our width and the other to calculate the center of our height. then we'll add the centerY variable to our y value which should move our whole wave down to the middle of our page.
Voilà! you've just created the formula for a sine wave! try adjusting some of the values in your variables and notice how the shape changes. try changing your algorithm a bit and see what happens. experiment!
make sure that you have read the article and watched the videos on algorithms above
then create an algorithm for a generative composition which is a little different each time you refresh the page
run your generative sketch over and over again, when you see one you like save it as a png
using the ~
button on your keyboard ( a special key in the wiredlib.js library that will download a png version of your sketch ).
print out your 3 favorite sketches and bring them to class next week