ZamZamCiTy @zamzamcity - Tumblr Blog

Posts

Day4

오브젝트 태그

비저빌리티라고 해서 보여지는 것을 제어할 수 있는 것들

앞에 있는 큐브를 기준으로

카메라 비저빌리티, 카메라 비저빌리티, 더트 비저빌리티, 스페큘러 앞에서 보여지는데, 재질감 앞에서는 적용이 안됨

C4D는 재질 앞에선 안보여지는데 역으로 보여지는 것??

카메라 안에다가 BG를 넣어두면

이것을 기준으로 카메라를 움직이면 BG는 바뀌지 않아서

카메라의 위치값을 변경하지 않는 위치값을 설정하기

오른쪽 클릭을 하고

리깅 태그라는 것이 있음

protection

스펙큘러 두개가 겹치면 까맣게 타게 됨

Specular depth가 4에서 10으로 되면 블랙이었던 것이 투명하게됨

난반사를 얼마나해줄 것인지에 대한 반사값

이거에 따라 렌더 시간도 변화하게 됨

Optimizing에 따라 하나의 렌더가 10초가 걸리기도 하고 5분이 걸리기도 하게 됨

얼마나 딱 알맞게 노이즈가 생기지 않는 선상에서 만드는 것

옥테인 셋팅에서 가장 많이 사용하는 것은

오브젝트를 생성하고 수치값들을 하나씩 변경해주어야한다.

크게 4가지의 채널을 가지고 변경을 하게 된다.

토글에 들어가면 info 채널이라는게 있음

머테리얼 = 그룹화 해줌

와이어프레임을 뽑을 수도 있음

옥테인 렌더러안에 렌더패스를 이용해서 인포와 실제 렌더를 동시에 뽑을 수 있음

다이렉트 라이팅이랑 패스 트레이싱

패스 트레이싱을 통해 정교한 값을 조절할 수 있음

패스 트레이싱에서 난반사가 좀 더 명확하게 나오는게 다이렉트라는 옵션 유튜브 튜토리얼에서도 옵티마이징 설명할 때 패스 트레이싱으로 설명함

패스트레이싱>맥스 샘플링

샘플링의 수치를 높이면 높일 수록 렌더안에 있는 디테일한 질감, 노이즈 감을 맥스 샘플링 값을 늘려서 제어를 해줄 것임

맥스 샘플링 값은 정해져있는 수치가 있음

=> 128, 256, 512, 1024, 2048, 4096

배수로 늘어나게 셋팅을 해줄 것임

맥스 샘플링 값이 낮으면 낮으수록 지저분하게 샘플링 되게 됨

노이즈 창에서 그린으로 나오는 건 비교적 깔끔하게 되고 있다는 거임

패스트레이싱>디퓨즈 뎁스, 스페큘러 뎁스를 6,6으로 떨어뜨리기

겹치는 부분이 검은색으로 타면 수치값을 조절해주어야함

GI clamp는 1로 내려주고 싶작함

수치가 높으면 높을수록 노이즈가 끼게 됨

4이상으로 내려줘야함

플레인에 이미지로 글로시 불러오고, 반저늘 주고 싶으면 invert 누르기

알파채널을 누르고 렌더하면 BG가 빠지고 렌더링됨

Keep environment로 hdri 같이 렌더링 할 건지 말건지 결정

adaptive sampling

겹치는 부분에 좀 더 집중해서 렌더링하고 플랫한 부분은 빼고 렌더링이 되도록

거의 모든 세팅에서 어댑티브 샘플링을 켜주고 있음

다이렉트 라이팅을 통해 겹쳐진 부분이 까매질 수 있도록 뎁스값을 낮춰서 진행함

Edit>Project Setting

24 FPS 렌더 셋팅 톱니바퀴를 들어갔을 때 24프레임으로 되어있어야 맞는 세팅임

렌더셋팅 단축키 커맨드+B

무브가 느리게 들어가는 이미지는 24보단 30이 좀 더 부드럽게 느껴지는 것이 있음

빈 공간에 큐브 하나를 꺼내기

코디네이트 들어가서 애니메이팅하기

타임라인 에프커브

dispersion

0.1은 과해서 0.04로 줌

스플라인 만듦

sphere 꺼냄

animation>align spline

