Live web – final project idea : View

  • Background : Let’s look at an old chinese painting. A chinese poem is on the landscape painting. It was mainstream of art back then in east asia. Or look at this work done by Robert Mongomery. He built a statue of poem on actual space. One of my favorite topic for my photography is finding a text in random space in random moment and juxtaposing them to make some meaning out of them. I believe this kind of randomness has potential power to create new genre of literature in the mobile age.This might be little bit awkward question, but what would it look like if shakespeare do live broadcasting with his writing?
  • Idea : View is mobile platform that View of the world from writer with text will be on reader’s view through their mobile camera in real time so that the story will be able to merge into reader’s reality. One single phrase, but totally different feeling based on where readers are. A quick demo will show how it looks like when using AR camera. It allows text to be lied on the scene more naturally and seamlessly. Readers can change font to make different feeling and record the scene as photo or video. So the project could be a kind of experiment as an alternative way of writing and reading literature in this mobile age.

Live web – midterm idea & demo

  • Title :  live emotion map
  • Background : to understand my current and overall emotional state by making a simple web tool for data collecting & visualizing
  • Methodology (1) gathering data completely manually because emotion is only subjectively interpreted by me  (2) data input from mobile web page with multiple choices (3) whenever I input new data from my mobile, visualization of accumulated emotion map will appear in a website (4) anyone who wants to know about me better can visit this website

b6e2282c4ae1fc795942f534789f4db7

  • Step #1 for midterm : build mobile web page for data input and website for visualizing overall result in real time with socket.io

Screen Shot 2017-10-09 at 11.28.25 PM

  • step #2 for final : develop further it into VR room with changing light from emotion data like the carlos cruz diez’s work, chromosaturation.

Visitors wear protective coverings on their shoes as they walk through a light installation called "Chromosaturation" from 1965-2012 by Carlos Cruz-Diez at an exhibition entitled "Light Show" at the Hayward Gallery in London. (Suzanne Plunkett/Reuters)

  • Quick demo for mid-term : I made a simple program to represent idea of live mirror. Through web socket, input from button in mobile webpage goes to view of webcam of my laptop and makes a layer over the cam’s view, run by openframeworks. The color ratio of pixel on webcam’s view is changed according to my selection of colors.

Live Web / WebRTC – Magnifying glass

I made a demo using WebRTC and drawImage() of canvas function. When a user click ‘take photo button, it will capture part of webcam as image and paste expanded version of it into background.

getuserimage_demo_1 getuserimage_demo_2

Click to demo site

<html>

<head>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
    }

    #imagefile {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 100%;
      background-image: url('https://i.ytimg.com/vi/7ZDC8IfVTdQ/maxresdefault.jpg');
      z-index: 1;
    }


    #thecanvas {
      position: absolute;
      margin:0;
      top: 0;
      left: 0px;
      width: 160px;
      height: 90px;
      z-index: 2;
    }

    #thevideo {
      position: absolute;
      margin:0;
      top: 0;
      left: 0;
      width: 160px;
      height: 90px;
      z-index: 3;
    }

    #sendbutton {
      position: absolute;
      top: 70px;
      left: 0px;
      margin: 0px;
      width: 160px;
      height: 20px;
      border-radius: none;
      background: yellow;
      color: black;
      font-size: 0.5em;
      border: none;
      z-index: 4;
      opacity : 0.5;
    }
  </style>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io.connect();

    socket.on('connect',
      function() {
        console.log("Connected");
      }

    );

    socket.on('image',
      function(data) {
        console.log("Got image");
        // document.getElementById('imagefile').src = data;
        document.getElementById('imagefile').style.backgroundImage = "url('" + data + "')";
      }
    );


    var initWebRTC = function() {

      var hdConstraints = {
      video: {
        mandatory: {
          minWidth: 1280,
          minHeight: 720
        }
      }
    };

      // These help with cross-browser functionality
      window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // The video element on the page to display the webcam
      var video = document.getElementById('thevideo'); // if we have the method
      if (navigator.getUserMedia) {
        navigator.getUserMedia(hdConstraints,
          function(stream) {
            video.src = window.URL.createObjectURL(stream) || stream;
            video.play();
          },
          function(error) {
            alert("Failure " + error.code);
          }
        );
      }

      var thecanvas = document.getElementById('thecanvas');
      var thecontext = thecanvas.getContext('2d');

      var draw = function() {
        // thecontext.drawImage(video, randomPositionX, randomPositionY, video.width / 4, video.height / 4, 0, 0, video.width, video.height);
        var randomPositionX = Math.floor(Math.random() * (1280 - 160));
        var randomPositionY = Math.floor(Math.random() * (720 - 90));
        console.log(randomPositionX, randomPositionY)
        thecontext.drawImage(video, randomPositionX, randomPositionX, 160, 90, 0, 0, video.width, video.height);
        var dataUrl = thecanvas.toDataURL('image/webp', 1);

        socket.emit('image', dataUrl);
      };

      document.getElementById('sendbutton').addEventListener('click', draw);
    }

    window.addEventListener('load', initWebRTC);
  </script>
