[Stupid_Hackathon] Stupid Font

By jhclaura in Blog, Fall 2014, Fun 5 Comments

For the 3rd Stupid Shit No One Needs And Terrible Ideas Hackathon, I made three fonts:

  1. Stupid.ttf
  2. ReallyStupid.ttf
  3. Laura.ttf

Here to download the package and it’s of course free to use!

The idea for each one is:

  1. Hand tracing the most expensive font in the world. If user likes it, user will eventually buy the most expensive font in the world.stupidFont_1
  2. A really stupid font that when user types “I’m smart”, it shows “I’m stupid.” And also exchange + / -,  , / ., { / }, crossed out $ and ∞, etc.stupidFont_2
  3. For presenting artistic proposal for various projects. From now on, I don’t have to hand trace Times New Roman anymore.lauraFont

Gif-Overload {Giphy API}

By jhclaura in Blog, Fun, Mashups Web APIs, Spring 2014 0 Comment

Last semester, for my final project for Comm Lab: Web, I made an API meshup website LOST, using Youtube, TheCatAPI, Iheartquotes API.

past1

LOST_homepage

past2

LOST_”No, I’m not.” page

It’s interesting to see images animated in the stop-motion way, so I want to do more with GIFs first, and then later maybe develop into video with sound. For an assignment to build  single web page that displays (some of) the data you found with some basic css styling, I found an API from Giphy, a animated GIFs search website. On the Github of Giphy, the API is well documented and has following functions: search, GIF by id, translate, random, trending. And also, according to their Github,

The Giphy API implements a REST-like interface. Connections can be made with any HTTP enabled programming language. The Giphy API also implements CORS, allowing you to connect to Giphy from JavaScript / Web browsers on your own domain.

To warm up my API-skill for new semester, I use search function, and give 3 choices: Cat, Grilled Cheese, and Coding to display 25 related GIFs from Giphy API, and also a reset button to display pure background. Unfortunately the search function gives you fixed searching result. Might need to twig the offset parameter… Check it out!

Screen Shot 2014-02-05 at 8.33.47 PM

And here are the codes.

php file

<!DOCTYPE HTML>

<html> 
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

		<title>Giffff</title>
	</head>
	<body>
	<!-- white words-->
	<h1>Gif-Overload!</h1>
	<!-- rainbow words -->
	<!-- <h1><span class="rainbow">Gif-Overload!</span></h1> -->
	<form align="center" method="post">
    	<div class="button">
        	<button type="submit" value="clear" name="choice"> Reset </button>
	    </div>
	</form>

	<form align="left" method="post">
    	<div class="button1">
        	<button type="submit" value="cat" name="choice"> Cat </button>
	    </div>
	</form>

	<form align="center" method="post">
    	<div class="button">
        	<button type="submit" value="grilled+cheese" name="choice"> Grilled Cheese </button>
	    </div>
	</form>	

	<form align="right" method="post">
    	<div class="button2">
        	<button type="submit" value="coding" name="choice"> Coding </button>
	    </div>
	</form>

	<p align="center">
		<?php

		$choice = $_POST['choice'];

		// mode: search
		$url = 'http://api.giphy.com/v1/gifs/search?q='.$choice.'&api_key=dc6zaTOxFJmzC';

		// mode: translate
		//$url = 'http://api.giphy.com/v1/gifs/translate?s='.$choice.'&api_key=dc6zaTOxFJmzC';

		// mode: random
		// $url = 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='.$choice.'';

		// Get the document at this url
		$response = file_get_contents($url); 
		// echo $response; //debug

		// Parse XML with SimpleXML in PHP http://www.php.net/manual/en/simplexml.examples-basic.php
		$pics = json_decode($response);
		//var_dump($pics); // take a look at this to see what data you get back

		if ($choice == 'clear') {
			echo '';
		} else {
			for ($i=0; $i<25; $i++) {
				// mode: search
				echo '<img src="'.$pics->data[$i]->images->fixed_height->url.'">';
			}
		}

		// mode: translate
		//echo '<img src="'.$pics->data->images->fixed_height->url.'">';

		// mode: random
		//echo '<img src="'.$pics->data->image_url.'">';

		?>
	</p	>
		
</body> 
</html>

css file

body{
	background-image: url('galaxy.png');
}

h1{
	text-align: center;
	font-family: 'Reenie Beanie', cursive;
	font-size: 50px;
	font-weight: bold;
	color: white;
}


.button1 {
	position: absolute;
	top: 140px;
	left: 20%;
}

.button2 {
	position: absolute;
	top: 140px;
	left: 80%;
}

5-in-5_Day3_Breathe

By jhclaura in Animation, Blog, Design/Doodle, Fun, Video and Sounds 0 Comment

tease(a teaser)

More to come, too cold to edit at 4am…

**Update**

Inspired by Wriggles & Robins(check out theirs!)
Set up in my bedroom with window wide open at night, tempurature -12ºC/10ºF,
LG HX350T projector, a lot of layers, and hot water stand by. Animation made in AE!

For now, it’s just a one-day simple projecting test. For future, I’d love to connect this with more interactions, exploring possibility to be generic art of emotions and communications. Pam suggested using words recognition to tell user’s speaking content then it can easily avoid pre-rendering! Seems to be having a lot of potentials. Exciting!

