음악, 삶, 개발

디자인툴에서 말하는 Path 와 동일한 개념이다. 따라서 Illustrator 를 통해 Path 의 개념을 먼저 공부할것이다. (열린 Path, 닫힌 Path 등등..) GUI 를 디자인함에 있어, 가장 뿌리가 되는것이 Path 이므로 이 클래스에서 제공하는 멤버 함수들을 또한 모두 공부할것이다. Illustrator 에서도 Path 를 만드는데에 매우 많은 방법들이 필요한데, Path 클래스 또한 약 40가지의 Set 함수를 제공한다. 이 함수들을 이용하여 일러스트레이터의 Path 를 Juce 의 Path 로 옮기는 함수들을 작성할것이다. 뒤에서 보겠지만 Path 객체는 Graphics 클래스의 멤버 함수의 인자로 넘김으로써 그려지게된다. Path Class R..

Rectangle 클래스는 사각형을 x, y, width, height 으로 나타내는 클래스이다. Rectangle 클래스는 Point 나 Line 클래스처럼 Rectangle 으로 정의되는 template 클래스이다. Rectangle 클래스 역시 Line 클래스처럼 두개의 Point 객체로 이루어져있지만, 각 Point 객체가 나타내는 지점이 다르다. 위의 그림처럼, 각 Point 는 왼쪽 상단 모서리와, 오른쪽 하단 모서리의 x, y 좌표를 나타낸다. 두개의 Point 객체를 인자로 넘겨 Rectangle 객체를 생성할수도있고, 또는 x, y, width, height 를 인자로 넘겨서 생성할수도있다. 미리 말하면, Rectangle 클래스는 매우매우 중요하다. 추후..

Point 클래스가 하나의 점인 x ,y 를 의미하는 반면, Line 클래스는 2개의 점, 두개의 Point 객체, 즉 x1, y1, x2 ,y2 를 나타내는 클래스이다. Line 클래스는 Line 인 template 클래스인데, ValueType 으로는 float 또는 double 만을 사용하는것이 좋다. 공식문서에 따르면, int 를 사용할 경우 몇몇 멤버 함수를 사용할때 컴파일되지않을수도있다고한다. 아래에서 보겠지만, Line 클래스는 생성자로 두개의 Point 객체를 인자로 사용한다. Line Class Template Reference Represents a line. This class contains a bunch..

무언가를 그리기위해서 가장 중요한건 무엇일까? Juce 코드에 세계에서는 다름아닌 "좌표 (coordinate)" 이다. Illustrator 에서는 이러한 좌표를 입력하지않고 마우스로 바로 바로 그려낼수있지만, 코딩의 세계에서는 마우스를 대체하는것이 좌표다. 우리가 원하는 도형을 만들기위해서는, Juce 가 제공하는 여러 함수들의 인자로 좌표를 넘겨주어야한다. 이 좌표가 나타내는것은 직선일수도있고, 곡선일수도, 원일수도, 직사가형, 정사각형, 아니면 다각형일수도있다. 우리의 수고를 조금이나마 덜어주기위해 Juce 에서는 다양한 도형을 나타낼수있..

Colour Class Reference Colours Namespace Reference Juce 에서 색깔을 나타내는 클래스이다. 추후, Graphics 클래스의 멤버 함수의 인자로 매우 자주 사용된다. 또한 Colour 객체를 받는 다른 클래스의 함수도 매우 많이 있다. 따라서 이 포스트에서는 어떻게 Colour 객체를 생성하는지에 매우 많은 예제들을 사용하여 배울것이다. 한가지 Colour 클래스를 사용할때 유의점은, 영어 스펠링이 Color 가 아니라, Colour 라는것이다.. (내가 코딩할때 이 부분에서 오타를 너무 많이 냈었다...) 둘다 틀린 말은 아니지만 미국에서는 Color 라고 쓰지만, 영어를 사용하는 다른 국가에서는 Colour 라고 쓴다..

앞선 포스트에서 우리는 Component 클래스를 배우기위해, Component 클래스의 멤버 함수들의 인자로 사용되는 다른 클래스들을 공부해야한다고하였다. 따라서, 이 포스트에서는 GUI 와 관련되어 자주 사용되는 클래스들의 설명을 Juce 공식 문서에서 가져와 정리해놓았다. 각 클래스 마다 어떻게 작동하는지에 관한 세세한 내용들은 앞으로 독립적인 포스트들로 만들어 소개할것이다. 이 포스트는 이 클래스들을 둘러보는 사전정도로 활용하면 좋을것이다. 여기세 적혀있는 대부분의 클래스들은 Graphics 클래스의 멤버 함수의 인자로 존재하는것들이다. Graphics 클래스가 결국 paint() 함수내에서 그림을 그리는 부분이기때문이다. The base class for all JUCE..

Graphics Class Reference Tutorial: The Graphics class 앞서 우리는 juce::Component 를 상속받아 나의 클래스를 형성하고, 이들간에 부모-자식-관계를 설정하는 법에 대해 배웠다. 이제는 실질적으로 무언가를 그리는 방법에 대해 배울것이다. 앞서 만들었던 Canvas 클래스를 다시 보자. class Canvas : public juce::Component { public : Canvas() { setSize (canvasW, canvasH); } private : const int canvasW {800}; const int canvasH {500}; }; 이 상태로..

더보기 Component Class Reference Graphics Class Reference Colour Class Reference Colours Namespace Reference Tutorial: Parent and child components Tutorial: Responsive GUI layouts using FlexBox and Grid Tutorial: Advanced GUI layout techniques FlexBox Class Reference FlexItem Class Reference FlexItem::Margin Struct Reference Grid Class Reference Grid::Fr Struct Reference Grid::Px Struct Re..

Grid Class Reference 설명 setBound 로 각 컴포넌트를 배치하는것은 매우 괴로운일일것이다. CSS 의 Grid 와 매우 비슷하게 동작하는 Grid 클래스를 사용하면 각 컴포넌트를 비율로 배치할수있다. 한가지 기억해야할 중요한것은 setBound 든 Grid 든 컴포넌트의 크기에 대한 모든것은, resized() 안에서 정의되어야한다. resized() 코드 void resized() override { juce::Grid grid; using Track = juce::Grid::TrackInfo; using Fr = juce::Grid::Fr; grid.templateRows = { Track (Fr (1)) }; grid.templateColumns = { Tra..

설명 Panel 컴포넌트를 만들어, Canvas 컴포넌트안에 넣으려한다. 아래와 같이 코드를 작성한다. 1. Canvas 클래스의 멤버로 Panel 컴포넌트를 집어넣는다. 2. Canvas 클래스의 Constructor 에서 addAndMakeVisible 함수를 사용하여 각 멤버를 인자로 넘긴다. 3. Canvas 클래스의 resized() 함수에서 setBounds 를 사용하여 위치 시켜준다. 2번 Step 이 누락되었을때, 아무것도 표시되지않음을 알아야한다. 코드 class Panel : public juce::Component { public : Panel(const juce::Colour& newColor) : color(newColor) {} void paint(juce::Graphics& g..