# Algorithms

"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 [...]

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. " 1

from NASA to call centers...

Conway wanted to build a bot that would know what callers wanted before they even asked for it. [...] Conway wanted to take humans out of it. Because it was a quantitative method, it was possible, Conway figured, to build bots that could read customers’ minds, “We are categorizing the human language,” he says. [...] The results were nothing short of astounding. When a caller reached a personality much like their own, calls lasted about five minutes and the problem was resolved 92 percent of the time. That’s high-quality customer service by any measure. When a customer’s call landed with an agent with an opposite personality, however, the difference was amazing: ten-minute calls and a 47 percent problem resolution rate. [...] With drastically shorter call times, a company like AT&T could eventually eliminate a third of its call center costs—provided that Conway could actually build the kinds of bots necessary to make it possible. As it turned out, it was very possible.

Christopher Steiner 2 "It used to be, when you ordered something on the Internet, you waited a week for it to show up. That was the deal: you didn’t have to get off the couch, but you had to wait. But in the last few years, that’s changed. Now, increasingly, the stuff we buy on the Internet shows up the next day or the same day, sometimes within hours. Free shipping included. Which got us wondering: How is this Internet voodoo possible?" 3 “what is the statistical likelihood that i’ve been a guinea pig in one of your experiments”
“i believe uh one hundred percent” (laughter)
“any given person is currently involved in, what? 10 different experiments? yep.”
“...that kinda blew me back a little bit, I’ve been a research subject and I had no idea” 4

## Algorithmic Composition

### how libraries help

how to create a drawing canvas and draw an ellipse to it in purse JavaScript

``````
//create canvas
var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

// draw an ellipse
function ellipse(x,y,w,h){
var kappa = 0.5522847498,
ox = (w / 2) * kappa,
oy = (h / 2) * kappa,
xe = x + w,
ye = y + h,
xm = x + w / 2,
ym = y + h / 2;
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
}

ellipse( 100, 100, 100, 50 );

``````

how to do the same thing as the code on the left with the p5.js library

``````
function setup(){
// create canvas
createCanvas(600, 400);
// draw an ellipse
ellipse( 100, 100, 100, 50 );
}
``````

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web. ### Animation Loop + Interactivity

two key components we need to make our drawings interactive are inputs and loops. there are lots of different kinds of inputs which can be used to interact with a web art piece, the typical input devices that come with most computers are keyboards, mouse, camera and microphone. we’ll get started by using the mouse. the second component, loops, is another very important concept in programming ( which we were introduced to last week ).

Up until now we’ve used pre defined functions from the p5.js library ( like `ellipse();` ) but we can also create our own custom functions by organizing lines of code into special function blocks. the first thing we type is the keyword `function`, this means we’re about to declare a new function ( similar to the way we type “var” when we’re going to declare a new variable ). then we name the function whatever we want, just like we do our variables, so long as we add parentheses `()` at the end of the name. then between the `{` and the `}` we add our instructions. all the functions we used last week are part of p5.js, but what we didn’t cover was the basic setup. you need to create two empty functions at the start of any p5.js sketch `setup()` and `draw()` . the setup function runs once at the start of your program while the draw function loops indefinitely ( at roughly 60 times a second ). Like width and height from last week, the p5.js library also has global variables you can access to interact with the mouse, `mouseX` and `mouseY` return the x and y coordinaets of the mouse, `mouseIsPressed` returns “true” when the mouse is pressed and “false” when it is not. with all this we can create a simple drawing app.

if you're curious here's what a pure JavaScript versions looks like

### Algorithmic Animation

animation is similar to interactivity in that it also needs a draw loop but instead of using input variables with values that change each frame ( like mouseX and mouseY ) we’ll create our own variables that change based on our own programmed logic.

``````
function setup(){
createCanvas( window.innerWidth, window.innerHeight );
}

function draw(){

}
``````

step 1: next we'll create a couple of variables ( x and y ) above our setup function and set them both to 0. then inside our draw function lets create a circle using the `ellipse()` function, taking our new x and y variables as the x,y parameters and then we'll type in 20 for both the width and height parameters.

``````
var x = 0;
var y = 0;
function setup(){
createCanvas( window.innerWidth, window.innerHeight );
}

function draw(){
ellipse(x,y,50,50);
}
``````

step 2: next we'll create a couple new variables called dx and dy, these will be the number we want to increment our position by in each frame, we'll start by setting both to 1, but we can make this bigger if we want to speed up our movement. then in our draw function ( above the ellipse() ) we'll add `x += dx;` which increments our x value by the value of dx each frame ( this means each animation frame the value of x will go up by 1 ) and likewise add `y += dy;` below that to do the same for the y value;