</head>

<body>

  <div id="imagefile">
    <div id="vidoewrapper">
      <video id="thevideo" width="320px" height="240px" autoplay></video>
      <button id="sendbutton">Take Photo</button>
    </div>
    <canvas id="thecanvas"></canvas>
  </div>


</body>

</html>

 

 

Live Web / Socket.io – Lame Chat

As a practice for using socket.io, I made a lame chat deliberately, limiting the choice of words to use. Using twitter streaming API, the app will give you choice of around 200 words from recent twitter within NYC area. You can make a sentence by clicking buttons of words one by one. Still it’s in pretty much conceptual stage, but it might become intriguing app to play with if it’s further developed.

Screen Shot 2017-09-19 at 1.06.00 AM

//server.js

// Twitter part
var Twit = require('twit')

var T = new Twit({
  consumer_key: "ufDGsqlymEGNVLe1aws4H36D1",
  consumer_secret: "LO1Ue4ylzgLFx5AgKR0ABi1bLtBO9HKww5sxbkiwQjqRK5ubyY",
  access_token: "836034020173623296-kfxoDIqip2rhByuadNEgEEANWMOjCl8",
  access_token_secret: "nwhboLj5z6l62cRLdJY9ME3H2Wz7RO8YJRz9EyJdm1C4g",
  timeout_ms: 60 * 1000, // optional HTTP request timeout to apply to all requests.
})

var finalWords = [];

function getTweet() {
  // filter the public stream by the latitude/longitude bounded box of NYC
  var nyc = ['-74.2591', '40.4774', '-73.7002', '40.9162']
  var stream = T.stream('statuses/filter', {
    locations: nyc
  })

  stream.on('tweet', function(tweet) {
    var text = tweet.text;
    text = text.split('http')[0];
    text = text.split('RT')[0];
    text = text.split('@')[0];
    if (text !== "") {
      var words = text.split(' ');
      Array.prototype.push.apply(finalWords, words);
    }
    console.log(finalWords);
    console.log(finalWords.length);

    if (finalWords.length >= 200) {
      stream.stop()
      console.log('stopped');
    }
  })
}


// Chat server part

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket) {
  getTweet();
  console.log("We have a new client: " + socket.id);

  // Send picked words to client
  io.emit('selectedWords', finalWords)

  socket.on('disconnect', function() {
    console.log('user disconnected');
  });

  // Share messages to all
  socket.on('chat message', function(data) {
    console.log("Received: 'chat message' " + data);
    io.emit('chat message', data);

  });
});


http.listen(3000, function() {
  console.log('listening on *:3000');
});
// index.html 


<!doctype html>
<html>

<head>
  <script src="/socket.io/socket.io.js"></script>
  <title>NYC Lame Chat</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    #sendButton {
      width: 100%;
      height: 20px;
      font-size: 13px;
      background: lightgray;
    }

    .wordButton {
      height: 20px;
      font-size: 13px;
    }

    #messageSection {
      width: 100%;
      height: 400px;
      background: black;
      color: white;
      word-wrap: break-word;
      overflow-wrap: break-word;
      font-size: 15px;
    }


    #buttonSection {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="messageSection"></div>
  <div id="inputSection">
    <div id="buttonSection">
    </div>
    <button id="sendButton" onclick="sendMessage()"> send </button>
  </div>

  <script>
    var socket = io();

    socket.on('connect', function() {
      console.log("Connected");
    });

    // Receive words from recent tweets in NYC
    socket.on('selectedWords', function(data) {
      console.log(data);
      for (var i = 0; i < data.length; i++) {
        var text = document.createTextNode(data[i]);
        if (text !== "") {
          var button = document.createElement("button");
          button.setAttribute("class", "wordButton")
          button.appendChild(text);
          button.addEventListener('click', addWords);
          document.getElementById("buttonSection").appendChild(button);
        }
      }
    });

    // Receive message
    socket.on('chat message', function(data) {
      console.log(data);
      document.getElementById('messageSection').innerHTML = document.getElementById('messageSection').innerHTML + " " + data;
    });

    // Put a word on server when choosing(clicking) it.
    function addWords() {
      console.log("chat message: " + this.innerHTML);
      socket.emit('chat message', this.innerHTML);
    }

    // Divide messages by adding line breaker. 
    function sendMessage() {
      console.log("send message");
      socket.emit('chat message', "< <br /><br />");
    }
  </script>

</body>

</html>

 

 

 

Live Web – an example of live web & self portrait

An example of live web – Your world of text