단축키 c를 누르면 편집모드가 됨

쭉 끌어와서 경로로 설정!

오브젝트 점 모드로 스플라인 패스 수정

카메라에 타겟 및 애니메이션 넣어서

카메라

블룸 파워

컷오프는 밝지 않아야하는 건 밝지 않게 해서 빛의 산란이 너무 과장되지 않도록 함

옥테인 카메라

camera image> Spectral AI denoiser 라는 기능을 통해서 노이즈를 좀 줄여주는 방식

파일에서 원본이미지 하나랑 노이즈를 줄인 이미지 파일을 하나더 만들어줌

Highlight compression 0.6

gamma 1에서 플러스를 시키면 전체적으로 밝아짐

White point는 연하게 먹여줘야 하고 아니면 머테리얼 질감이 죽게 됨

Pick focus = 누르는 것에 따라 포커스가 달라짐

어퍼쳐라는 값을 조정해주어야함

어퍼쳐를 20으로 주르게 되면 뒤의 것들은 뭉개지고 앞의 것들은 선명하게 초점이 잡히는 것을 볼 수 있음

어퍼쳐를 10으로 잡으면 적당

어퍼쳐에도 모션을 주면 흐릿하게 잡히는 것들을 조절할 수 있음

스피어를 c를 눌러 편집모드로 변경해주기(가끔 사라진다고 함)

여기에서 알파 채널에 체크를 해야 진짜 최종적으로 BG가 투명으로 뽑아 나오게 됨

Multi-Pass는 C4D 내장 기능이나 우리에게 필요가 없으므로 지우기

#C4D #design

CSS: display&cascading

1)Display

block, inline, inline-block

block

좌 상단부터 쌓이는 특성

inline

우측방향으로 쌓임

width, height 값이 적용되지 않음

text의 길이로 자동 길이가 생성됨

태그나 칩 같은 UI 요소를 코딩할 때 사용함

inline-block

블록 형식으로 우측으로 쌓고 싶을 때

block의 width나 height은 적용됨

none

아예 보이지 않음

2)Cascading

css가 적용되는 순서

inline stylesheet > id style > class style > li tag

css에선 가장 마지막에 쓰인게 적용됨

#web #css #coding

p5.js

캔버스 포지셔닝 참고!

https://github.com/processing/p5.js/wiki/Positioning-your-canvas

애니메이션은 function draw() 에 써야함

random(*number*)과 같은 식으로 쓸 수 있음

circle(x,y,radius)

background();가 draw로 들어오면 초기화가 되는 효과가 됨

원 이동

(전역)변수를 setup에서 선언

도형에 모션을 주려면 function draw에서 변수에 증가되는 값을 입력하면 됨

재밌어보이는 이벤트

acceleration() : 스마트폰을 흔드는 속도에 따라 원의 크기가 달라짐

createCapture() : 오디오나 비디오 같은 입력 정보를 캡쳐함

mouseX, mouseY

mouseIsPressed

function 만들어도 draw에 꼭 다시 불러와야함

변수를 넘겨줄 필요는 없음

#p5.js #coding

Grid System

Bootstrap Grid System

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap Grid Templates for Figma

https://www.uikitsnow.com/download/bootstrap-grid-templates-for-figma/

Material Design System

https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbmYzdXBSYVRYeFBkVldPUVlYcXAtc2cwRnRzd3xBQ3Jtc0ttb1l2dW5LXzR3dkF3NklnWFI2YnFxbzdoQ3hjOENHR2VfeURIV1dFc0lrX3VuVUFUeTRQUjFYVk9IQUhYZnd1M1R4eXpvZ1BiMmxlZzVoV2FJaGhkb0RNdG1seGRNR2F2eGlLaHg2eXJ1OEZELU1nVQ&q=https%3A%2F%2Fmaterial.io%2Fdesign%2Flayout%2Fresponsive-layout-grid.html&v=RqDdSn9yuWI

#coding #web #design

CSS, 미디어 쿼리

CSS의 상대(relative)단위

em, rem

em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됨

rem에서 r은 root, 즉 최상위 요소를font-size 속성 값 의미 HTML에서 최상위 요소는 따라서 rem 경우, html 요소의 font-size 속성 값이 기준이 된다.

폰트 사이즈*0em

