Optional Evaluation Questions

Posted on April 30, 2018 by Ben

What is one thing you would most like to change to improve this class? This could be something about the content, structure, instruction, environment, or anything else.
Now that you’re near the end, what advice would you give to a student who is considering taking this course in the future?

code for chase

Posted on April 23, 2018 by Ben

ready('a',function(e) { 
    var links = j(e);
    var numlinks = links.length;
    var mylinks = Array();

    links.each(function() {
        mylinks.push(j(this).attr('href'));
    });

    shuffle(mylinks);

    var i = 0;

    links.each(function() {
        j(this).attr("href",mylinks[i]);
        i++;
    });
});

function shuffle(a) {
    for (let i = a.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
}

code for jayson

Posted on April 23, 2018 by Ben

setInterval(function() { 
    var x = getRandomInt(20)+10;
    j('*').animate( {
        "font-size":newsize
    },2000);
}, 1000);

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

jayson

Posted on April 9, 2018 by Ben

<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }

    body {
        font-size:180%;
        font-family:"Open Sans";
    }

    .dot {
      width:6px;
      height:6px;
      border-radius:50%;
      position:absolute;
      background-color:black;
      left:0;
      top:0;
      opacity:0.5;
    }

    .box {
      width:100px;
      height:100px;
      background-color:green;
      position:absolute;
      left:0;
      top:0;
    }

  </style>

  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<!-- firebase interaction code -->