``````
var x = 0;
var y = 0;
var dx = 1;
var dy = 1;

function setup(){
createCanvas( window.innerWidth, window.innerHeight );
}

function draw(){
x += dx;
y += dy;
ellipse( x, y, 20, 20 );
}

``````

step 3: you’ll notice that as the circle moves across the screen it leaves a streak behind it, this is because each frame simply draws over the last one. if we want to erase whatever was on the screen in the last frame before drawing the new frame add `clear();` to the top of your draw function so that the entire canvas clears before drawing the next frame.

``````
var x = 0;
var y = 0;
var dx = 1;
var dy = 1;

function setup(){
createCanvas( window.innerWidth, window.innerHeight );
}

function draw(){
clear();
x += dx;
y += dy;
ellipse( x, y, 20, 20 );
}

``````

step 4: you’ll notice that when the circle reaches the bottom of the screen it’s gone ( doesn’t bounce back ), in order to get it to bounce we need to create a conditional statement. to our code on the right we’ve added the following condition: if the current y value ( ie. y position of the circle ) is greater than the total height of our canvas, then reverse the incrementing value ( ie. our dy ) so that our circle now goes up instead of down.

``````
var x = 0;
var y = 0;
var dx = 1;
var dy = 1;

function setup(){
createCanvas( window.innerWidth, window.innerHeight );
}

function draw(){
clear();
x += dx;
y += dy;

if( y > height ) {
dy = -dy;
}

ellipse( x, y, 20, 20 );
}

``````

step 5: so now our circle bounces when it hits the bottom of the screen but when it reaches the top it flies off the screen again. to recreate the logic in the other direction we need to create a second conditional statement which reverses the direction of our y increment dy = -dy; if our y position goes below 0 ( ie. if it’s above the top of our screen )

``````
var x = 0;
var y = 0;
var dx = 1;
var dy = 1;

function setup(){
createCanvas( window.innerWidth, window.innerHeight );
}

function draw(){
clear();
x += dx;
y += dy;

if( y > height ) {
dy = -dy;
}
if( y < 0 ){
dy = -dy;
}

ellipse( x, y, 20, 20 );
}

``````

step 6: lastly we’ll recreate the same logic for the x position along the x axis, and now we’ve got a circle that increments its position by 1 each new frame, but “if” it reaches any of the four edges of the screen it reverses the direction of the incrementing value… which is the algorithm for creating a bouncing circle

### ARRAY ( data structure )

each time the for loop above runs the value of x and y change, we can change the value of a variable as many times as we want, but typically we can only assign one value to each variable. sometimes it’s helpful to assign lots of different related values to a single variable we can do this with something called an array, an array value begins with a `[` followed by the values separated by `,` and then ends with a `]` you can get a specific value in an array by calling the array name followed by the brackets with the index number of the value you want inside the brackets. the index is the order or place in the array the value you want is in. remember that in programming we start counting from 0, so the first value is `primes` and the second value is `primes`

you can also find out how many items are in an array by using the array property `.length`

``````
var primes = [ 2, 3, 5, 7, 11 ];

primes; // returns the value 2
primes; // returns the value 3
primes; // returns the value 5
primes; // returns the value 7
primes; // returns the value 11

primes.length // returns the value 5
// because there are 5 items in the array

``````

in the example below i’ve created an array called f which contains the first few numbers of the Fibonacci Sequence ( a set of numbers which have been used by artists to create “beautiful” composition for centuries ). we then create a for loop that loops as many times as their are items in the array i < f.length and then we use the iterator variable ( i ) to select that particular value `f[i]` in the array and create a simple algorithm with it.

### SINE + COSINE

trigonometry art! the 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. here is a gif that shows how the sine and cosine functions relate to different shapes ( circles and “sine waves” ) the example below uses the `sin()` function and some simple arithmetic to create a vertical sine wave pattern, adjust the different number values to see how it changes the composition.

we can put our circle function inside of an animation loop and use the sine and cosine functions to determine it’s x, y and radius parameters. in order for there to be some kind of change from frame to frame we need to pass the sine and cosine function a value that changes each frame. one simple way to do this is to call the current frame using `frameCount`.

### Visiting Artist ## homework

...

### endnotes

1. Dvorsky, George. The 10 Algorithms That Dominate Our World.. io9.com
2. Steiner, Christopher. Automate This: How Algorithms Came to Rule Our World. Penguin Random House. 2012.