'분류 전체보기' 카테고리의 글 목록

[Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 2

Python 2024. 3. 22. 15:14 |

기본 정렬 알고리즘 세 가지(퀵, 머지, 힙)를 파이게임으로 시각화 해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220

import os
import random
os.environ['PYGAME_HIDE_SUPPORT_PROMPT'] = '1'
import pygame
from math import ceil, floor
 
pygame.init()
pygame.display.set_caption("Sorting Visualization")
screensize = (640, 580)
screen = pygame.display.set_mode(screensize)
clock = pygame.time.Clock()
framerate = 10
running = True
 
font = pygame.font.Font(None, 30)
text = font.render("Sorting Visualization\n\n" +
                   "*q: Quick Sorting [ O(nlogn) ]\n" +
                   "*m: Merge Sorting [ O(nlogn) ]\n" +
                   "*h: Heap Sorting [ O(nlogn) ]\n" +
                   "\n*g: Random Data Generation", True, "gray")
text_pos = text.get_rect()
text_pos.center = (screen.get_width()/2, text_pos.height/2)
 
data_size = 64
data = list()
data_color = list()
 
def DataGenerator():
    global data
    global data_color
    
    data = [random.randint(10, 400) for i in range(data_size)]
    data_color = [(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
                  for i in range(data_size)]
    
DataGenerator()
 
def Visualize():
    screen.fill("black")
    screen.blit(text, text_pos)
    for i in range(data_size):
        pygame.draw.rect(screen, data_color[i], (i*10, screensize[1]-data[i], 10, data[i]))
    pygame.display.flip()
    clock.tick(framerate)
 
def Finalize():
    screen.fill("white")
    pygame.display.flip()
    clock.tick(framerate)
 
def EventHandler():
    for event in pygame.event.get():
        if event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE:
            return -1
        elif event.type == pygame.QUIT:
            exit()
 
def QuickSort(start, end):
    if start >= end:
        return
    pivot = start
    left = start + 1
    right = end
    
    while left <= right:
        if EventHandler() == -1:
            return
        
        while left <= end and data[left] <= data[pivot]:
            left += 1
        while right > start and data[right] >= data[pivot]:
            right -= 1            
        if left > right:
            data[right], data[pivot] = data[pivot], data[right]
            data_color[right], data_color[pivot] = data_color[pivot], data_color[right]
        else:
            data[left], data[right] = data[right], data[left]
            data_color[left], data_color[right] = data_color[right], data_color[left]
            
        Visualize()
            
    QuickSort(start, right-1)
    QuickSort(right+1, end)
 
def MergeSort_1(data_list, color_list):
    if len(data_list) < 2:        
        return data_list, color_list
    
    mid = len(data_list) // 2
    low_data_list, low_color_list = MergeSort_1(data_list[:mid], color_list[:mid])
    high_data_list, high_color_list = MergeSort_1(data_list[mid:], color_list[mid:])
    
    merged_data_list = list()
    merged_color_list = list()
    l = h = 0
    while l < len(low_data_list) and h < len(high_data_list):
        if low_data_list[l] < high_data_list[h]:
            merged_data_list.append(low_data_list[l])
            merged_color_list.append(low_color_list[l])
            l += 1
        else:
            merged_data_list.append(high_data_list[h])
            merged_color_list.append(high_color_list[h])
            h += 1
            
    merged_data_list += low_data_list[l:]
    merged_color_list += low_color_list[l:]
    
    merged_data_list += high_data_list[h:]
    merged_color_list += high_color_list[h:]
    
    return merged_data_list, merged_color_list
 
def MergeSort_2():
    def sort(low, high):
        if EventHandler() == -1:
            return
        
        if high - low < 2:
            return
        
        mid = (low + high) // 2
        sort(low, mid)
        sort(mid, high)
        merge(low, mid, high)
 
    def merge(low, mid, high):
        data_temp = list()
        color_temp = list()
        l, h = low, mid
        
        while l < mid and h < high:
            if data[l] < data[h]:
                data_temp.append(data[l])
                color_temp.append(data_color[l])
                l += 1
            else:
                data_temp.append(data[h])
                color_temp.append(data_color[h])
                h += 1
                
        while l < mid:
            data_temp.append(data[l])
            color_temp.append(data_color[l])
            l += 1
            
        while h < high:
            data_temp.append(data[h])
            color_temp.append(data_color[h])
            h += 1
            
        for i in range(low, high):
            data[i] = data_temp[i - low]
            data_color[i] = color_temp[i - low]
            
            Visualize()            
 
    sort(0, data_size)
 
def HeapSort():
    for i in range(len(data)):
        par = ceil(i/2) - 1
        while par >= 0 and data[par] < data[i]:
            data[par], data[i] = data[i], data[par]
            data_color[par], data_color[i] = data_color[i], data_color[par]
            i = par
            par = floor((i-1)/2)
 
    for i in range(len(data)-1, 0, -1):
        data[0], data[i] = data[i], data[0]
        data_color[0], data_color[i] = data_color[i], data_color[0]
 
        cur = 0
        lch = 1
        rch = 2
        
        while True:
            if EventHandler() == -1:
                return
        
            if rch < i and data[lch] < data[rch]:
                lch = rch
                
            if lch < i and data[lch] > data[cur]:
                data[lch], data[cur] = data[cur], data[lch]
                data_color[lch], data_color[cur] = data_color[cur], data_color[lch]
                
                Visualize()
                
                cur = lch
                lch = cur * 2 + 1
                rch = cur * 2 + 2
            else:
                lch = i # break와 같은 효과
                
            if not lch < i:
                break
            
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE:
            running = False
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_q:
            QuickSort(0, data_size - 1)
            Finalize()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_m:
            MergeSort_2()
            Finalize()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_n:
            data, data_color = MergeSort_1(data, data_color)
            Finalize()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_h:
            HeapSort()
            Finalize()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_g:
            DataGenerator()
            
   Visualize()

 

코드를 작성하고 실행한다.

※ 참고

2024.03.09 - [Python] - [Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 1

저작자표시 비영리 변경금지

'Python' 카테고리의 다른 글

[Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 1 (0)	2024.03.09
[Pygame] Pygame Gravity 파이게임 중력 (0)	2024.02.03
[Pygame] Pygame Simple Camera 파이게임 간단한 카메라 (0)	2024.02.02
[Pygame] Pygame GUI 파이게임 그래픽 유저 인터페이스 (0)	2024.01.29
[Pygame] Box2D 파이게임 물리 라이브러리 (0)	2024.01.28

Posted by J-sean

:

[Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 1

Python 2024. 3. 9. 19:10 |

기본 정렬 알고리즘 네 가지(선택, 버블, 삽입, 셸)를 파이게임으로 시각화 해 보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160

import os
import random
os.environ['PYGAME_HIDE_SUPPORT_PROMPT'] = '1'
import pygame
 
pygame.init()
pygame.display.set_caption("Sorting Visualization")
screensize = (640, 580)
screen = pygame.display.set_mode(screensize)
clock = pygame.time.Clock()
framerate = 10
running = True
 
font = pygame.font.Font(None, 30)
text = font.render("Sorting Visualization\n\n" +
                   "*s: Selection Sorting [ O(n^2) ]\n" +
                   "*b: Bubble Sorting [ O(n^2) ]\n" +
                   "*i: Insertion Sorting [ O(n^2) ]\n" +
                   "*h: Shell Sorting [ O(n^2) ]\n" +
                   "\n*g: Random Data Generation", True, "gray")
text_pos = text.get_rect()
text_pos.center = (screen.get_width()/2, text_pos.height/2)
 
data_size = 64
data = list()
data_color = list()
 
def DataGenerator():
    global data
    global data_color
    
    data = [random.randint(10, 400) for i in range(data_size)]
    data_color = [(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
                  for i in range(data_size)]
    
DataGenerator()
 
def Visualize():
    screen.fill("black")
    screen.blit(text, text_pos)
    for i in range(data_size):
        pygame.draw.rect(screen, data_color[i], (i*10, screensize[1]-data[i], 10, data[i]))
    pygame.display.flip()
    clock.tick(framerate)
 
def Finalize():
    screen.fill("white")
    pygame.display.flip()
    clock.tick(framerate)
 
def EventHandler():
    # 이벤트 처리하는 코드가 없으면 정렬시 프로그램이 freeze된다.
    for event in pygame.event.get():            
        if event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE:
            return -1 # 정렬 중지.
        elif event.type == pygame.QUIT:
            exit() # 프로그램 종료.
 
def SelectSort():
    for i in range(data_size-1):        
        if EventHandler() == -1:
            return
        
        min = i
        for j in range(i+1, data_size, 1):
            if data[min] > data[j]:
                min = j
        data[i], data[min] = data[min], data[i]        
        data_color[i], data_color[min] = data_color[min], data_color[i]
 
        Visualize()
    Finalize()
 
def BubbleSort(): 
    for i in range(data_size-1):
        if EventHandler() == -1:
            return
        
        sorted = True
        for j in range(data_size-1-i):
            if data[j] > data[j+1]:
                data[j], data[j+1] = data[j+1], data[j]
                data_color[j], data_color[j+1] = data_color[j+1], data_color[j]
                sorted = False
        if sorted == True:
            break
        
        Visualize()
    Finalize()
 
def InsertSort(): 
    for i in range(1, data_size, 1):
        if EventHandler() == -1:
            return
        
        val = data[i]
        colval = data_color[i]
        for j in range(i, 0, -1):
            if data[j-1] > val:
                data[j] = data[j-1]
                data_color[j] = data_color[j-1]
                j = j-1
            else:
                break
        data[j] = val
        data_color[j] = colval
        
        Visualize()
    Finalize()
    
def ShellSort():
    # 점화식 리스트 만들기
    recurrence = [1]
    while(True):
        next = recurrence[-1]*3+1
        if next < data_size:
            recurrence.append(next)
        else:
            recurrence.reverse()
            break
        
    for D in recurrence:
        for i in range(D, data_size, 1):
            if EventHandler() == -1:
                return
 
            val = data[i]
            colval = data_color[i]
            j = i
            while True:
                if j>=D and data[j-D]>val:
                    data[j] = data[j-D]
                    data_color[j] = data_color[j-D]
                    j = j-D
                else:
                    break
            data[j] = val
            data_color[j] = colval
 
            Visualize()
    Finalize()
                
while running:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE:
            running = False
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_s:
            SelectSort()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_b:
            BubbleSort()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_i:
            InsertSort()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_h:
            ShellSort()
        elif event.type == pygame.KEYDOWN and event.key == pygame.K_g:
            DataGenerator()
            
   Visualize()

 

코드를 작성하고 실행한다.

※ 참고

2024.03.22 - [Python] - [Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 2

'Python' 카테고리의 다른 글

[Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 2 (0)	2024.03.22
[Pygame] Pygame Gravity 파이게임 중력 (0)	2024.02.03
[Pygame] Pygame Simple Camera 파이게임 간단한 카메라 (0)	2024.02.02
[Pygame] Pygame GUI 파이게임 그래픽 유저 인터페이스 (0)	2024.01.29
[Pygame] Box2D 파이게임 물리 라이브러리 (0)	2024.01.28

Posted by J-sean

:

[Godot] Old CRT Monitor Shader 오래된 CRT 모니터 셰이더

Godot 2024. 3. 3. 18:58 |

오래된 옛날 CRT 모니터나 VHS 비디오 테이프를 재생하는 효과를 표현해 보자.

Sprite2D - 캐릭터 스프라이트를 추가하고 화면 중앙에 위치시킨다.

ColorRect - Layout - Transform - Size를 뷰포트와 동일하게 조절한다.

Material에 Shader Material을 추가한다.

Shader Material을 추가하면 나타나는 Shader에 아래 셰이더 코드를 추가한다.

셰이더 코드를 추가하면 나타나는 Shader Parameters - Overlay 체크 박스를 체크한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234

/*
Shader from Godot Shaders - the free shader library.
godotshaders.com/shader/VHS-and-CRT-monitor-effect
 
This shader is under CC0 license. Feel free to use, improve and 
change this shader according to your needs and consider sharing 
the modified result to godotshaders.com.
*/
 
shader_type canvas_item;
 
//*** IMPORTANT! ***/ 
// - If you are using this shader to affect the node it is applied to set 'overlay' to false (unchecked in the instepctor).
// - If you are using this shader as an overlay, and want the shader to affect the nodes below in the Scene hierarchy,
//   set 'overlay' to true (checked in the inspector).
// On Mac there is potentially a bug causing this to not work properly. If that is the case and you want to use the shader as an overlay
// change all "overlay ? SCREEN_TEXTURE : TEXTURE" to only "SCREEN_TEXTURE" on lines 129-140, and "vec2 uv = overlay ? warp(SCREEN_UV) : warp(UV);"
// to "vec2 uv = warp(SCREEN_UV);" on line 98.
uniform bool overlay = false;
 
uniform float scanlines_opacity : hint_range(0.0, 1.0) = 0.4;
uniform float scanlines_width : hint_range(0.0, 0.5) = 0.25;
uniform float grille_opacity : hint_range(0.0, 1.0) = 0.3;
uniform vec2 resolution = vec2(640.0, 480.0); // Set the number of rows and columns the texture will be divided in. Scanlines and grille will make
                                              // a square based on these values
 
uniform bool pixelate = true; // Fill each square ("pixel") with a sampled color, creating a pixel look and a more accurate representation of how
                              // a CRT monitor would work.
 
uniform bool roll = true;
uniform float roll_speed = 8.0; // Positive values are down, negative are up
uniform float roll_size : hint_range(0.0, 100.0) = 15.0;
uniform float roll_variation : hint_range(0.1, 5.0) = 1.8; // This valie is not an exact science. You have to play around with the value to find
                                                           // a look you like. How this works is explained in the code below.
uniform float distort_intensity : hint_range(0.0, 0.2) = 0.05; // The distortion created by the rolling effect.
 
uniform float noise_opacity : hint_range(0.0, 1.0) = 0.4;
uniform float noise_speed = 5.0; // There is a movement in the noise pattern that can be hard to see first. This sets the speed of that movement.
 
uniform float static_noise_intensity : hint_range(0.0, 1.0) = 0.06;
 
uniform float aberration : hint_range(-1.0, 1.0) = 0.03; // Chromatic aberration, a distortion on each color channel.
uniform float brightness = 1.4; // When adding scanline gaps and grille the image can get very dark. Brightness tries to compensate for that.
uniform bool discolor = true; // Add a discolor effect simulating a VHS
 
uniform float warp_amount :hint_range(0.0, 5.0) = 1.0; // Warp the texture edges simulating the curved glass of a CRT monitor or old TV.
uniform bool clip_warp = false;
 
uniform float vignette_intensity = 0.4; // Size of the vignette, how far towards the middle it should go.
uniform float vignette_opacity : hint_range(0.0, 1.0) = 0.5;
 
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
 
// Used by the noise functin to generate a pseudo random value between 0.0 and 1.0
vec2 random(vec2 uv){
    uv = vec2( dot(uv, vec2(127.1,311.7) ),
               dot(uv, vec2(269.5,183.3) ) );
    return -1.0 + 2.0 * fract(sin(uv) * 43758.5453123);
}
 
// Generate a Perlin noise used by the distortion effects
float noise(vec2 uv) {
    vec2 uv_index = floor(uv);
    vec2 uv_fract = fract(uv);
 
    vec2 blur = smoothstep(0.0, 1.0, uv_fract);
 
    return mix( mix( dot( random(uv_index + vec2(0.0,0.0) ), uv_fract - vec2(0.0,0.0) ),
                     dot( random(uv_index + vec2(1.0,0.0) ), uv_fract - vec2(1.0,0.0) ), blur.x),
                mix( dot( random(uv_index + vec2(0.0,1.0) ), uv_fract - vec2(0.0,1.0) ),
                     dot( random(uv_index + vec2(1.0,1.0) ), uv_fract - vec2(1.0,1.0) ), blur.x), blur.y) * 0.5 + 0.5;
}
 
// Takes in the UV and warps the edges, creating the spherized effect
vec2 warp(vec2 uv){
    vec2 delta = uv - 0.5;
    float delta2 = dot(delta.xy, delta.xy);
    float delta4 = delta2 * delta2;
    float delta_offset = delta4 * warp_amount;
    
    return uv + delta * delta_offset;
}
 
// Adds a black border to hide stretched pixel created by the warp effect
float border (vec2 uv){
    float radius = min(warp_amount, 0.08);
    radius = max(min(min(abs(radius * 2.0), abs(1.0)), abs(1.0)), 1e-5);
    vec2 abs_uv = abs(uv * 2.0 - 1.0) - vec2(1.0, 1.0) + radius;
    float dist = length(max(vec2(0.0), abs_uv)) / radius;
    float square = smoothstep(0.96, 1.0, dist);
    return clamp(1.0 - square, 0.0, 1.0);
}
 
// Adds a vignette shadow to the edges of the image
float vignette(vec2 uv){
    uv *= 1.0 - uv.xy;
    float vignette = uv.x * uv.y * 15.0;
    return pow(vignette, vignette_intensity * vignette_opacity);
}
 
void fragment()
{
    vec2 uv = overlay ? warp(SCREEN_UV) : warp(UV); // Warp the uv. uv will be used in most cases instead of UV to keep the warping
    vec2 text_uv = uv;
    vec2 roll_uv = vec2(0.0);
    float time = roll ? TIME : 0.0;
    
 
    // Pixelate the texture based on the given resolution.
    if (pixelate)
    {
        text_uv = ceil(uv * resolution) / resolution;
    }
    
    // Create the rolling effect. We need roll_line a bit later to make the noise effect.
    // That is why this runs if roll is true OR noise_opacity is over 0.
    float roll_line = 0.0;
    if (roll || noise_opacity > 0.0)
    {
        // Create the areas/lines where the texture will be distorted.
        roll_line = smoothstep(0.3, 0.9, sin(uv.y * roll_size - (time * roll_speed) ) );
        // Create more lines of a different size and apply to the first set of lines. This creates a bit of variation.
        roll_line *= roll_line * smoothstep(0.3, 0.9, sin(uv.y * roll_size * roll_variation - (time * roll_speed * roll_variation) ) );
        // Distort the UV where where the lines are
        roll_uv = vec2(( roll_line * distort_intensity * (1.-UV.x)), 0.0);
    }
    
    vec4 text;
    if (roll)
    {
        // If roll is true distort the texture with roll_uv. The texture is split up into RGB to 
        // make some chromatic aberration. We apply the aberration to the red and green channels accorging to the aberration parameter
        // and intensify it a bit in the roll distortion.
        text.r = texture(SCREEN_TEXTURE, text_uv + roll_uv * 0.8 + vec2(aberration, 0.0) * .1).r;
        text.g = texture(SCREEN_TEXTURE, text_uv + roll_uv * 1.2 - vec2(aberration, 0.0) * .1 ).g;
        text.b = texture(SCREEN_TEXTURE, text_uv + roll_uv).b;
        text.a = 1.0;
    }
    else
    {
        // If roll is false only apply the aberration without any distorion. The aberration values are very small so the .1 is only 
        // to make the slider in the Inspector less sensitive.
        text.r = texture(SCREEN_TEXTURE, text_uv + vec2(aberration, 0.0) * .1).r;
        text.g = texture(SCREEN_TEXTURE, text_uv - vec2(aberration, 0.0) * .1).g;
        text.b = texture(SCREEN_TEXTURE, text_uv).b;
        text.a = 1.0;
    }
    
    float r = text.r;
    float g = text.g;
    float b = text.b;
    
    uv = warp(UV);
    
    // CRT monitors don't have pixels but groups of red, green and blue dots or lines, called grille. We isolate the texture's color channels 
    // and divide it up in 3 offsetted lines to show the red, green and blue colors next to each other, with a small black gap between.
    if (grille_opacity > 0.0){
        
        float g_r = smoothstep(0.85, 0.95, abs(sin(uv.x * (resolution.x * 3.14159265))));
        r = mix(r, r * g_r, grille_opacity);
        
        float g_g = smoothstep(0.85, 0.95, abs(sin(1.05 + uv.x * (resolution.x * 3.14159265))));
        g = mix(g, g * g_g, grille_opacity);
        
        float b_b = smoothstep(0.85, 0.95, abs(sin(2.1 + uv.x * (resolution.x * 3.14159265))));
        b = mix(b, b * b_b, grille_opacity);
        
    }
    
    // Apply the grille to the texture's color channels and apply Brightness. Since the grille and the scanlines (below) make the image very dark you
    // can compensate by increasing the brightness.
    text.r = clamp(r * brightness, 0.0, 1.0);
    text.g = clamp(g * brightness, 0.0, 1.0);
    text.b = clamp(b * brightness, 0.0, 1.0);
    
    // Scanlines are the horizontal lines that make up the image on a CRT monitor. 
    // Here we are actual setting the black gap between each line, which I guess is not the right definition of the word, but you get the idea  
    float scanlines = 0.5;
    if (scanlines_opacity > 0.0)
    {
        // Same technique as above, create lines with sine and applying it to the texture. Smoothstep to allow setting the line size.
        scanlines = smoothstep(scanlines_width, scanlines_width + 0.5, abs(sin(uv.y * (resolution.y * 3.14159265))));
        text.rgb = mix(text.rgb, text.rgb * vec3(scanlines), scanlines_opacity);
    }
    
    // Apply the banded noise.
    if (noise_opacity > 0.0)
    {
        // Generate a noise pattern that is very stretched horizontally, and animate it with noise_speed
        float noise = smoothstep(0.4, 0.5, noise(uv * vec2(2.0, 200.0) + vec2(10.0, (TIME * (noise_speed))) ) );
        
        // We use roll_line (set above) to define how big the noise should be vertically (multiplying cuts off all black parts).
        // We also add in some basic noise with random() to break up the noise pattern above. The noise is sized according to 
        // the resolution value set in the inspector. If you don't like this look you can 
        // change "ceil(uv * resolution) / resolution" to only "uv" to make it less pixelated. Or multiply resolution with som value
        // greater than 1.0 to make them smaller.
        roll_line *= noise * scanlines * clamp(random((ceil(uv * resolution) / resolution) + vec2(TIME * 0.8, 0.0)).x + 0.8, 0.0, 1.0);
        // Add it to the texture based on noise_opacity
        text.rgb = clamp(mix(text.rgb, text.rgb + roll_line, noise_opacity), vec3(0.0), vec3(1.0));
    }
    
    // Apply static noise by generating it over the whole screen in the same way as above
    if (static_noise_intensity > 0.0)
    {
        text.rgb += clamp(random((ceil(uv * resolution) / resolution) + fract(TIME)).x, 0.0, 1.0) * static_noise_intensity;
    }
    
    // Apply a black border to hide imperfections caused by the warping.
    // Also apply the vignette
    text.rgb *= border(uv);
    text.rgb *= vignette(uv);
    // Hides the black border and make that area transparent. Good if you want to add the the texture on top an image of a TV or monitor.
    if (clip_warp)
    {
        text.a = border(uv);
    }
    
    // Apply discoloration to get a VHS look (lower saturation and higher contrast)
    // You can play with the values below or expose them in the Inspector.
    float saturation = 0.5;
    float contrast = 1.2;
    if (discolor)
    {
        // Saturation
        vec3 greyscale = vec3(text.r + text.g + text.b) / 3.;
        text.rgb = mix(text.rgb, greyscale, saturation);
        
        // Contrast
        float midpoint = pow(0.5, 2.2);
        text.rgb = (text.rgb - vec3(midpoint)) * contrast + midpoint;
    }
    
    COLOR = text;
}

 

Shader Parameters의 옵션을 바꿔가며 여러가지 효과를 적용해 보자.

※ 참고

VHS and CRT monitor effect

저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] 2D Fog Shader 안개 셰이더 (0)	2024.03.03
[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율 (0)	2024.02.29
[Godot] Shader God Rays 셰이더 (1)	2024.02.24
[Godot] Path2D PathFollow2D (0)	2024.02.22
[Godot] 3D Object Sprite in 2D Scene (0)	2024.02.22

Posted by J-sean

:

[Godot] 2D Fog Shader 안개 셰이더

Godot 2024. 3. 3. 11:39 |

2D 안개 효과를 만들어 보자.

ParallaxBackground를 추가하고 Layer를 높은 숫자로 바꾼다.

ParallaxLayer를 추가하고 Mirroring을 뷰포트와 동일하게 설정한다.

ColorRect에 ShaderMaterial을 추가하고 Shader를 생성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

shader_type canvas_item;
//render_mode unshaded; // optional
 
// Noise texture
uniform sampler2D noise_texture: repeat_enable, filter_nearest;
// Fog density
uniform float density: hint_range(0.0, 1.0) = 0.25;
// Fog speed
uniform vec2 speed = vec2(0.02, 0.01);
 
// Called for every pixel the material is visible on
void fragment() {
    // Make the fog slowly move
    vec2 uv = UV + speed * TIME;
    // Sample the noise texture
    float noise = texture(noise_texture, uv).r;
    // Convert the noise from the (0.0, 1.0) range to the (-1.0, 1.0) range
    // and clamp it between 0.0 and 1.0 again
    float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);
    // Apply the fog effect
    COLOR.a *= fog * density;
}

 

셰이더는 위와 같이 작성한다.

Shader Parameters - Noise Texture에 Noise Texture 2D를 추가한다.

사이즈는 뷰포트와 동일하게, Seamless 옵션 체크, Noise - FastNoiseLite를 추가한다.

float fog = clamp(noise * 2.0 - 1.0, 0.0, 1.0);

필요하다면 셰이더 코드에서 2.0 이라는 수치를 적당히 변경해 보자.

※ 참고

2D fog overlay

저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Old CRT Monitor Shader 오래된 CRT 모니터 셰이더 (0)	2024.03.03
[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율 (0)	2024.02.29
[Godot] Shader God Rays 셰이더 (1)	2024.02.24
[Godot] Path2D PathFollow2D (0)	2024.02.22
[Godot] 3D Object Sprite in 2D Scene (0)	2024.02.22

Posted by J-sean

:

[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율

Godot 2024. 2. 29. 14:10 |

윈도우 사이즈 변경 시 적용되는 뷰포트 화면 비율 모드를 설정해 보자.

Project Settings... - Display - Window - Stretch - Mode를 viewport로 변경한다.

저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Old CRT Monitor Shader 오래된 CRT 모니터 셰이더 (0)	2024.03.03
[Godot] 2D Fog Shader 안개 셰이더 (0)	2024.03.03
[Godot] Shader God Rays 셰이더 (1)	2024.02.24
[Godot] Path2D PathFollow2D (0)	2024.02.22
[Godot] 3D Object Sprite in 2D Scene (0)	2024.02.22

Posted by J-sean

:

[Godot] Shader God Rays 셰이더

Godot 2024. 2. 24. 21:46 |

셰이더를 이용해 멋진 빛 효과를 만들어 보자.

Sprite2D를 추가하고 Texture를 지정한다. 아무 이미지나 지정해도 상관 없지만 여기서는 Canvas Texture를 지정하고 Scale을 조절했다.

Material에 Shader Material을 지정하고 Shader 파일(GodRay.gdshader)을 생성했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

/*
Shader from Godot Shaders - the free shader library.
godotshaders.com/shader/god-rays
 
Feel free to use, improve and change this shader according to your needs
and consider sharing the modified result on godotshaders.com.
*/
 
shader_type canvas_item;
 
uniform float angle = -0.3;
uniform float position = -0.2;
uniform float spread : hint_range(0.0, 1.0) = 0.5;
uniform float cutoff : hint_range(-1.0, 1.0) = 0.1;
uniform float falloff : hint_range(0.0, 1.0) = 0.2;
uniform float edge_fade : hint_range(0.0, 1.0) = 0.15;
 
uniform float speed = 1.0;
uniform float ray1_density = 8.0;
uniform float ray2_density = 30.0;
uniform float ray2_intensity : hint_range(0.0, 1.0) = 0.3;
 
uniform vec4 color : source_color = vec4(1.0, 0.9, 0.65, 0.8);
 
uniform bool hdr = false;
uniform float seed = 5.0;
 
uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;
 
// Random and noise functions from Book of Shader's chapter on Noise.
float random(vec2 _uv) {
    return fract(sin(dot(_uv.xy, vec2(12.9898, 78.233))) * 43758.5453123);
}
 
float noise (in vec2 uv) {
    vec2 i = floor(uv);
    vec2 f = fract(uv);
 
    // Four corners in 2D of a tile
    float a = random(i);
    float b = random(i + vec2(1.0, 0.0));
    float c = random(i + vec2(0.0, 1.0));
    float d = random(i + vec2(1.0, 1.0));
 
    // Smooth Interpolation
 
    // Cubic Hermine Curve. Same as SmoothStep()
    vec2 u = f * f * (3.0-2.0 * f);
 
    // Mix 4 coorners percentages
    return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y;
}
 
mat2 rotate(float _angle){
    return mat2(vec2(cos(_angle), -sin(_angle)), vec2(sin(_angle), cos(_angle)));
}
 
vec4 screen(vec4 base, vec4 blend){
    return 1.0 - (1.0 - base) * (1.0 - blend);
}
 
void fragment()
{    
    // Rotate, skew and move the UVs
    vec2 transformed_uv = (rotate(angle) * (UV - position))  / ((UV.y + spread) - (UV.y * spread));
    
    // Animate the ray according the the new transformed UVs
    vec2 ray1 = vec2(transformed_uv.x * ray1_density + sin(TIME * 0.1 * speed) * (ray1_density * 0.2) + seed, 1.0);
    vec2 ray2 = vec2(transformed_uv.x * ray2_density + sin(TIME * 0.2 * speed) * (ray1_density * 0.2) + seed, 1.0);
    
    // Cut off the ray's edges
    float cut = step(cutoff, transformed_uv.x) * step(cutoff, 1.0 - transformed_uv.x);
    ray1 *= cut;
    ray2 *= cut;
    
    // Apply the noise pattern (i.e. create the rays)
    float rays;
    
    if (hdr){
        // This is not really HDR, but check this to not clamp the two merged rays making 
        // their values go over 1.0. Can make for some nice effect
        rays = noise(ray1) + (noise(ray2) * ray2_intensity);
    }
    else{
         rays = clamp(noise(ray1) + (noise(ray2) * ray2_intensity), 0.0, 1.0);
    }
    
    // Fade out edges
    rays *= smoothstep(0.0, falloff, (1.0 - UV.y)); // Bottom
    rays *= smoothstep(0.0 + cutoff, edge_fade + cutoff, transformed_uv.x); // Left
    rays *= smoothstep(0.0 + cutoff, edge_fade + cutoff, 1.0 - transformed_uv.x); // Right
    
    // Color to the rays
    vec3 shine = vec3(rays) * color.rgb;
 
    // Try different blending modes for a nicer effect. "Screen" is included in the code,
    // but take a look at https://godotshaders.com/snippet/blending-modes/ for more.
    // With "Screen" blend mode:
    shine = screen(texture(SCREEN_TEXTURE, SCREEN_UV), vec4(color)).rgb;
    
    COLOR = vec4(shine, rays * color.a);
}

 

Shader 파일(GodRay.gdshader)에 위와 같은 코드를 작성한다.

Material을 저장하면(GodRay.tres) 나중에 간단히 다시 사용 할 수 있다.

코드에서 Shader Parameters에 실시간 접근해야 한다면 스크립트(Control.cs)를 추가한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

using Godot;
 
public partial class Control : Sprite2D
{
    //[Export] public ShaderMaterial myShaderMaterial;
    // 위 주석을 해제하고 빌드하면 Editor에 My Shader Material이 표시된다.
    // 여기에 사용하는 Material(GodRay.tres)을 넣고 직접 접근할 수도 있다.
 
    public int speed;
 
    // Called when the node enters the scene tree for the first time.
    public override void _Ready()
    {
        speed = 1;
    }
 
    // Called every frame. 'delta' is the elapsed time since the previous frame.
    public override void _Process(double delta)
    {
        if (Input.IsActionJustPressed("ui_up"))
            (Material as ShaderMaterial).SetShaderParameter("speed", ++speed);
        if (Input.IsActionJustPressed("ui_down"))
            (Material as ShaderMaterial).SetShaderParameter("speed", --speed);
    }
}

 

위와 같이 코드를 작성하면 Shader Material의 파라미터를 언제든 변경할 수 있다.

※ 참고

God rays

저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] 2D Fog Shader 안개 셰이더 (0)	2024.03.03
[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율 (0)	2024.02.29
[Godot] Path2D PathFollow2D (0)	2024.02.22
[Godot] 3D Object Sprite in 2D Scene (0)	2024.02.22
[Godot] Line2D 선 그리기 (0)	2024.02.21

Posted by J-sean

:

[Godot] Path2D PathFollow2D

Godot 2024. 2. 22. 22:10 |

정해진 길을 따라 움직이는 오브젝트를 만들어 보자.

PathFollow2D, Sprite2D를 추가한다. PathFollow2D는 Path2D의 자식 노드이어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

using Godot;
 
public partial class Control : Node2D
{
    public PathFollow2D follower;
 
    // Called when the node enters the scene tree for the first time.
    public override void _Ready()
    {
        follower = GetChild<Path2D>(0).GetChild<PathFollow2D>(0);
    }
 
    // Called every frame. 'delta' is the elapsed time since the previous frame.
    public override void _Process(double delta)
    {
        follower.ProgressRatio += (float)delta;
    }
}

 

위와 같이 코드를 작성한다.

저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율 (0)	2024.02.29
[Godot] Shader God Rays 셰이더 (1)	2024.02.24
[Godot] 3D Object Sprite in 2D Scene (0)	2024.02.22
[Godot] Line2D 선 그리기 (0)	2024.02.21
[Godot] Shader for Sprite Colorkey 스프라이트 컬러키 셰이더 (0)	2024.02.17

Posted by J-sean

:

[Godot] 3D Object Sprite in 2D Scene

Godot 2024. 2. 22. 12:57 |

2D 씬에 3D 오브젝트를 표현해 보자.

2D 씬에 스프라이트를 생성하고 Texture는 ViewportTexture를 지정한다.

3D 씬에 Torus, Camera, Light를 생성하고 적당히 배치해 저장한다.

스프라이트 Texture - Viewport Path에 SubviewPort를 지정한다.

3D 오브젝트에 스크립트를 추가해 움직임을 적용하면 스프라이트에 반영된다.

저작자표시 비영리 변경금지

'Godot' 카테고리의 다른 글

[Godot] Shader God Rays 셰이더 (1)	2024.02.24
[Godot] Path2D PathFollow2D (0)	2024.02.22
[Godot] Line2D 선 그리기 (0)	2024.02.21
[Godot] Shader for Sprite Colorkey 스프라이트 컬러키 셰이더 (0)	2024.02.17
[Godot] Transparent Background Window 투명 배경 윈도우 (0)	2024.02.17

Posted by J-sean

:

Software Engineer English & Software Engineering Blog - Sean

Category

Recent Posts

Recent Comments

Tags

'분류 전체보기'에 해당되는 글 514건

[Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 2

'Python' 카테고리의 다른 글

[Pygame] Sorting Algorithms in Python 파이썬 정렬 알고리즘 1

'Python' 카테고리의 다른 글

[Godot] Old CRT Monitor Shader 오래된 CRT 모니터 셰이더

'Godot' 카테고리의 다른 글

[Godot] 2D Fog Shader 안개 셰이더

'Godot' 카테고리의 다른 글

[Godot] Window Stretch Mode and Aspect Ratio 디스플레이 윈도우 모드 비율

'Godot' 카테고리의 다른 글

[Godot] Shader God Rays 셰이더

'Godot' 카테고리의 다른 글

[Godot] Path2D PathFollow2D

'Godot' 카테고리의 다른 글

[Godot] 3D Object Sprite in 2D Scene

'Godot' 카테고리의 다른 글

티스토리툴바