Skip to content

Commit 7aa35d2

Browse files
eliasfloretengeliasfloreteng
committed
first commit
0 parents  commit 7aa35d2

File tree

11 files changed

+129
-0
lines changed

11 files changed

+129
-0
lines changed

‎LivelyInfo.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"AppVersion": "1.3.0.0",
3+
"Title": "Circular Audio Visualizer",
4+
"Thumbnail": "preview.png",
5+
"Preview": "preview.gif",
6+
"Desc": "Displays an audio spectrum of the currently played system sounds in a circle",
7+
"Author": "elias123tre",
8+
"License": null,
9+
"Contact": "https://github.com/elias123tre/lively-audio-visualizer",
10+
"Type": 2,
11+
"FileName": "index.html",
12+
"Arguments": null,
13+
"IsAbsolutePath": false
14+
}

‎LivelyProperties.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Lively Audio Visualizer
2+
3+
Audio Visualizer for [lively wallpaper](https://rocksdanister.github.io/lively/)
4+
5+
![Preview gif](preview.gif)
6+
7+
## How to setup
8+
9+
Download the [latest release zip file](https://github.com/elias123tre/Lively-Audio-Visualizer/releases/latest) and drag and drop it into lively.

‎css/style.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
html,
2+
body,
3+
main,
4+
canvas {
5+
width: 100%;
6+
height: 100%;
7+
margin: 0;
8+
display: block;
9+
overflow: hidden;
10+
user-select: none;
11+
}
12+
13+
body {
14+
background-image: url("/images/tP5iLDT.jpg");
15+
background-position: center;
16+
background-repeat: no-repeat;
17+
background-size: cover;
18+
}

‎images/fractal.png

63.4 MB
Loading

‎images/tP5iLDT.jpg

1.13 MB
Loading

‎index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta content='IE=8' http-equiv='X-UA-Compatible'>
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="css/style.css">
10+
11+
<!-- <script src="/js/live.js"></script> -->
12+
<script src="/js/p5.min.js"></script>
13+
<script src="/js/sketch.js"></script>
14+
</head>
15+
16+
<body>
17+
<!-- <p id="debug" style="position: fixed;top: 0;left: 0">Lorem, ipsum.</p> -->
18+
</body>
19+
20+
</html>

‎js/p5.min.js

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/sketch.js

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
let w = window.innerWidth
2+
let h = window.innerHeight
3+
4+
let innerRadius = h / 4
5+
let maxLength = h / 2 - innerRadius
6+
let thickness = 4
7+
let boost = 2
8+
9+
function livelyAudioListener(audioarray) {
10+
audioarray = audioarray.filter((elem, idx, arr) => arr[idx - 1] !== elem)
11+
push() // Start drawing
12+
clear()
13+
colorMode(HSL)
14+
strokeWeight(thickness)
15+
translate(w / 2, h / 2)
16+
// line(0, -h / 2, 0, h / 2) // Center line
17+
18+
// audioarray = audioarray.map((elem, index) => elem * Math.pow(2, -Math.pow(index, 4)))
19+
// text(audioarray.join("\n"), 0, -h / 2)
20+
// for (let i = 1; i < audioarray.length; i++) {
21+
// const ampl = audioarray[i]
22+
// const x = -w / 2 + w * (i / audioarray.length)
23+
// const lastAmpl = audioarray[i - 1]
24+
// const lastX = -w / 2 + w * ((i - 1) / audioarray.length)
25+
// line(lastX, -lastAmpl * (h / 2), x, -ampl * (h / 2))
26+
// }
27+
28+
// for (let i = 0; i < audioarray.length; i++) {
29+
// const ampl = audioarray[i]
30+
// const x = -w / 2 + w * (i / audioarray.length)
31+
// line(x, 0, x, -ampl * (h / 2))
32+
// }
33+
34+
if (audioarray.length > 1) {
35+
audioarray = audioarray.reverse().concat(audioarray.slice().reverse())
36+
rotate(TWO_PI / audioarray.length / 2)
37+
for (let index = 0; index < audioarray.length; index++) {
38+
let ampl = audioarray[index]
39+
ampl *= boost
40+
stroke((206 + index) % 360, 74, 57, 1) // Hue(360),Saturation(100),Lightness(100),Opacity(1)
41+
line(0, innerRadius, 0, innerRadius + ampl * maxLength)
42+
rotate(TWO_PI / audioarray.length)
43+
}
44+
}
45+
46+
pop() // End drawing
47+
}
48+
49+
function setup() {
50+
createCanvas(w, h)
51+
noLoop()
52+
}
53+
54+
function drawSpectrum() {
55+
strokeWeight(thickness)
56+
for (let v = 0; v < TWO_PI; v += TWO_PI / spokes) {
57+
let innerX = cos(v) * innerRadius
58+
let innerY = sin(v) * innerRadius
59+
let vec = new p5.Vector(innerX, innerY)
60+
vec.setMag(maxLength + innerRadius)
61+
62+
line(w / 2 + innerX, h / 2 + innerY, w / 2 + vec.x, h / 2 + vec.y)
63+
}
64+
}

‎preview.gif

1.41 MB
Loading

‎preview.png

2.05 MB
Loading

0 commit comments

Comments
 (0)