Data Visualization

Data Visualization
http://raphaeljs.com/
http://www.bloomberg.com/visual-data/gas-prices
http://www.bloomberg.com/visual-data/
processingjs.org
newyorktimes
nyc open data

nycopendata.socrata.com

3D

http://snapsvg.io/

Chord
mudcube/midi.js
midi.js
html5 midi
http://javod.com/projects/vpcf/
http://notesfromthesound.com/
https://bitbucket.org/jkhalaj/vpcf-virtual-piano-chord-finder/wiki/Home
http://www.jqueryrain.com/2012/10/virtual-piano-chords-and-scales-as-a-jquery-plugin/
http://www.chordbook.com/
http://www.onlinepianist.com/chords/
http://rubycliff.com/TheoryManual/LearnRhythm.html

http://www.pianoworld.com/fun/vpc/piano_chords.htm
http://www.azoffdesign.com/piano


http://www.sk89q.com/playground/jswav/

http://mrcoles.com/piano/

http://code.ohloh.net/project?pid=&ipid=527222&fp=527222&mpundefined&projSelected=true&filterCheckedundefined
face api


famera api

나의 앱 계획 세우기
블루 프린트 세우기

카메라 인식 갖고 장난 쳐보기
한계 짓지 말기

키보드 추천 받기

마스터 키보드
http://blog.naver.com/gkrwja88?Redirect=Log&logNo=130174414317
umx610
http://cafe.naver.com/tvzlab/7370
http://cafe.naver.com/tvzlab/7370


http://www.joshuadavis.com/

Pgraphics
http://tympanus.net/codrops/2013/06/10/web-audio-stylophone/https://www.sparkfun.com/products/9598

http://www.sk89q.com/playground/jswav/
http://www.musipedia.org/js_piano.html#x

Object oriented programming : to make code easier to understand and reuse in other contexts.
when a program includes many elements or when it grows larger than a few pages of code.

objects are created from a class and a class describes a set of fields and methods.

the fields and methods of an object are accessed with the dot operator, a period.

defining a class is creating your own data type

Capitalized

A class is the
specification for an object
Using an architectural analogy, a class is like
a blueprint for a house, and the object is like the house itself.

one reason to make a class is to group together related data elements

1. Create the block.
2. Add the fields.
3. Write a constructor (explained shortly) to assign values to the fields.
4. Add the methods.

Processing 정리 & 복습

• colorMode() function

colorMode(mode, range1, range2, range3)

colorMode(HSB, 360, 100, 100);
으로 맞추기
Hur, Saturation 이랑 Brightness 바꾸면 Brightness 효과 줄수 있다.

e.g)
//shift from blue to green in HSB mode
colorMode(HSB, 360, 100, 100);
for(int i=0; i<100; i++) {
float newHue = 200 - (i*1.2);
stroke(newHue, 70, 80);
line(i, 0,i, 100);
}

// change saturation, hue and brightness constant
colorMode(HSB);
for (int i = 0; i<100; i++) {
  stroke(132, i*2.5, 204);
  line(i,0,i, 100);
}

• println (console) : 현재 프로그램 진행 상황을 알려주기 위한 키
  Because it is important to understand what is happening inside the machine, the functions pring() and println() can be used to display data while a program is running.
  The consule can be used to display a variable, confirm an event
• Variables
  
  There are many different kinds of data, such as numbers, letters, words, colors, and it is necessary to specify the type of data so the computer knows how to correctly interpret the bits.
  A variable is a container for storing data. Variables allow a data elements to be reused many times within a program.
• Numeric data : integer(whole number), and floating point number(decimal point)
  float : approximate analog ro continuous values because they have decimal resolution.
  
  boolean : true / false. boolean variables are often used to make decisions about which lines of code are run and which are ignored.
  
  e.g )
  int x = 50;
  float y = 12.6;
  boolean b = true;
  
  float x, ,y , z;
  x = -3.9
  y = 10.1;
  z= 124.23
• = : assignment operator
• short cuts
  
  ++ / -- : plus 1 / minus 1
  += :  e.g) x += 5 : x = x+5
  -= :  e.g) x -= 5 : x = x -5
  *= :  e.g) x *= 2 : x = x * 2
  /= :  e.g) x /= 2 : x = x / 2
  
