음악, 삶, 개발

우리가 디자인툴에서 표현하는 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..

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

일러스트레이터에서는 하나의 요소를 Layer 라고하지만, Juce 에서는 Component 라고 한다. 하나의 Component 에는 멤버 변수로 여러 Component 들이 포함될수있다. 아래와 같이 만든다. class Panel : public juce::Component { public : Panel(const juce::Colour& newColor) : color(newColor) {} void paint(juce::Graphics& g) override { g.fillAll(color); } private : const juce::Colour color; };

앞서 이론을 배웠으니, 실제 ValueTree 에 요소들을 추가, 삭제하는등에 대해 연습문제를 풀면서 해보겠다. 문제 정답 juce::Identifier treeName {"Note"}; juce::ValueTree tree {treeName}; 설명 setProperty 와 헷깔리지말자. setProperty 는 말그대로 이미 생성된 ValueTree 에 Property 를 추가 또는 변경하는것이다. ValueTree 의 이름은 반드시 초기화할때 인자로 넘겨야한다. 또한 초기화후 해당 ValueTree 의 이름은 절대 변경될수없다. 문제 정답 const juce:..

Tutorial: The ValueTree class ValueTree Class Reference ValueTree::Listener Class Reference Identifier Class Reference var Class Reference XmlElement Class Reference 이 기본기 포스트는, Tutorial: The ValueTree class 를 바탕으로 쓰여졌다. 따라서 내 포스팅을 다 읽고도, 또는 시간이 흘러 무언가 희미하다면.. 반드시 위의 Juce 공식 튜토리얼을 읽고 이 포스팅을 다시 읽도록한다. ValueTree 는 Juce 에서 제공하는 컨테이너이다. Thread 안정성을 보장하지 않기때문에..