한 걸음/Creative coding
크리에이티브 코딩에서 알게 된 인스타에서 아티스트를 위한 딥러닝 강좌가 열린다고 하여 참여해봤다. (인스타그램 @okdalto) 김성현 연사 뭐하는 사람인가? (사실 내가 이 강좌에 참여한 가장 큰 이유는 '이런 류의 일을 하는 사람은 뭐라고 명료하게 정의할 수 있을까, 직업으로써 얼만큼의 확장성이 있을까, 어떤 방향성을 가지고 있는가' 같은 것들이어서 주의깊게 들었다.) - 자신을 컴퓨터 그래픽스 리서처라고 소개한다. - 현재는 anigma ai라는 회사 창업한 상태 - 어릴적 장래희망은 그래픽디자이너, 학사는 국민대 영상디자인, 석박사는 카이스트 비쥬얼 미디어 랩(=원래부터 공대 베이스는 아니었다) - 취미는 코드를 사용한 렌더링 - 디자이너는 디자이너가 잘할 수 있는 일을 해! 네가 컴공 전공자만큼..
let buttonX, buttonY, buttonRadius, buttonH; let sliderStartX, sliderEndX, sliderY, handleX, handleRadius; function setup() { createCanvas(windowWidth, windowHeight); init(); } function windowResized(){ resizeCanvas(); } function init(){ buttonX = width * 0.5; buttonY = height * 0.5 - 100; buttonRadius = 50; buttonH = 10; sliderStartX = width * 0.5 - 150; sliderEndX = width * 0.5 + 150; sliderY ..
벡터 x, y를 묶어서 계산해주는 개념 기본 캐릭터 코드 function setup() { createCanvas(400, 400); } function draw() { background("tomato"); face(width/2, height/2); } function face(x,y) { push(); translate(x, y); //귀 ellipse(-150,0,60,60); ellipse(150,0,60,60); //얼굴 ellipse(0,0,300,300); //흰자 ellipse(-60,0,100,100); ellipse(60,0,100,100); //검은자 fill("black"); ellipse(-60,0,60,60); ellipse(60,0,60,60); //입 ellipse(0,80..
* rect 함수의 5,6,7,8번째 인자를 넘겨주면 모서리가 둥근 사각형을 만들 수 있다 * p5.js의 시스템변수 frameCount를 활용해서 자동으로 차체가 들썩거리는 듯한 모션을 주었다. frameCount 시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정합니다. setup() 함수의 기본값은 0이고, draw() 함수의 첫 번째 반복 실행이 마치면 1씩 증가하는 식입니다. 소스코드 function setup() { createCanvas(400, 400); } let carX = -90; function draw() { background(220); carX += 5; if(carX > width+90) { carX = -90; } car(carX, he..
사운드 크기에 반응해서, 소리가 클 땐 크게 움직이고 작을 땐 작게 움직이는 개체다. [기본세팅 - geometry, camera, speed 오퍼레이터] 1. sphere 오퍼레이터(원 모양)를 불러온 뒤, geometry 오퍼레이터와 연결해준다 2. 그 사이에 noise 오퍼레이터를 연결해준다 (=꾸물꾸물한 모양으로 움직임) 3. 그러면 따로 뭘 건들지 않아도 구체가 꾸물거리며 움직이는데, 터치디자이너 프로그램에서 미리 기본 코딩을 해놨기 때문이다. 미리 세팅된 아래 부분을 지워준다. 4. 사운드파일을 드래그해서 터치디자이너로 가져온다 5. audio device out 오퍼레이터를 가져온 후 사운드파일과 연결하면 음악을 들으면서 작업할 수 있다 (필수는 아님) 6. 사운드파일과 analyze 오퍼레..
정육면체 살펴보기 1) sob > box 오퍼레이터 불러오기 2) box 오퍼레이터의 view active를 켠 상태에서 우클릭 > toggle shaded / wireframe 클릭 (면 처리가 되지 않은 뼈대를 보여줌) * box 우클릭 > display options 박스에서 정점들의 내용을 볼 수 있다 3) 우측 상단 UI에서 x,y,z축 기준 사이즈, 위치, 회전, 배율 등을 조절해볼 수 있다. 원통 모양 개체 살펴보기 1) sob > 튜브 오퍼레이터 불러오기 2) 우측 상단 UI 중 Tube > radius의 값을 0, 1로 설정하면 원뿔 형태가 된다. 3) 우측 상단 UI 중 detail > end caps를 on해주면 위아래가 막힌 원통 형태가 된다. 4) view active 켜준 상태에..
text() 함수는 화면에 텍스트를 나타낼 수 있도록 하는 함수 // 들어갈 text, x, y text("내용", 200, 200) // 캔버스의 크기가 바뀌더라도 항상 중간에 위치하도록 함 text("내용", width/2, height/2) text() 함수를 적용하기 전에 //폰트사이즈 textSize(100); //폰트컬러 fill("red"); //폰트테두리 stroke(0); strokeWeight(5); // 첫번째인자: CENTER, RIGHT, LEFT // 두번째인자: TOP, CENTER, BOTTOM (기본값은 BASELINE) textAlign(가로정렬, 세로정렬); 등의 함수를 이용해서 글꼴 속성을 정의해줄 수 있다. 클릭할 때마다 10씩 늘어나는 텍스트 예제 //전역변수 le..
rotate() 함수는 도형을 회전시키는 역할을 하는데, 우리가 일반적으로 사용하는 각도법이 아닌 호도법에 기반하므로 rotate(45)를 입력하면 45도가 아닌 애매한(?) 각도로 돌아가게 된다. 각도법을 적용하기 위해선 angleMode(DEGREES) 를 써준다. function setup() { createCanvas(400, 400); background("#ececec"); angleMode(DEGREES); // 각도법 적용 } function draw(){ push(); translate(200, 200); rotate(45); rectMode(CENTER); rect(0, 0, 100, 100); pop(); } arc는 부채꼴을 만들어주는 함수 (아래 예시는 90도 부채꼴) arc(0,..