• Decisions
  >    <
  >=   <=
  ==
  if, else, {}
  || : OR
  && : AND
  ! : NOT
  
  != : not equal to
  
• Conditionals - IF
  int x =
  if( ) {
    if ( ) {
     } else ( ) {
  }
  } else () {
  }
  
  ---
  int x =
  if ( ) { }
  else if () {}
  else () {}
• Repetition (Iteration)
  for (init ; test ; update) {
  statements }

Week 3

1. 까먹었다... 이거 읽어보기
http://www.bunniestudios.com/blog/?p=1863
raspberrypi.org

chumby
테크컴패니들의 특허 상호관계
MS가 노키아를 산거는 특허권과 관련된 측면도 있겠구나.
openplatform?

How the software will adapt?
if hardware stopped developing?

medical field, financial industry......technology branching in different market.
tech affecting ~~~??? It's changing people go somewhere! exciting,
customizable?

+ architecture?
스스로 생각하는거

경기장, 관광지, 호텔, --> 인스톨레이션

앞으로 하드웨어와 소프트웨어는 어떻게 될까?
알아듣고 싶다 ㅠㅠㅠㅠ

앱을 넘어서는 단계는 어떤게 되는걸까?
터치 스크린이 이렇게 잘될줄 알았을까?

--> 쓰다보니까괜찮았을거 같애... 내가 경험한 세대잖아! 부분적 터치였을때.. 아이팟!
커낵트  도 별로였고

폰 은 앞으로 어떻게 진화할까?
Price & accessibility --> raspberry? linux로 running 한다.
하나씩 하나씩 알아가고 싶어........ 조급해하지 말자....놓지 말자......

2. 프로세싱 공부 어떻게 하지??

-------------
1. concept of 스도쿠?
thinking about what you wanna do, at a more conversational level.
outline 하는것처럼
replace the element what you're doing

if mouse on left hand side, and mouse is above half way down,,,then do st.
---> translate into code

1) if (mouseX < width/2 && mouseY < height/2){

2) if(mouseX< width/2){
if(mouseY < height/2){
// top left}
else {
}
}

3) e.g) from class
if(mouseX > width/2 ||(or)
(mousex > woo &&
Mouse Y > 300 &&
mouseX <400 &&
mouseY <400)}

4) incapsulation?
you need know how to read code

itteration??
itterat

리로이 : 클릭할때마다 백그라운드 색 변경하는거?
색이다 파스텔 톤이야! 체크해보기

멜로디 : 색과 숫자가 바뀐다 체크해보기

