index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Creative Coding FS25</title>
  <!--
  here you link your styling
  ATTENZIONE it needs to be on the same 
  hierarchy level of your index.html file
  -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- 
  here we define a simple block for a project
  it is composed by a container that we will call
  card.
  inside of it there are three elements:
  title <h1></h1>
  image or video <img src="" alt="">
  and text <p></p>
  -->
  
  <h1>Sprint 1</h1>
  For the first sprint our group chose “Seestück 16” by Anton Bruhin from his “Seestücke” series. 
  The series was made using word processing software to create images, then printing and sometimes reworking them with water colors. 
  The reason we chose this piece is mainly because we thought it was aesthetically pleasing, the mixture between abstract shapes with “realistic” shapes (like the boat or the room) makes for an interesting mix. 
  Additionally, all three of us are not very experienced with javascript and we thought that these pictures would be easier to replicate or code than others.
  <div class="cards">
    <a href="Sprint1 v1\index.html" target="_blank">
    <div class="card">
      <h2>v1.0</h2>
      <img src="images/1.1.png" alt="">
      <p>
        It's been about a year since the last time I coded in p5.js, so at first, I was cautious about coming up with ideas; 
        however, I knew even before the course started, that I wanted to create something that was, at least to some extent, interactive. 
        Interaction to me is essential to digital art, because it fully implements the unique features of its (digital) medium and includes the audiences themselves; the recipient turns from uninvolved «passerby» to participating collaborator.
      </p>
    </div>
    </a>

    <a href="Sprint1 v2\index.html" target="_blank">
    <div class="card">
      <h2>v2.0</h2>
      <img src="images/1.2.gif" alt="">
      <p>
        Writing the code went unexpectedly well; while I do not remember all of what I had learned last year, I was still able to quickly get back into it. 
        My plan was to recreate the most important elements in the picture and then modify them in a way that would implement some form of interaction. 
        I started with the background, which consists of simple lines going across the canvas. Then I tried recreating the ellipse-shaped objects. 
        Our lecturer recommended focusing on the lower objects, as the other ones are very complex to reproduce (I welcome the warning). 
        Lastly, I constructed the «hollow box» by placing 4 separate quads on top of each other, to add the illusion of depth.
      </p>
    </div>
    </a>

    <a href="Sprint1 v3\index.html" target="_blank">
    <div class="card big">
      <h2>v3.0</h2>
      <img src="images/1.3.gif" alt="">
      <p>
        With these parts, I then started to implement simple interactions: I used the mouse coordinates to change the size and shape of the objects and then added more variables for color. 
        Finally, I added an interaction over the microphone and a «wave» offset, so the incoming sounds are visualised in a visually pleasing way. 
        At this point I decided to focus mainly on the box, as I found the ellipses rather unfitting.
      </p>
    </div>
    </a>
  </div>
  <hr>
  

<h1>Sprint 2</h1>
In Sprint 2, we had to deal with the topic of “Take a break”. 
We were shown some examples that had rather disruptive effects on browsing behavior and thus prevented users from using the Internet in its “normal form” and consuming content. 
Our task was to program one or more browser extensions that dealt with breaks - whether this meant pauses or “broken systems” was an open question. 
I was very happy with this topic, as I had already worked on such a browser extension in another module, but unfortunately didn't have the time to finish it.
In our group, we then decided to choose visual impairment as a sub-theme and link it to “Take a break”.  
From then on, we all worked on our interpretations of these themes; 
  <div class="cards">
    <div class="card">
      <h2>Tunnelvision</h2>
      <img src="images/tunnelvision.gif" alt="">
      <p>
        My idea was to simulate “tunnel vision”. 
        The internet is full to bursting with content, ads, animations and other garbage. For this reason, I found it exciting to give our eyes a break by focusing the visible on a small area and making the rest invisible.
        It took me several attempts to get it right, as I wanted to span one element across the whole website and I kept having problems activating the extension.
      </p>
    </div>

    <div class="card">
      <h2>Leave Me Alone, Asshole</h2>
      <img src="images/moveit.gif" alt="">
      <p>
        I have also been working on other extensions that deal with other disruptive aspects; 
        one of them makes the browser window flee from the mouse...
      </p>
    </div>

    <div class="card">
      <h2>Screamo</h2>
      <img src="images/screamo.gif" alt="">
      <p>
        ...the second controls scrolling via the microphone volume. 
        Another extension is supposed to use the camera to read the position of the hands and convert it as input so that you have to scroll or click with your hands.
        Unfortunately, this didn't work the way I wanted it to.
      </p>
    </div>
  </div>

  <hr>
<h1>Sprint 3</h1>
In Sprint 3, we were free to decide what we wanted to do. 
Out of all the sprints, I do believe that Sprint 3 was the most fun, as we had enough time to either develop new ideas or go deeper into the previous ones.
<div class="cards">
    <div class="card">
      <h2>Body Painter</h2>
      <img src="images/bodydraw.gif" alt="">
      <p>
        Because my last extension with ml5 failed, I wanted to try again and do something with body tracking.
        Inspired by my fellow students, I decided to make a JS sketch that recognizes the user's body and displays it in an abstract or simplified form.
      </p>
    </div>
    <div class="card big">
      <h2>Intiernet</h2>
      <img src="images/cheese.gif" alt="">
      <p>
        This extension is one of my facvorites. It replaces the cursor with a piece of cheese and disables the click action.
        The user has to place the cheese on the webpage, which causes a mouse to spawn.
        The mouse then first follows the users cursor coordinates back to the cheese and then activates the click action.
        It is a rather simple, but very funny extension that I really enjoyed making.
      </p>
  </div>
  <div class="card">
      <h2>Screamlock</h2>
      <img src="images/screamlock.gif" alt="">
      <p>
        This extension locks the webpage behind an overlay, which can only be removed by constantly screaming into the microphone or making loud noises. 
        My idea was to create some sort of paradox, where the user has to do something else to get rid of the overlay, which is actually blocking the user from using the browser.
      </p>
    </div>
  <div class="card">
      <h2>Rhythm Clicker</h2>
      <img src="images/rhythm.gif" alt="">
      <p>
        The final and most complex extension uses audio files to turn the browser into a rhythmic experience. 
        The user can choose an audio file, which is then analysed for its beats and tempo.
        The extension then creates an overlay that turns red and makes the webpage unclickable.
        However, when the audio plays, the overlay turns green and the user can click on the webpage.
      </p>
    </div>

</body>

</html>