有名な画面効果にグリッチエフェクトというものがあります。今回はそれをProcessingで描画した図形にかける方法です。

　今回使用したのはPImageという機能で、これによって画像を表示したりそれにエフェクトを足したりすることができます。今回は前回(http://blog.livedoor.jp/chisato_tofu/archives/25967168.html)の7セグマトリクスにエフェクトをかけたいため、Processingの画面をPImageで扱える形に変更する必要があります。そのために今回はget()関数を利用しています。
　get()関数はget(x,y,dx,dy)とすることで、(x,y)から(dx,dy)分の色を取得できます。今回はこれをランダムに決められた値分移動させることで、それっぽいエフェクトにしています。今回は自分の趣味でrandom関数を使用しましたが、noise関数を利用することでより連続的なノイズを作ることができるとおもいます。

　今回作ったエフェクトは↓のようなものです。元の図形は緑色の正方形が連続しているものです。

ちさと@chisao_62

Processingで作るグリッチエフェクト https://t.co/M9iMhtMoj2

2021/01/11 23:29:31

　以下コードです。get()で取得した範囲は真っ黒のrectで埋めることで、ずらして描画した際の重なりをなくしています。

1. import java.util.Random;
2. 
   
3. PImage img;
4. int[] glitch = new int[4];
5. Random random = new Random();
6. 
   
7. 
   
8. void setup() {
9.   size(1920, 1080);
10.   img = createImage(width, height, ARGB);
11.   colorMode(HSB, 360, 255, 255, 255);
12.   noStroke();
13. }
14. 
    
15. void draw() {
16.   background(0);
17.   fill(156, 137, 172, 255);
18.   for (int i=0; i<9; i++) {
19.     for (int j=0; j<16; j++) {
20.       if ((i + j) % 2 == 0) {
21.         rect(120 * j, 120 * i, 120, 120);
22.       }
23.     }
24.   }
25. 
    
26.   glitch();
27. }
28. 
    
29. 
    
30. void glitch() {
31.   if (random.nextInt(10) >= 9) {
32.     if (random.nextInt(2) > 0) {
33.       glitch[0] = random.nextInt(1080);//y
34.       glitch[1] = random.nextInt(60);//dx
35.       glitch[2] = random.nextInt(100);//dy
36.       glitch[3] = random.nextInt(2) * 2 + 1;//n
37.     } else {
38.       glitch[0] = 0;
39.       glitch[1] = 0;
40.       glitch[2] = 0;
41.       glitch[3] = 0;
42.     }
43.   }
44. 
    
45.   switch(glitch[3]) {
46.   case 1:
47.     img = get(0, glitch[0], width, glitch[2]);
48.     fill(0, 0, 0);
49.     rect(0, glitch[0], width, glitch[2]);
50.     image(img, 30 - glitch[1], glitch[0]);
51.     if (glitch[1] > 30) {
52.       image(img, 30 - glitch[1] + width, glitch[0]);
53.     } else {
54.       image(img, 30 - glitch[1] - width, glitch[0]);
55.     }
56.     break;
57. 
    
58.   case 3:
59.     img = get(0, glitch[0], width, glitch[2]);
60.     fill(0, 0, 0);
61.     rect(0, glitch[0], width, glitch[2]);
62.     image(img, 30 - glitch[1], glitch[0]);
63.     if (glitch[1] > 30) {
64.       image(img, 30 - glitch[1] + width, glitch[0]);
65.     } else {
66.       image(img, 30 - glitch[1] - width, glitch[0]);
67.     }
68.     img = get(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
69.     fill(0, 0, 0);
70.     rect(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
71.     image(img, -30 + glitch[1], glitch[0] - glitch[2] / 2);
72.     if (glitch[1] > 30) {
73.       image(img, -30 + glitch[1] + width, glitch[0] - glitch[2] / 2);
74.     } else {
75.       image(img, -30 + glitch[1] - width, glitch[0] - glitch[2] / 2);
76.     }
77.     img = get(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
78.     fill(0, 0, 0);
79.     rect(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
80.     image(img, -30 + glitch[1], glitch[0] + glitch[2] / 2);
81.     if (glitch[1] > 30) {
82.       image(img, -30 + glitch[1] + width, glitch[0] + glitch[2] / 2);
83.     } else {
84.       image(img, -30 + glitch[1] - width, glitch[0] + glitch[2] / 2);
85.     }
86.     break;
87. 
    
88.   case 5:
89.     img = get(0, glitch[0], width, glitch[2]);
90.     fill(0, 0, 0);
91.     rect(0, glitch[0], width, glitch[2]);
92.     image(img, 30 - glitch[1], glitch[0]);
93.     if (glitch[1] > 30) {
94.       image(img, 30 - glitch[1] + width, glitch[0]);
95.     } else {
96.       image(img, 30 - glitch[1] - width, glitch[0]);
97.     }
98.     img = get(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
99.     fill(0, 0, 0);
100.     rect(0, glitch[0] - glitch[2] / 2, width, glitch[2] / 2);
101.     image(img, -30 + glitch[1], glitch[0] - glitch[2] / 2);
102.     if (glitch[1] > 30) {
103.       image(img, -30 + glitch[1] + width, glitch[0] - glitch[2] / 2);
104.     } else {
105.       image(img, -30 + glitch[1] - width, glitch[0] - glitch[2] / 2);
106.     }
107.     img = get(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
108.     fill(0, 0, 0);
109.     rect(0, glitch[0] + glitch[2] / 2, width, glitch[2] / 2);
110.     image(img, -30 + glitch[1], glitch[0] + glitch[2] / 2);
111.     if (glitch[1] > 30) {
112.       image(img, -30 + glitch[1] + width, glitch[0] + glitch[2] / 2);
113.     } else {
114.       image(img, -30 + glitch[1] - width, glitch[0] + glitch[2] / 2);
115.     }
116.     img = get(0, glitch[0] - glitch[2], width, glitch[2]);
117.     fill(0, 0, 0);
118.     rect(0, glitch[0] - glitch[2], width, glitch[2]);
119.     image(img, -30 + glitch[1], glitch[0] - glitch[2]);
120.     if (glitch[1] > 30) {
121.       image(img, -30 + glitch[1] + width, glitch[0] - glitch[2]);
122.     } else {
123.       image(img, -30 + glitch[1] - width, glitch[0] - glitch[2]);
124.     }
125.     img = get(0, glitch[0] + glitch[2], width, glitch[2]);
126.     fill(0, 0, 0);
127.     rect(0, glitch[0] + glitch[2], width, glitch[2]);
128.     image(img, -30 + glitch[1], glitch[0] + glitch[2]);
129.     if (glitch[1] > 30) {
130.       image(img, -30 + glitch[1] + width, glitch[0] + glitch[2]);
131.     } else {
132.       image(img, -30 + glitch[1] - width, glitch[0] + glitch[2]);
133.     }
134.     break;
135.   }
136. }