Oh there’s one big cannot unsee problem. It’s restricted by the temperature and amount of breath! Hmmm…

Hacking flashlight for party!

By jhclaura in Blog, Fall 2013, Fun, PComp_Physical Computing 0 Comment

Collaborated w/ Ziv, Alex, Jorge, and Kristina.

Long long time ago(Oct, 2013), Ziv came out of an idea for the photo booth of ITP Halloween party–> Photoboo, which is using strong light to frighten whoever walk in and taking pictures of them. Big success.

I was responsible for the light part and came out of an idea that just using the external flashlight kit of Canon 5D. With this reference, flashlight worked like a charm with a simple button(P.s. We used transistor instead of optoisolator).

Connected to the complicated Max/MSP patch Alex made, the flashlight triggered once infrared sensor detecting people approaching.

Here’s the simple circuit.

flashlight_hack

And here’s the code for Arduino.

#define CAMERA_FLASH_PIN 8
#define BUTTOM_PIN 2

void setup()
{
  pinMode(BUTTOM_PIN, INPUT);
  pinMode(CAMERA_FLASH_PIN, OUTPUT);
  digitalWrite(CAMERA_FLASH_PIN, LOW);
  Serial.begin(9600); // open serial
  Serial.println("Press the button to trigger the flash");
}

void loop()
{
  if (digitalRead(BUTTOM_PIN) == HIGH) {
    digitalWrite(CAMERA_FLASH_PIN, HIGH);
    delay(100);
    digitalWrite(CAMERA_FLASH_PIN, LOW);
  }
  else {
    digitalWrite(CAMERA_FLASH_PIN, LOW);

    Serial.println("Press the button to trigger the flash");
  }
}

 

And…. I also designed some frames for the Photoboo!

 

Happy time 😀

Application_What’s your definition of time?

By jhclaura in Applications, Blog, Fun 0 Comment
a glass of wine and a clip of time.

a glass of wine and a clip of time.

It’s a response to Einstein’s Dream, written by Alan Lightman. Einstein’s Dream is a novel depicts several kinds(approximately 27, I counted) of world views, based on Time. In one world, time is circle that bends back, in one world cause and effect are erratic, and in one world time has changed plans thus sometimes people can glimpse the future. Beautiful and sad stories happen. Being a fiction novel, the book well translated the vision of Einstein in an artistic way.

As for my thoughts  –time exists in each individual’s mind. We can decide our own setting of time, just like what the book depicts. It might flows backward, or it might be in what people live just one day. Once our mindset changes, we can live in whatever kinds of the world the book depicts, and of course in the world you define.

Right now, I live in the world where everyday is the day before due. Chased by deadline, sometimes I work hard to try to win the race against time. Like trying to occupy all the seats in a hall against time. Compared to my rush and anxiety, time moves on gracefully in its pace. Or sometimes, I ignore the existence of deadline in the  “Oh Whatever” way. I explore the environment leisurely and spend time admiring surprising details of life. It’s like comfily curling in a sled, and let time drag me forward. I still do my work, and it probably just turns out being ordinary, but I’ll never be left behind. I can choose to be either kind of person. It all depends.

But this is not my ultimate dreamy setting of time. The one which is closest to my ultimate dreamy setting, SO FAR, would be –time is like the video clips you can stroll around on Youtube. Sometime at night, after all the work, it’s time for a glass of wine and a clip of time. Vividly, you see the beloved eyes from your grand grandmother, the ones without wrinkles, and you interpret the words from her that you couldn’t before. Or it’s a chilly random night, you and he continued the first acquaintance at bar to a 24/7 breakfast branch. You re-cover the taste of alcohol with eggs and pancake, and re-cover the talks of non-sense with visions of future. Or it’s an unexpected museum visiting, and you re-feel the shocks and touch of amaze from the first time of seeing the workpiece of your all time favorite artist.

In this closest to ultimate dreamy definition of time, that each clips of time is reachable, I can hold the one I thought I’d never be able to hold again, and I can recapture the sudden emotion pulse I thought I’d never be able to feel it again. Dose it sound too beautiful to be perfect? What’s the drawback of this? And what’s your ultimate(or the closest)dreamy setting of time? Those are the questions I’d love to quest you guys 🙂

 

ICM_Video_Let’s have Fun!

By jhclaura in Blog, Fun, Fungus Among Us, ICM_Processing 0 Comment

OpenCV Library

OpenCV_mushroom

Mushroom

Just tweaking around Daniel Shiffman’s LiveFaceDetect example with OpenCV library. Photoshopped off the face of Mushroom. And I’m proud that I mapped the position and the scale well! So FIT hahaha. Below is my mushroom hat mapping code.

if (faces != null) {
    for (int i = 0; i < faces.length; i++) {
      // image size: 500
      // maps image size with face scale
      float w = map(img.width, 200, 1, 1, faces[i].width);
      float h = map(img.height, 200, 1, 1, faces[i].height);

      image(img, faces[i].x+faces[i].width/2-(w)/2, faces[i].y-(h)/2, w, h);
    }
  }

And here’s the video for it. Fun!