음악, 삶, 개발

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 에서는 다양한 도형을 나타낼수있..

우리가 디자인툴에서 표현하는 Gradient 색상을 표현해줄수있는 클래스이다. Graphics::setGradientFill 의 인자로 이 ColourGradient 객체를 넘기게 된다. ColourGradient 객체를 잘 만들기위해선, 우선적으로 Gradient 에 대한 이해가 필수적이므로, Adobe Illustrator 를 통해 이를 설명할것이다. 앞서 말했듯이, 디자인적인 결정은 디자인툴에서 해야하므로 Adobe Illustrator 에서 Gradient 색을 결정하고, 어떻게 Juce 코드로 이를 옮길수있는지에 집중할것이다. ColourGradient Class Reference Describes the layout and colour..

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..