Skip to content

Commit 3c5c61d

Browse files
IPdotSetAFIPdotSetAF
committed
cleanup
added SVG logo support updated WE properties and webControls updated readme
1 parent 5399b98 commit 3c5c61d

File tree

7 files changed

+270
-110
lines changed

7 files changed

+270
-110
lines changed

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ This is a highly customizable animated Matrix wallpaper for Wallpaper Engine (We
99
##
1010

1111
<p align="center">
12-
<img src="thereisnomeme.jpg"/>
12+
<img src="images/thereisnomeme.jpg"/>
1313
</p>
1414

1515
<p align="center">
@@ -48,6 +48,10 @@ This is a highly customizable animated Matrix wallpaper for Wallpaper Engine (We
4848
- Codes (these will be shown as decrypted Messages)
4949
- Web Browser Compatible
5050
- Preset save/load
51+
- SVG Logo
52+
- 3 presets + CUSTOM
53+
- Scale
54+
- Position
5155

5256
## Are you ready to be free?
5357

@@ -60,7 +64,6 @@ This is a highly customizable animated Matrix wallpaper for Wallpaper Engine (We
6064

6165
## TODO:
6266
- Multiple drops (customizable count)
63-
- SVG Logo support
6467
- Clock support
6568
- Big Message support
6669
- [Lively](https://github.com/rocksdanister/lively) Compatible version

‎images/ipaf.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎images/kali-1.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎images/kali-2.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎thereisnomeme.jpg‎ renamed to ‎images/thereisnomeme.jpg‎

File renamed without changes.

‎index.js‎

Lines changed: 78 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ window.onload = function () {
1717
ui_characters_customCharset: "0123456789ABCDEF",
1818
ui_font_font: "2",
1919
ui_font_customFont: "monospace",
20-
ui_font_fontSize: 15,
20+
ui_font_size: 15,
2121
ui_other_codesCommaSeparated: "THE MATRIX",
2222
codes: makeCodes("THE MATRIX"),
2323
ui_color_colorMode: "2",
@@ -30,6 +30,11 @@ window.onload = function () {
3030
ui_audio_audioSensetivity: 50,
3131
ui_audio_silenceAnimation: true,
3232
ui_audio_silenceTimeoutSeconds: 3,
33+
ui_logo_logo: "1",
34+
ui_logo_customLogo: "",
35+
ui_logo_scale: 1,
36+
ui_logo_positionX: 0,
37+
ui_logo_positionY: 0,
3338
Save() {
3439
window.localStorage.setItem("preset", JSON.stringify(gui.save()));
3540
Log("Saved preset.");
@@ -56,7 +61,7 @@ window.onload = function () {
5661
drawGui();
5762

5863
function drawGui() {
59-
gui = new lil.GUI({ autoPlace: false, width: 400 });
64+
gui = new lil.GUI({ autoPlace: false, width: 300 });
6065

6166
const rainFolder = gui.addFolder('Rain');
6267
rainFolder.add(options, 'ui_rain_matrixSpeed').min(1).max(60).step(1).name('Matrix Speed').onChange(() => {
@@ -82,7 +87,7 @@ window.onload = function () {
8287
characterFolder.add(options, 'ui_characters_customCharset').name('Custom Char Set').onChange(updateCharSet);
8388

8489
const fontFolder = gui.addFolder("Font");
85-
fontFolder.add(options, 'ui_font_fontSize').min(5).max(30).step(1).name('Font Size').onChange(updateFont);
90+
fontFolder.add(options, 'ui_font_size').min(5).max(30).step(1).name('Font Size').onChange(updateFont);
8691
fontFolder.add(options, 'ui_font_font', { "MonoSpace": "0", "Consolas": "1", "Courier Bold": "2", "Custom": "3" }).name('Font').onChange(updateFont);
8792
fontFolder.add(options, 'ui_font_customFont').name('Custom Font').onChange(updateFont);
8893

@@ -94,6 +99,14 @@ window.onload = function () {
9499
fallAnimation();
95100
});
96101

102+
const logoFolder = gui.addFolder("Logo");
103+
logoFolder.add(options, "ui_logo_logo", { "None": "0", "IP.AF": "1", "Kali 1": "2", "Kali 2": "3", "Custom": "4" }).name("Logo").onChange(updateMask);
104+
logoFolder.add(options, "ui_logo_customLogo").name("Custom Logo URL (SVG)").onChange(updateMask);
105+
logoFolder.add(options, "ui_logo_scale").min(0).max(10).step(0.1).name("Scale").onChange(updateMask);
106+
const logoPositionFolder = logoFolder.addFolder("Position");
107+
logoPositionFolder.add(options, "ui_logo_positionX").min(-5000).max(5000).step(1).name("X").onChange(updateMask);
108+
logoPositionFolder.add(options, "ui_logo_positionY").min(-5000).max(5000).step(1).name("Y").onChange(updateMask);
109+
97110
gui.add(options, "Save");
98111
gui.add(options, "Load");
99112
gui.add(options, "Reset");
@@ -131,9 +144,9 @@ window.onload = function () {
131144
options.ui_font_font = properties.ui_font_font.value;
132145
if (properties.ui_font_customFont)
133146
options.ui_font_customFont = properties.ui_font_customFont.value;
134-
if (properties.ui_font_fontsize)
135-
options.ui_font_fontSize = properties.ui_font_fontsize.value;
136-
if (properties.ui_font_font || properties.ui_font_customFont || properties.ui_font_fontsize)
147+
if (properties.ui_font_size)
148+
options.ui_font_size = properties.ui_font_size.value;
149+
if (properties.ui_font_font || properties.ui_font_customFont || properties.ui_font_size)
137150
updateFont();
138151

139152
if (properties.ui_audio_audioresponsive)
@@ -145,6 +158,19 @@ window.onload = function () {
145158
if (properties.ui_audio_silencetimeoutseconds)
146159
options.ui_audio_silenceTimeoutSeconds = properties.ui_audio_silencetimeoutseconds.value;
147160

161+
if (properties.ui_logo_logo)
162+
options.ui_logo_logo = properties.ui_logo_logo.value;
163+
if (properties.ui_logo_customlogo)
164+
options.ui_logo_customLogo = properties.ui_logo_customlogo.value;
165+
if (properties.ui_logo_scale)
166+
options.ui_logo_scale = properties.ui_logo_scale.value;
167+
if (properties.ui_logo_positionx)
168+
options.ui_logo_positionX = properties.ui_logo_positionx.value;
169+
if (properties.ui_logo_positiony)
170+
options.ui_logo_positionY = properties.ui_logo_positiony.value;
171+
if (properties.ui_logo_logo || properties.ui_logo_customlogo || properties.ui_logo_scale || properties.ui_logo_positionx || properties.ui_logo_positiony)
172+
updateMask();
173+
148174
if (properties.ui_other_codescommaseparated) {
149175
options.codes = makeCodes(properties.ui_other_codescommaseparated.value);
150176
fallAnimation();
@@ -186,6 +212,44 @@ window.onload = function () {
186212
}
187213

188214
function updateMask() {
215+
let img = new Image();
216+
217+
img.onload = function () {
218+
drawBlackMask();
219+
220+
let img_width = img.width * options.ui_logo_scale;
221+
let img_height = img.height * options.ui_logo_scale;
222+
223+
mask.globalCompositeOperation = 'destination-out';
224+
mask.drawImage(img, c.width / 2 - img_width / 2 + options.ui_logo_positionX, c.height / 2 - img_height / 2 + options.ui_logo_positionY, img_width, img_height);
225+
};
226+
227+
switch (options.ui_logo_logo) {
228+
case "1": {
229+
img.src = 'images/ipaf.svg';
230+
break;
231+
}
232+
case "2": {
233+
img.src = 'images/kali-1.svg';
234+
break;
235+
}
236+
case "3": {
237+
img.src = 'images/kali-2.svg';
238+
break;
239+
}
240+
case "4": {
241+
img.src = options.ui_logo_customLogo;
242+
break;
243+
}
244+
default: {
245+
drawBlackMask();
246+
break;
247+
}
248+
}
249+
}
250+
251+
function drawBlackMask() {
252+
mask.globalCompositeOperation = 'source-over';
189253
mask.clearRect(0, 0, c.width, c.height);
190254
mask.fillStyle = "rgba(0, 0, 0, " + options.trailLength + ")";
191255
mask.fillRect(0, 0, c.width, c.height);
@@ -255,16 +319,16 @@ window.onload = function () {
255319
}
256320
}
257321

258-
ctx.font = options.ui_font_fontSize + "px " + font_name;
259-
font_fraction = options.ui_font_fontSize / 4;
322+
ctx.font = options.ui_font_size + "px " + font_name;
323+
font_fraction = options.ui_font_size / 4;
260324

261325
updateGrid();
262326
fallAnimation();
263327
}
264328

265329
function updateGrid() {
266-
columns = c.width / options.ui_font_fontSize;
267-
rows = c.height / options.ui_font_fontSize;
330+
columns = c.width / options.ui_font_size;
331+
rows = c.height / options.ui_font_size;
268332
column_hue = Math.floor(360 / columns);
269333
row_hue = Math.floor(360 / rows);
270334
column_frequency = frequencyArrayLength / (columns * 2);
@@ -322,20 +386,20 @@ window.onload = function () {
322386
lightness = 100;
323387

324388
if (options.ui_color_highlightFirstCharacter) {
325-
ctx.fillStyle = "#000";
326-
ctx.fillRect(i * options.ui_font_fontSize, ((drops[i][0] - 2) * options.ui_font_fontSize) + font_fraction, options.ui_font_fontSize, options.ui_font_fontSize);
389+
ctx.clearRect(i * options.ui_font_size, ((drops[i][0] - 2) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
327390

328391
var tmp = drops[i][0] - 1;
329392
ctx.fillStyle = calculateColor(i, tmp, drop_chars[i][1]);
330-
ctx.fillText(drop_chars[i][0], i * options.ui_font_fontSize, tmp * options.ui_font_fontSize);
393+
ctx.fillText(drop_chars[i][0], i * options.ui_font_size, tmp * options.ui_font_size);
331394

332395
ctx.fillStyle = "#FFF";
333396
}
334397
else
335398
ctx.fillStyle = calculateColor(i, drops[i][0], lightness);
336399

400+
ctx.clearRect(i * options.ui_font_size, ((drops[i][0] - 1) * options.ui_font_size) + font_fraction, options.ui_font_size, options.ui_font_size);
337401
drop_chars[i] = [character, lightness];
338-
ctx.fillText(character, i * options.ui_font_fontSize, drops[i][0] * options.ui_font_fontSize);
402+
ctx.fillText(character, i * options.ui_font_size, drops[i][0] * options.ui_font_size);
339403

340404
if (drops[i][0] > rows && Math.random() > probability)
341405
drops[i] = [0, 0, 0];

0 commit comments

Comments
 (0)