-
Notifications
You must be signed in to change notification settings - Fork 0
/
mySketch.js
184 lines (139 loc) · 10.6 KB
/
mySketch.js
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
let p = []; // глобальный массив картинок
let d; // глобальный объект-корзина
function preload() {
imb = loadImage('pattern-3371709_1920.jpg'); // предзагружаем изображение для фона
}
function addfiles(file) { // при открытии пользовательских файлов, для каждого файла:
if (file.type === 'image')
p.push(new Picture(loadImage(file.data),p.length,file.name,file.subtype)); // если файл является изображением, то создаем из него объект-картинку
file_input.value(''); // очищаем значение элемента для возможности повторной загрузки тех же файлов
if (!loaded && p.length>0) { // если как минимум один файл загружен, то
loaded = true; // разрешаем выполнять draw() вместо начального экрана setup()
file_input.position(10,10).size(168,30); // передвигаем элементы с начального экрана и создаем новые
sel.position(190,10).size(100,30).style('text-align: left');
bg = createSelect(); bg.position(300,10).size(100,30);
bg.style('font-family: monospace; font-size: 20px; text-align: left; background-color: black; color: white');
bg.option('wood'); bg.option('color'); bg.option('none'); bg.selected('wood');
cp = createColorPicker('#808080'); cp.position(410,10).size(100,30);
cp.style('font-family: monospace; font-size: 20px; text-align: left; background-color: black; color: white');
scr = createButton('Screenshot'); scr.position(520,10).size(150,30); scr.mousePressed(screenshot);
scr.style('font-family: monospace; font-size: 20px; text-align: center; background-color: black; color: white');
srt = createButton('Sort'); srt.position(680,10).size(80,30); srt.mousePressed(picsort);
srt.style('font-family: monospace; font-size: 20px; text-align: center; background-color: black; color: white');
swp = createButton('Swap'); swp.position(770,10).size(80,30); swp.mousePressed(picswap);
swp.style('font-family: monospace; font-size: 20px; text-align: center; background-color: black; color: white');
clr = createButton('Clear'); clr.position(860,10).size(80,30); clr.mousePressed(cleartable);
clr.style('font-family: monospace; font-size: 20px; text-align: center; background-color: black; color: white');
nms = createButton('Names'); nms.position(950,10).size(80,30); nms.mousePressed(shownames);
nms.style('font-family: monospace; font-size: 20px; text-align: center; background-color: black; color: white');
windowResized();
}
}
function shownames() { // функция показа и скрытия имен
names = !names;
}
function cleartable() { // функция очистки стола
let n = p.length; // сохраняем полную длину массива
p.splice(0,n); // используя эту несокращенную длинну, очищаем массив
}
function screenshot() { // функция скриншота
save(year()+nf(month(),2)+nf(day(),2)+"-"+nf(hour(),2)+nf(minute(),2)+nf(second(),2)+'.jpg');
}
function picsort() { // функция выстраивания картинок по сетке
let aw = 5; // число картинок в строке
let cell = floor(width/aw); // расчет ширины ячеек
let ah = floor(height/cell); // число строк
for (let i = 0; i < p.length; i++) { // для каджой картинки в массиве
p[i].loc.x = cell/2 + i%aw*cell; // задаем новое расположение X
p[i].loc.y = 50 + cell/2 + floor(i/aw)*cell; // задаем новое расположение Y
p[i].f = 0; // задаем угол
p[i].m = 0.3; // задаем масштаб
}
}
function picswap() { // функция смахивания кратинок
for (let i = 0; i < p.length; i++) { // для каджой картинки в массиве
p[i].loc.x = width; // задаем новое расположение X
p[i].loc.y = random(height); // задаем новое расположение Y
p[i].f = random(PI*2); // задаем угол
}
}
function startup() { // функция отображения графики начального экрана
background(100);
let mx = width/2; let my = 200; // задаем временный центр переменными, т.к. элементы не принимают транслированные координаты
stroke(255).noFill().textAlign(CENTER,CENTER).textSize(50).text('SLECET IMAGES',mx,my-70);
rectMode(CENTER).stroke(255,100).noFill().rect(mx,my,500,300,30);
push();
translate(mx,600);
strokeWeight(5).stroke(140).bezier( 0, -110, -30, -150, 30, -140, 0, -180); strokeWeight(1);
rectMode(CENTER).stroke(255,150).fill(120).rect(0,0,150,220,80);
rectMode(CENTER).stroke(255,150).noFill().rect(0,-60,20,50,10);
line(-74,-20,74,-20);
line(0,-109,0,-86); line(0,-34,0,-21);
stroke(255,50);
line(-200,-150,-100,-150); line(-99,-150,-35,-60);
line(200,-150,100,-150); line(99,-150,35,-60);
noStroke().fill(150).circle(-35,-60,5);
noStroke().fill(150).circle(35,-60,5);
noStroke().fill(150).textAlign(CENTER,CENTER).textSize(30).text('move',-150,-170);
noStroke().fill(150).textAlign(CENTER,CENTER).textSize(30).text('resize',150,-170);
pop();
file_input = createFileInput(addfiles, true); file_input.position(mx-200,my-10).size(400,'');
file_input.style('font-family: monospace; font-size: 20px; background-color: black; text-align: center; color: white');
sel = createSelect(); sel.position(mx-200,my+50).size(400,'');
sel.style('font-family: monospace; font-size: 20px; text-align: center; background-color: black; color: white');
sel.option('small'); sel.option('medium'); sel.option('large'); sel.selected('medium');
}
function setup() {
for (let element of document.getElementsByClassName("p5Canvas")) {
element.addEventListener("contextmenu", (e) => e.preventDefault()); } // блокировка стандартного поведения правой кнопки мыши
cnv = createCanvas(windowWidth, windowHeight); cnv.drop(addfiles, true); // создаем холст по размеру окна
startup(); // создаем графику начального экрана
d = new Deleter(50,height-50,40); // создаем объект-корзину
loaded = false; // по умолчанию запрещаем выполнение основного скетча до загрузки изображений
names = false; // по умолчанию не отображаем имена картинок
focus = 'x'; // по умолчанию все картинки вне фокуса
}
function draw() {
if (loaded) { // если загружено хотя бы одно изображение
d.check(); // проверяем, не помещена ли картинка в корзину
if (bg.value()=='wood' ) image(imb,0,0,width,height); // устанавливаем в качестве фона изображение
else if (bg.value()=='color') background(cp.color()); // или однородный цвет
for (let i = 0; i<p.length; i++) { p[p.length-i-1].checkFocus(); } // проверяем фокусировку от более новых (верхних) картинок к старым
for (let i = 0; i<p.length; i++) { p[i].show(); } // показываем картинки от более старых (нижних) к более новым
d.show(); // показываем икноку корзины
}
}
function mouseWheel(event) { // при использовании колесика мыши
if(focus!='x') { // если есть фокус на картинке
if(event.delta<0 && focus != p.length-1) { // если колесико вращается вверх и картинка не самая верхняя
let t = p[focus]; // сохраняем картинку в фокусе
p[focus] = p[focus+1]; // заменяем текущую картинку верхней
p[focus+1] = t; // заменяем верхнюю картинку сохраненной
focus++; // переводим фокус на верхний слой
for (let i = 0; i<p.length; i++) { p[i].l = i; } // обновляем номера слоев для всего массива
} else if(event.delta>0 && focus != 0) { // если колесико вращается вниз и картинка не самая нижняя
let t = p[focus]; // сохраняем картинку в фокусе
p[focus] = p[focus-1]; // заменяем текущую картинку нижней
p[focus-1] = t; // заменяем нижнюю картинку сохраненной
focus--; // переводим фокус на нижний слой
for (let i = 0; i<p.length; i++) { p[i].l = i; } // обновляем номера слоев для всего массива
}
}
return false; // запрещаем прокручивание окна колесиком
}
function windowResized() {
cnv = createCanvas(windowWidth, windowHeight);
if (loaded) {
cp .position(410%(width-100),10+40*floor(410/(width-100))).size(100,30);
scr.position(520%(width-100),10+40*floor(520/(width-100))).size(150,30);
srt.position(680%(width-100),10+40*floor(680/(width-100))).size(80,30);
swp.position(770%(width-100),10+40*floor(770/(width-100))).size(80,30);
clr.position(860%(width-100),10+40*floor(860/(width-100))).size(80,30);
nms.position(950%(width-100),10+40*floor(950/(width-100))).size(80,30);
d = new Deleter(50,height-50,40);
} else {
file_input.remove();
sel.remove();
startup();
}
}