## Sepho-Scope

For my loop I chose to do a pretty simple pulse design that travels around the ring. I made it using a line connecting multiple vertices.

## Sepho – Animated Loop

I was really fascinated with the method of using circular motion over Perlin noise to get random yet looping 1-D graph. For my GIF I decided to expand on this by using two 1-D graphs as x and y positions for points to get a random motion that looped. I then made many points that moved in random loops and created shapes from them, resulting in crazy, abstract, looping shapes. Overall this project was a fun exploration of how math and graphs can translate to motion and visa versa.

Visualization of point movement:

## Sepho – LookingOutwards01

I have to be honest, prior to this class I haven't had any prior exposure to a lot of interactive and computational art outside of video-games, and one game that I have played really stands out to me as doing something profound and interesting with interaction. That game is Dark Souls III, made by From Software on their own engine and funded by Sony. To me, what really stood out about this game was their ability to really use interactivity as its own medium to express ideas and evoke feelings from the player instead of just using it as a device to drive the story. Dark souls as a game is a convoluted, labyrinthine with looming, powerful obstacles  and large hyper-Gothic architecture. Everything from the music to the character design and color pallet is meant to make the player feel small, confused, lost and alone and the game play perfectly echoes those feelings. The level design collapses back on itself and can be frustrating to navigate and everything about combat and exploration can be completely daunting to some. It is the first game I have seen that wasn't designed just to be enjoyable, but to convey ideas and emotions about the world using  the medium of interactivity instead of exposition, and this is where I think interactive art thrives and is truly unique.

## Sepho – Interruptions

1. the artwork is square.
2. the work is made of many small black lines on a white background.
3. the lines are of the same length.
4. the lines are all turned at different angles.
5. the lines slightly intersect occasionally.
6. there are occasional gaps in the lines.
7. the lines do not touch the edge of the page
8. most of the lines point in the same direction.
9. the lines seem to almost be in a grid pattern with a few exceptions.
10. there are occasionally multiple lines coming from the same point

```////// based on Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;

function setup() {
createCanvas(720, 720);
background(255,255,255)
noStroke();
boolDoRefresh = true;
}

var length = 25;
var gridSize = 15;
var lines = []
var gaps = []

print(x);
var r = random(100 * noise(x,y));
gaps.push([x,y,r]);
}

function distance(x1,y1,x2,y2){
return sqrt(sq(x2-x1) + sq(y2-y1));
}

var theta = random(360);
var x2 = x1 + (cos(theta) * length);
var y2 = y1 + (sin(theta) * length);
lines.push([x1,y1,x2,y2]);
}

function draw() {
if (boolDoRefresh) {
// DRAW STUFF HERE....
boolDoRefresh = false;
background(255,255,255)
lines = [];
gaps = [];
fill(255,0,0);

//creates new gaps on each click
for(var x = gridSize; x <= width - gridSize; x += gridSize){
for(var y = gridSize; y <= height - gridSize; y += gridSize){ if(noise(x,y) > 0.82 && random(4) > 3){
}
}
}

strokeWeight(1.5);
stroke(0);

//creates and draws new lines on each click
for(var x1 = gridSize; x1 <= width - gridSize; x1 += gridSize){
for(var y1 = gridSize; y1 <= height - gridSize; y1 += gridSize){
var isInGap = false;
for(var i = 0; i < gaps.length; i++){
if(distance(x1,y1,gaps[i][0],gaps[i][1]) < random(50,70)){
isInGap = true;
}
}
if(!isInGap){
var theta = random(360);
var x2 = x1 + (cos(theta) * length);
var y2 = y1 + (sin(theta) * length);
line(x1,y1,x2,y2);
}
}
}

}
}

function mousePressed() {
boolDoRefresh = true;
}
```
1. In an attempt to replicate this piece I first started with a grid of dots and then I drew short lines coming from those dots at various angles. I then used the noise() function to try and make a Perlin-noise like gap in the lines. For me the hardest part about replicating this work was the grid-like but not perfect grid that she managed to create and also a very kind of natural and abstract way of creating gaps in her lines. Additionally her lines really only intercept each other ever so slightly while mine can completely cross each other. Overall it was way more challenging to recreate this piece than I initially thought.

## Sepho-Intersections

```//// Based on the Starter Code for "Embedded Iteration + Randomness" var boolDoRefresh;   var lines = []; var lineNumber = 12; //&lt;&lt;-----change this number to add/remove lines!   function setup() { createCanvas(720, 480); background(20,20,50) noStroke(); boolDoRefresh = true; }   // Math for the intersection of two lines from Paul Bourke http://paulbourke.net/geometry/pointlineplane/ //takes two lines and returns the x,y value for the inersection of those lines function intersec(a,b){ var x1 = a[0]; var y1 = a[1]; var x2 = a[2]; var y2 = a[3];   var x3 = b[0]; var y3 = b[1]; var x4 = b[2]; var y4 = b[3];   var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / ((y4-y3) * (x2-x1) - (x4-x3) * (y2-y1)); var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / ((y4-y3) * (x2-x1) - (x4-x3) * (y2-y1)); var x = (x1 + ua * (x2 - x1)); var y = (y1 + ua * (y2 - y1));   if (ua &lt; 0 || ua &gt; 1 || ub &lt; 0 || ub &gt; 1) { return [-20,-20]; }   return[x,y]; }   //moves the lines according to each points velocity. function updateLines(lines){ for(var i = 0; i &lt; lines.length; i++){ var l = lines[i]; l[0] += l[4]; l[1] += l[5]; l[2] += l[6]; l[3] += l[7]; } }     function draw() { updateLines(lines);   //Draws all of the lines: background(20,20,50) stroke(255, 50); fill(255); for(var i = 0; i &lt; lines.length; i++){ line(lines[i][0],lines[i][1],lines[i][2],lines[i][3]); }   //Draws a red dot at all of the intersections: for(var i = 0; i &lt; lines.length; i++){ for(var j = 0; j &lt; lines.length; j++){ if(i != j){ la = lines[i]; lb = lines[j]; noStroke() fill(255,0,0); ellipse(intersec(la,lb)[0],intersec(la,lb)[1],3); } } }   if (boolDoRefresh) { boolDoRefresh = false; //Creates new lines: lines = []; for(var i = 0; i &lt; lineNumber; i++){ lines.push([random(width),random(height),random(width),random(height),random(-1,1), random(-1,1),random(-1,1),random(-1,1)]) } } }   function mousePressed() { boolDoRefresh = true; }```

## Sepho-IterationExercise

```// Starter Code for "Embedded Iteration + Randomness"
var boolDoRefresh;

function setup() {
createCanvas(400, 400);
background(20,20,50)
noStroke();
boolDoRefresh = true;
}

function draw() {
if (boolDoRefresh) {
// DRAW STUFF HERE....
boolDoRefresh = false;
background(20,20,50)
for (var x = 35; x <= width - 30; x += 30) {
for (var y = 35; y <= height - 30; y += 30) { var rando = random(5); if(rando > 1) {
fill(255,250,150);
rect(x-13, y-13, 26, 26);
fill(20,20,50);
rect(x-10, y-10, 20, 20);
fill(255,250,150);
rect(x-5, y-5, 10, 10);
}
else {
fill(20,20,50);
rect(x-13, y-13, 26, 26);
fill(255,250,150);
rect(x-10, y-10, 20, 20);
fill(20,20,50);
rect(x-5, y-5, 10, 10);
}
}
}
}
}

function mousePressed() {
boolDoRefresh = true;
}
```