One of my favorite. It’s endless, chaotic, collaborative, random, useless and hollow like web itself. Your World of Text is an infinite grid of text editable by anyone. The changes made by other people appear on your screen as they happen. You can infinitely scroll through the world to see people’s scribbles. It’s a live gigantic empty sketchbook for everyone or just you. You can create your own URL to go to a new world starting off blank like http://yourworldoftext.com/liveweb. Strictly, it might not fall into category of live web, but one of the features forces me to place it in. Being raw without any kind of censorship prior to be disclosed is dangerous but meaningful thing about being live.

 

Self portrait – Something I like

With using html5 video tag and simple click interaction, I made a single page web of gifs collection from what I like. When clicking one of gifs, it will be highlighted with playing video while other are paused and faded out. Here is the link of demo.

self1

self2

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:900" rel="stylesheet">
<style>
body {
margin: 10px;
}

.wrapper {
width: 810px;
display: grid;
grid-gap: 3px;
grid-template-columns: 200px 200px 200px 200px;
background-color: #fff;
}

.snippet {
font-family: 'Raleway', sans-serif;
color: #fff;
font-size: 20px;
width: 150px;
height: auto;
padding-top: 10px;
padding-left: 10px;
position: fixed;
z-index: -1;
}

.box {
background-color: #fff;
border-radius: 0px;
margin: 0;
width: 200px;
height: 130px;
overflow: hidden;
}

.video {
margin: 0;
width: 135%;
transform: translateX(-10%) translateY(-10%);
height: auto;
}
</style>
<title>Self Portrait of Younho</title>
</head>

<body>
<div class="wrapper">
<div class="box">
<div class="snippet">Yeah I was a mad man</div>
<video class="video" src="https://media.giphy.com/media/39TWBQZ296G40/giphy.mp4" autoplay="" loop=""></video>
</div>
<div class="box">
<h1 class="snippet">Love Knicks as much as I hate it</h1>
<video class="video" src="https://media.giphy.com/media/ym3yVHEIgWEG4/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">I'm a part time nanny..or fulltime</h1>
<video class="video" src="https://media.giphy.com/media/13AXYJh2jDt2IE/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">You should try it!!!</h1>
<video class="video" src="https://media.giphy.com/media/3ofSB1BswqflLVt4ic/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Yes I watched the whole season again</h1>
<video class="video" src="https://media.giphy.com/media/UHLtCLwRsbDFK/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Black. Iced. Need it now</h1>
<video class="video" src="https://media.giphy.com/media/l41lRi0VWdnH90yJy/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Kind of blue : all time favorite</h1>
<video class="video" src="https://media.giphy.com/media/u0SaOREpBwSTC/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Time to go home...</h1>
<video class="video" src="https://media.giphy.com/media/3oriffVYPYhQbDRe3C/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">I had a dream...</h1>
<video class="video" src="https://media.giphy.com/media/3oz8xFHHldmilI2Was/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Who doesn't???</h1>
<video class="video" src="https://media.giphy.com/media/CdqNOCOc8Lcw8/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Shouldn't have started it...</h1>
<video class="video" src="https://media.giphy.com/media/vyPLDShqm3j5S/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">...of course I'm joking</h1>
<video class="video" src="https://media.giphy.com/media/26tn33aiTi1jkl6H6/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">No.1 destination</h1>
<video class="video" src="https://media.giphy.com/media/3o85xJWqnjH1Xu5rmE/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">lol</h1>
<video class="video" src="https://media.giphy.com/media/1mtKnWJVTpUKQ/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">It's not pink...</h1>
<video class="video" src="https://media.giphy.com/media/k0H9IeP5g4O52/giphy.mp4" autoplay="" loop="">
</div>
<div class="box">
<h1 class="snippet">Don't overcook please...</h1>
<video class="video" src="https://media.giphy.com/media/xUA7aU4305QHkswlji/giphy.mp4" autoplay="" loop="">
</div>
</div>
<script type="text/javascript">
$('.video').each(function(e) {
$(this).on("click", pause);
$(this).on("mouseout", play);
});

var r, g, b;

function pause(e) {
randomNumber();
this.parentNode.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
this.style.opacity = 0.4;
$('.video').not(this).each(function() { $(this).get(0).pause(); });
$('.video').not(this).each(function() { $(this).get(0).style.opacity = 0.15; });
$('.video').not(this).each(function() { $(this).get(0).parentNode.style.backgroundColor = 'white'; });
this.parentNode.children[0].style.zIndex = 2;
}

function play(e) {
this.play();
this.parentNode.style.backgroundColor = '#fff';
this.style.opacity = 1;
$('.video').each(function() { $(this).get(0).play();});
$('.video').not(this).each(function() { $(this).get(0).style.opacity = 1; });
$('.video').not(this).each(function() { $(this).get(0).parentNode.style.backgroundColor = '#fff';});
this.parentNode.children[0].style.zIndex = -1;
}

function randomNumber() {
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
}
</script>
</body>

</html>