Category Archives: StudyNote

[번역] Guide to Projectors for Interactive Installations

Projector에 대해서 이렇게 기본부터 자세히 설명한 글을 찾기 힘들 것 같아서 번역을 결심한지 벌써 몇 달이 흘러간 듯 하다. 이런 저런 우여곡절이 있었지만 어쨌든 번역을 완료하여 올리게 되었는데, 번역한지 오래되어 앞 부분의 내용은 이미 가물가물. 나도 다시 한번 읽어봐야 할 듯.

후반부 번역은 >허상훈군의 도움이 있었고, 각자 블로그에 게시하기로 결정하였음을 밝힌다.

> 원문 : Guide to Projectors for Interactive Installations

—————————

Guide to Projectors for Interactive Installations

written by Blair Neal

 

Video projectors are one of the most important tools for creators of interactive installations. The information for projectors is available on various websites, but this 2 part guide will focus on their use in production and interactive environments. Part 1 will focus on the projector as hardware(lenses, lumens, surfaces etc), and part 2 will go into more details on the software and calibration considerations. This will gather some of that disparate knowledge into the important bits you need to make informed decisions about creating a high quality experience.

비디오 프로젝터는 인터렉티브 설치 작업을 하는 크리에이터들의 가장 중요한 도구 중 하나이다. 프로젝터에 대한 정보는 여러 웹사이트들에서 볼 수 있지만, 2 부분으로 구성된 이 가이드는 프로젝터를 제작과 인터렉티브 환경에서의 사용에 대하여 중점을 둘 것이다. 파트 1은 렌즈, 루멘(광량. >엔하위키 설명 참고), 표면 등 프로젝터의 하드웨어적인 내용에 중점을 둘룰 것이고, 파트 2는 소프트웨어와 프로젝터의 설정/조정에 대한 상세한 내용을 다루려고 한다. 이 내용들은 높은 수준의 경험을 만들기 위한 잘 알려진 요소들을 결정하기 위해 당신이 필요한 중요한 지식들을 모아놓게 될 것이다.

They vary in scale from pocket-sized (or smaller) pico’s to refrigerator sized large-venue projectors. They vary in price from a couple hundred dollars, to a couple hundred thousand dollars. In the end, however, essentially all projectors can be described as little more than a bright light element,  imaging elements, and a lens. There is something technical about projectors that seems to mystify some people, but it is really important to remember that they are just a flashlight that shoots a square shaped image. In this article we will discuss:

프로젝터는 포켓 사이즈의 작은 크기부터 냉장고 사이즈의 커다란 것까지 다양하다. 수백 달러부터 수천 달러까지 가격대도 다양하다. 결국에 모든 프로젝터는 밝은 광원, 이미징 요소들 그리고 렌즈 외에 더 다양하게 설명할 수 있다. 어떤 사람들에게는 미스터리하게 보이는 기술적인 요소들도 있는데, 어쨌든 프로젝터는 단지 네모난 모양의 이미지를 상영하는 전등이라는 것을 기억하는 것이 중요하다. 이 글에서 우리는 다음의 내용들을 논의할 것이다.

  • A checklist for planning your installations
  • Overview of projector types
  • Different classes of projectors
  • How to calculate projector intrinsics/How to read and interpret a spec sheet
  • How to calculate proper brightness
  • Discussion of video Continue reading

Mapbox와 Big Data를 활용한 interactive map 작업들

https://www.mapbox.com/labs/twitter-gnip/brands/#7/36.963/131.973

트위터를 올린 디바이스의 종류를 지도에 표시하는 방법으로 어떤 디바이스를 주로 사용하는지 제한적으로 볼 수 있다. 한국은 역시 안드로이드 천국. 삼성 때문이겠지만, 유난하다.

 

https://www.mapbox.com/labs/twitter-gnip/locals/#13/37.5598/126.9893

트위터를 올린 사람의 언어에 따라 지역마다 로컬과 외국인(관광객)을 구분해서 표시하는 지도. 어디 언어만 갖고 그렇게 구분하겠냐만은, 적어도 관광객은 자기 언어로 트윗을 할 테니까 관광객이라고 한 듯하다.

이 작업들은 Mapbox를 기반으로 한 것들인데, Mapbox는 구글 지도를 바탕으로 다양한 customization이 가능한 서비스. Javascript나 iOS 등의 모바일용 소스를 제공하기 때문에 다양한 플랫폼에서 적용이 가능하다. 라이센스는 무료도 있으나, 본격적으로 쓰려면 유료 라이센스를 구매하는게 필요할 것 같다.