em은 상위 개념에 따름

rem은 상위 개념에 상관없이 html에 관련된 것만 가져옴

-> em은 상속이 되는 개념이기 때문에 유지보수가 어려워질 수 있어 rem을 추천한다.

rem으로 모바일/웹 크기 수정하기

computed 보면 px과 rem이 계산된 값 보임

예)

0.5em = 16 px x 0.5 = 8px

1em = 16 px x 1 = 16px

2em = 16 px x 2 = 32px

3em = 16 px x 3 = 48px

vw, vh

뷰 포트

그렇다고 반드시 width,hieght에만 사용할 필요는 없다.

미디어 쿼리와 반응형

Breakpoint

meta 태그로 뷰포트로 적용을 해야함

중복되는 코드는 삭제하고 반응형으로 바뀌는 것만 태그로 넣어줄 것

#web #coding #css

1.2

JavaScript Console을 누르면 print();, console.log(frame count);가 출력되는 것을 실시간으로 확인할 수 있음

Responsive web

var w = window.innerWidth; var h = window.innerHeight;

function setup() { canvas=createCanvas(w, h); }

function draw() { background(255,255,128); // A rectangle fill(200, 200, 200); noStroke(); rect(20, 20, w-40, h-40); // uses global variables for width and height }

window.onresize = function() { // assigns new values for width and height variables w = window.innerWidth; h = window.innerHeight; canvas.size(w,h); }

#coding #p5.js #javascript

Netlify로 배포 - 동적 웹페이지

https://www.youtube.com/watch?v=LnGgndT308Q

깃헙으로 로그인

폴더 업로드

배포 완료

Firebase로 배포 - 정적 웹페이지

https://www.youtube.com/watch?v=mssy9Ns-MgA

콘솔로 이동

프로젝트 만들기

웹 클릭

앱 등록 후 FB SDK 추가 프로세스 터미널에 입력

nom firebase install.. 이후 프로세스는 영상 참고

#coding #youtube #web

18.1

3D geometry

camera

texture

material

light

WebGL을 기반으로 만들어진 p5.js

3D요소를 더 원한다면 three.js를

createCanvas(width,height,WebGL)

2D의 경우에는 왼쪽 위의 요소가 (0,0)

3D의 경우에는 화면 정 가운데가 (0,0,0)

#p5.js #coding

#java #programming

Flying Buddha

public KeyTypeEvent() { try { img = ImageIO.read(new File("buddha.png")); } catch (IOException e) { System.out.println("no image"); System.exit(1); }

addKeyListener(new KeyListener() { @Override public void keyPressed(KeyEvent e) { int keycode = e.getKeyCode(); switch (keycode) { case KeyEvent.VK_UP: img_y -= 10; break; case KeyEvent.VK_DOWN: img_y += 10; break; case KeyEvent.VK_LEFT: img_x -= 10; break; case KeyEvent.VK_RIGHT: img_x += 10; break; } repaint(); }

#java #coding

The task of typography is...

#interactive web #graphic design #design #typography

Java Swing

#java #coding

import javax.swing.*; import java.awt.*;

public class DrawTreePanel extends JPanel {

public DrawTreePanel() { }

public void paintComponent(Graphics g){ g.setColor(Color.BLACK); drawTree(g, 400, 600, -90, 8); }

private void drawTree(Graphics g, int x1, int y1, double angle, int depth){ if (depth == 0) return; int x2 = x1 + (int) (Math.cos(Math.toRadians(angle)) * depth * 10.0); int y2 = y1 + (int) (Math.sin(Math.toRadians(angle)) * depth * 10.0); g.drawLine(x1, y1, x2, y2); drawTree(g, x2, y2, angle - 30, depth - 1); drawTree(g, x2, y2, angle + 30, depth - 1); }

}

#java #coding

MRTK Unity

**유니티의 컴포넌트들**

유니티 에디터에서 입력 시뮬레이션 하기

오브젝트를 잡아서 움직이기

오브젝트의 크기를 조절하기

오브젝트를 좀 더 정확도 있게 크기를 조절하거나 회전시키기

입력 이벤트에 대해서 오브젝트가 반응하도록 하기

시각적인 피드백 추가하기

청각적인 피드백 추가하기

홀로렌즈2 스타일 버튼 사용하기