5) 내꺼
if (condition) {

for ( 1 ; 2 ; 3 ) {

}

i++ = i+1
x++ ; c++ = C= c+1
x+= 5  x = x+5
      start     end     rate
for (int i=0 ; i < 20 ; i++){


draw loop : 계속 반복한다


ellipsemode(center)

for(int i =0 ; i <8 < i++){
line(mouseX+100+(i+10*i)


while (    ){
} 계속 반복되서 컴퓨터에 무리를 준다. 한번 뭐 하고 다시 돌아오기 못한당.
그래서 for를 더 많이 사용함.

저장 자주하기


**

int counter = 400;
for ( counter= 400; counter<1000 ; counter++){
 
}
for ( counter= 400; counter<1000 ; counter++){
 
}
for ( counter= 400; counter<1000 ; counter++){
 
}

이렇게 되면 for 밖에 있기 때문에 다 영향을 미칠 수가 있다.
for 안에 쓰고 싶으면 for안에



Q) 연습해 볼것, 원으로 그려지는거 : 원형 루프
counter 신택스
while vs for 확실히하기

이번주 숙제는
각자 해오는거

raise
funcky

string [] words
string[] eggs = { a, b, c, d, e, f, g};
egg(2) = c
egg[i]
int[] wages = {50, 100, 10, 2, 5}

wages[0]+= 10;
for(i=0; i<5; i++){
wages[i]+=10;
}

* void mousePressed (){
}
draw랑 setup 밖에 쓰는 거

뭐가 다르지?




void draw(){
}
이거 써줘야 듣는다.
다음주에는 자바스크립트 한대! 예습해와야해 그래야 알아들어 ㅠㅠ

수업시간 예에서
(int)random(0,words/length);
text

어떻게 백그라운드 리프레싱 할지?

대화 하는거
사람이 처음 키를 누르면,
password

jsans?

Week 2

Variable
Scope
Conditionals

millis : 시작할때 시작한다. (컴퓨터의 시간을 쓰는게 아님)

7%2 : 1
6%2 : 0

millis()%1000

Variable

카메라를 센서처럼 써서 칼라 트래킹한데 !! 와웅

smooth 는 setup안에 쓴다

http://akj61300.blog.me/80133497413

float 와 int

colorChange

println



1. If (){}
   else if(){}
   multuple condition

2. Data
   Primitive

boolean - true or false
byte
char

3. smooth ();

4. float change = 25.5254;
int castedChange=(int)change;

5. PImage
When we want to show an image, put the img in the memory, when we setip the document this will help ir load faster.

6. Println
cna show how fast the function working

7. scope
very important, decide how wide the rules apply

8. if (mousepressed){
line(randomPx, randompy, random x, random y)
마우스 움직이기 전이나 후에 변화 있는거 생각해보기

9. && both true/ ll  either

variable 2개 이상 갖기
4사분면으로 나눠서 다른 액티배이션으로 하는거

# Week 1

Week 1

• Intros

• Input, Processing, Output

• Collaboration, Git

• Processing (Open source, creative coding languages)

• JQuery (event driven, javascript)

• Dotjs (browser plugin)

• Processing.js (Processing meets javascript)

• Getting Started

Getting started

• Download Processing (http://www.processing.org)

• Bookmark the Processing Reference (http://processing.org/reference/)

• Signup for Github

• Download the Github app (osx: http://mac.github.com/, windows: http://windows.github.com/)

• Setup Dotjs: OSX - https://github.com/defunkt/dotjs, Windows: https://github.com/p3lim/dotjs-win

• Bookmark the JQuery Reference (http://api.jquery.com)

첫날, 둘쨋날 수업후 나의 느낌.

그러나, 2013학년 가을학기의 목표는 '개발 언어 익히기' 로 잡았으니

정줄 놓지 않고 하나씩차근차근 공부해 나가야지. 일단 무슨 말인지 모르겠어도, 친해지려고 노력하자 !!

HTML5 / CSS, Javascript, Jquery, Processing, Arduino !

언어를 위한 언어가 아니라, 나의 작품에 어떻게 응용할수 있을까를 생각하며 재밌게 익힐것

1. Input --> Processing --> Output

http://en.wikipedia.org/wiki/IPO_Model

• I: Input - The information, ideas, and resources used in creating a program

• P: Processing - Actions taken upon/using input or stored material

• O: Output - Results of the processing that then exit the system

• S: Storage - Location(s) where material inside the system is/are placed for possible use at a later point in time

2. Processing 이 뭐지?
Interactive programs with 2D, 3D or PDF output

http://blog.naver.com/bamicat?Redirect=Log&logNo=100176786852

3. Processing.js ?

Processing 언어를 웹용으로 사용할수 있게 해주는 거라니 일단 Processing이랑 익숙해지면 사용할수 있겠다.

Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.

Originally developed by Ben Fry and Casey Reas, Processing started as an open source programming language based on Java to help the electronic arts and visual design communities learn the basics of computer programming in a visual context. Processing.js takes this to the next level, allowing Processing code to be run by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and Internet Explorer. Processing.js brings the best of visual programming to the web, both for Processing and web developers.

Introduction

Starts Thurs, Sept 5

6-8:50PM

Slow CodeIn Slow Code, students write homegrown code and share it with their local class- mates. Like the Slow Food Movement, the class advocates the benefits of using locally grown produce (code) and skillfully judging the origins of globally produced food (code-libraries/snippets). Students are given time to learn the craft, explor- ing how it relates to their unique skillsets and interests. At minimum, they learn how to code as well as use other people’s code efficiently. At best, the craft will grow its roots into their perception of systems, processes, and ultimately enrich their creative processes.
INSTRUCTOR / Jeff Gray