> Mapbox

FileSquare – Creative Web App for Collaboration and Prototyping

> FileSquare

이 서비스는 Web App으로 다양한 플랫폼에서 사용할 수 있다는 것이 장점이다. 또한 무료 버전에도 20MB의 용량과 2개 프로젝트를 생성할 수 있기 때문에 작은 규모의 프로젝트나 개인들은 충분히 사용할 수 있을 것 같다.

프로젝트를 생성한 다음 디자인 이미지들을 올리고, 그 이미지들에 노트를 달거나 touch 영역을 설정해서 버튼을 만들 수 있다. 그리고 iPad나 iPhone에서 프로젝트를 호출해서 interactive하게 prototype을 테스트할 수 있다. 프로젝트 관계자, 클라이언트에게 보여주거나 UT에도 충분히 잘 사용할 수 있을 것 같다.

 

FileSquare에서는 모바일, 타블렛, TV 등 다양한 디바이스들의 Mockup 이미지를 제공하는 서비스도 하고 있다.

http://mockuphone.com/

역시 가끔 필요할 때 사용하면 검색하는 시간을 줄일 수 있을 것이다.

HTML5 Canvas에서 1px Line 그리기

HTML5의 Canvas에 대해서 대략적인 소개가 잘 되어 있는 사이트가 있다.

>Dive into HTML5 – Let’s Call It a Draw(ing Surface)

그 중에서 아래 내용은 canvas에서 1px의 라인을 그릴 때에 대한 tip이다. 좌표를 지정하고 라인을 그리는데, 예를 들어 (1,0)에서 (1, 10)으로 1px 두께의 라인을 그린다면, 좌표 1을 기준으로 0.5px씩 잡아서 라인을 그린다는 것인데, 실제로 스크린의 물리적인 픽셀 사이에 걸쳐지기 때문에 제대로 1px의 라인이 그려지지 않는다는 것이 요점이다.

따라서 1px의 라인을 정확하게 그리려면 기준점을 0.5 단위로 잡아야 하고, 예를 들어 (1.5, 0)에서 (1.5, 10)와 같이 잡아줘야 한다는 것이다.

————————————————————————–

Q: Why did you start x and y at 0.5? Why not 0?
A: Imagine each pixel as a large square. The whole-number coordinates (0, 1, 2…) are the edges of the squares. If you draw a one-unit-wide line between whole-number coordinates, it will overlap opposite sides of the pixel square, and the resulting line will be drawn two pixels wide. To draw a line that is only one pixel wide, you need to shift the coordinates by 0.5 perpendicular to the line’s direction.

For example, if you try to draw a line from (1, 0) to (1, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1. The screen can’t display half a pixel, so it expands the line to cover a total of two pixels:

A line from (1,0) to (1,3) is drawn 2 pixels wide

But, if you try to draw a line from (1.5, 0) to (1.5, 3), the browser will draw a line covering 0.5 screen pixels on either side of x=1.5, which results in a true 1-pixel-wide line:

A line from (1.5,0) to (1.5,3) is draw 1 pixel wide

Thanks to Jason Johnson for providing these diagrams.

모든 스크린의 크기에 대해서 – Screen Siz.es

유용한 사이트인데 가끔 필요할 때 기억이 안나서 찾아다니게 된다. 기억이 못 미더우니 이렇게 저장해놔야겠지.

모바일, 타블렛, PC까지 수 많은 스크린들의 physical한 크기부터 resolution까지 정리가 되어 있는 사이트이다.

사용하기 편리하게 되어 있어서 단순한 목적을 위해 쉽고 간단하게 잘 만들어졌다.

 

http://screensiz.es

logo

 

그런데 이 사이트의 density 분류 기준이 생소한데, XHDPI, HDPI와 같은 것들이다. 사이트의 설명에 의하면 이 단위들은 Teehan+Lax에서 정리한 >기준에 따른 것이고, 그에 대한 내용은 다음과 같다.

Teehan+Lax

즉, iPhone 3GS를 기준으로 정리한 것이다.

하나의 GUI 디자인을 가지고 여러 버전을 만들 때 크기별로 변환하는 작업을 위해 기준을 다음과 같이 잡았다.

고맙게도 일일이 계산하지 말라고 계산기까지 Teehan+Lax에서 만들어주었다.

>Teehan+Lax Density Converter