<script>

  var j = jQuery.noConflict();
  
  // Initialize Firebase
  // PASTE BELOW YOUR var config = { ... set of lines below
  var config = {
    apiKey: "AIzaSyDtpm4-ja20S0w7X8M8wXlakRWFgmQa9DY",
    authDomain: "test1-e3791.firebaseapp.com",
    databaseURL: "https://test1-e3791.firebaseio.com",
    projectId: "test1-e3791",
    storageBucket: "test1-e3791.appspot.com",
    messagingSenderId: "504865521252"
  };

  firebase.initializeApp(config);

  var db = firebase.database();
  var boxTop = db.ref("boxtop");
  var boxLeft = db.ref("boxleft");

  boxLeft.on('value',function(dataSnapshot) {
    var newLeft = dataSnapshot.val();
    j('.box').css("left", parseInt(newLeft)+"px");
  });

  boxTop.on('value',function(dataSnapshot) {
    var newTop = dataSnapshot.val();
    j('.box').css("top", parseInt(newTop)+"px");
  });



  j(document).ready(function() {

    j(document).keyup(function(e) {

      console.log("hi");
      if(e.keyCode == 38) { // up
        console.log("up");
        boxTop.transaction(function(current) {
          return current - 1;
        });
      }

      if(e.keyCode == 40) { // down 
        boxTop.transaction(function(current) {
          return current + 1;
        });
      }

      if(e.keyCode == 37) { // left
        boxLeft.transaction(function(current) {
          return current - 1;
        });
      }

      if(e.keyCode == 39) { // right
        boxLeft.transaction(function(current) {
          return current + 1;
        });
      }
  
    });

  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div class="box"></div>
  </div>

</body>
</html>

code for mitch and kathleen

Posted on April 4, 2018 by Ben

<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }

    body {
        font-size:180%;
        font-family:"Open Sans";
    }

    .dot {
      position:absolute;
      height:6px;
      width:6px;
      background-color:black;
      border-radius:50%;
    }
  </style>

  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();

  var randomColor = Math.floor(Math.random() * 128);
  
// config here

  firebase.initializeApp(config);

  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");
  var boxLocation = db.ref("boxLocation");
  var mydir = db.ref("dir");
  var userCount = db.ref("userCount");
  var seenUserCount = 0;


  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];

    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    //newDot.css("background-color",100);
    j('#container').append(newDot);
  });

  erase.on('value',function() {
    j('.dot').remove();
  });

  boxLocation.on('value',function(dataSnapshot) {
    var position = dataSnapshot.val();
    j('#log').text(position);

  });

  userCount.on('value',function() {
    seenUserCount++;
    if(seenUserCount > 2) seenUserCount = true; 
    console.log("suc: "+seenUserCount);
  });

  // runs when the page is fully loaded
  j(document).ready(function() {
    userCount.transaction(function(current) {
      return current+1;
    });

    j(document).keydown(function(e) {
      var direction;

      console.log("WHAT");
      if(e.keyCode == 37) direction = "left";
      else if(e.keyCode == 39) direction = "right";

      console.log(direction);
      
      mydir.transaction(function(current) {
        return direction; 
      });



    });

      j('body').click(synth1);

    function synth1() {
      console.log("here");
      if(seenUserCount == true) return;
      else { console.log("play sound"); }
    }


    j(document).mousemove(function(e) {
      var position = e.pageX+","+e.pageY;


      dot.transaction(function() {
        return position;
      });

    });
  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>

</body>
</html>

Sample Drawing on Firebase Code

Posted on April 4, 2018 by Ben

<!DOCTYPE html>
<head>
  <title>Firebase Counter Demo</title>

  <!-- inline style (could be replaced with a linked .css file -->
  <style>
    button { 
        border:1px solid gray;
        width:40px; 
        padding:10px 10px;
          margin-bottom:5px;
    }

    body {
        font-size:180%;
        font-family:"Open Sans";
    }

    .dot {
      position:absolute;
      height:6px;
      width:6px;
      background-color:black;
      border-radius:50%;
    }
  </style>

  <!-- load firebase and jquery code -->
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<!-- firebase interaction code -->
<script>
  var j = jQuery.noConflict();

  var randomColor = Math.floor(Math.random() * 128);
  
  // PUT YOUR CONFIG HERE

  firebase.initializeApp(config);

  var db = firebase.database();
  var dot = db.ref("dot");
  var erase = db.ref("erase");

  dot.on('value',function(dataSnapshot) {
    var rawData = dataSnapshot.val(); // "300,100"
    var xyData = rawData.split(',');
    var x = xyData[0];
    var y = xyData[1];

    var newDot = j("<div class='dot'></div>");
    newDot.css("left", x+"px");
    newDot.css("top", y+"px");
    //newDot.css("background-color",100);
    j('#container').append(newDot);
  });

  erase.on('value',function() {
    j('.dot').remove();
  });


  // runs when the page is fully loaded
  j(document).ready(function() {
    j(document).keypress(function() {
      erase.set(Math.random());
    });



    j(document).mousemove(function(e) {
      var position = e.pageX+","+e.pageY;

      dot.transaction(function() {
        return position;
      });

    });
  });


</script>

  <!-- finally, our HTML -->
  <div id="container">
    <div id="log"></div>
  </div>

</body>
</html>

randoBorder() function

Posted on March 5, 2018 by Ben

    function randoBorder(e) {

        var c1 = "purple";
        var c2 = "red";
        var c3 = "green";

        var pick = Math.floor(Math.random() * 3);

        var color;

        if(pick == 0) color = c1; 
        else if(pick == 1) color = c2; 
        else if(pick == 2) color = c3; 

        j(e).css('border','1px solid '+color);
        //j(e).attr('img',color);
    }

Anonymous vs Declared Functions

Posted on February 26, 2018 by Ben

// 2 ways to write a function...
// anonymous functions vs declared functions

// the 'anonymous function' way
// do it the work right there
//
// use the anonymous function as the 
// 2nd parameter to ready
ready('a', 
  function(e) {
    j(e).css('border','1px solid red');
    j(e).text("I was here");
  }
);


// the declared function way
// abstract the work and let it be re-used
//
// create your own function, declare
// it elsewhere, and refer to it when
// needed
ready('a', hideHi);

function hideHi(e) {
  var text = j(e).text();

  if(text.contains("Hi")) {
      j(e).hide();
  }
}

Posted on February 7, 2018 by Ben

j('a').css('border','1px solid blue');

jQuery Exercise Feb 7

Posted on February 7, 2018 by Ben

1. At the bottom of the NY Times homepage, write one line of Javascript/jQuery to set the background color of the “ARTS” heading in light blue (as illustrated below).

2. On the Wikipedia page for jQuery, write one line of Javascript/jQuery that highlights both the header and the “edit” text in their own green borders (as illustrated below).

3. On this Amazon page, use a single line of Javascript/jQuery to highlight the bold headings in the tech specs table (like this).

When you have it, post your code to your blog for all three exercises. Follow these instructions on how to post the code.

Rushkoff Quote

Posted on January 17, 2018 by Ben

When human beings acquired language, we learned not just how to listen but how to speak. When we gained literacy, we learned not just how to read but how to write. And as we move into an increasingly digital reality, we must learn not just how to use programs but how to make them. In the emerging highly programmed landscape ahead, you will either create the software or you will be the software. It’s really that simple: Program, or be programmed. Choose the former, and you gain access to the control panel of civilization. Choose the latter, and it could be the last real choice you get to make.

— Douglas Rushkoff, Program or Be Programmed

How To Post Code On The Blog

Posted on February 5, 2014 by Ben

To insert Javascript/jQuery code into your posts, do the following:

1. Change to the Text input mode (and stay there!)
2. Paste your code
3. Wrap your code in these tags: [code lang="javascript"] and [/code]

Example:

var j = jQuery.noConflict();
j('a').css('border','1px solid red');

Examples of Net Art

Posted on January 22, 2014 by Ben

We’ll look at a number of examples of net art throughout the semester, but here’s a selection of works and artists we’ll look at on the first day. (in no particular order)

JODI – example, blurb by mark tribe
Matthew Fuller & I/O/D – The Web Stalker (and here)
Hasan Elahi – Tracking Transience
Heath Bunting/Kaylee Brandon – BorderXing Guide
Eva and Franco Mattes – Life Sharing
Guido Segni – The Artist is Typing
F.A.T. Lab – CTRL+F’D
Faith Holland – Porn Interventions
Mark Napier – Shredder
Joana Moll – CO2GLE
Jaromil – Forkbomb
Rafaël Rozendaal – Text-Free Browsing, Abstract Browsing
Keith Obadike – Blackness
Julian Oliver – Harvest, Newstweek
Steve Lambert – Add Art
Daniel Howe and Helen Nissenbaum – TrackMeNot, AdNauseam
Lauren McCarthy – Social Turkers, Get Lauren, Friend Crawl
Yes Men – gatt.org, Iraq War Ends
César Escudero Andaluz – Bittercoin
Danielle Sucher – Jailbreak the Patriarchy
Ubermorgen.com / James Baumgartner – Vote-auction.com
Ben Grosser – ScareMail, Facebook Demetricator, Tracing You, Go Rando
Nicolas Maigret – Pirate Cinema, Predictive Art Bot
Kyle McDonald / Jonas Lund / Jonas Jongejan – Social Roulette
Owen Mundy – I know where your cat lives, commodify.us
Jan Robert Leegte – Table Border 2017
Ken Goldberg – Telegarden
Stephanie Rothenberg – Reversal of Fortune
Constant Dullart – The Revolving Internet, Death of the URL
Patrick Lichty – Random Internet Cats
Paolo Cirio / Alessandro Ludovico – Face to Facebook
Jonah Brucker-Cohen – Google Alert Loop
Aram Bartholl – Map
Winnie Soon – Unerasable Images
Anthony Antonellis – Facebook Bliss

Net Art Resources:
Neural
Rhizome
Rhizome Net Art Anthology
nettime mailing list
Turbulence
Furtherfield
Whitney Artport
Transfer Gallery
The Wrong
New Aesthetic Tumblr

Welcome to ARTS 445: Net Art!

Posted on January 20, 2014 by Ben

Here’s where you’ll post everything, write everything, think everything, do everything. Live the blog. Be the blog. Exemplify the blog. Post about the blog to Facebook/Twitter/Tumblr/etc/etc/etc.