-
Notifications
You must be signed in to change notification settings - Fork 0
/
sketch.js
107 lines (88 loc) · 2.2 KB
/
sketch.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
var song
var img
var fft
var particles = []
let vectors = []
let gradient
const num = 5000
const noiseScale = 0.01
function preload() {
//song = loadSound('drak.wav')
img = loadImage('glitchImage.jpg')
}
function setup() {
let cnv = createCanvas(windowWidth, windowHeight)
cnv.mousePressed(userStartAudio)
mic = new p5.AudioIn()
mic.start()
for (let j = 0; j < 5; j++)
{
img.filter(ERODE)
}
angleMode(DEGREES)
rectMode(CENTER)
textAlign(CENTER, CENTER)
textSize(width/20)
fft = new p5.FFT(0.9, 1024)
fft.setInput(mic)
gradient = createConicGradient(PI,width/2,height/2)
for(let i = 0; i < num; i++)
{
vectors.push(createVector(random(-width,width), random(-height,height)))
}
stroke(255)
}
function draw() {
translate(width / 2, height / 2)
noStroke()
spectrum = fft.analyze()
lowEnd = fft.getEnergy("bass")
background(img, 30)
//image(glitch.image,-width/2,-height/2,width,height)
//center is at 0,0
// respond to low frequency between 20,200
lowEndGrad = map(lowEnd,0,250,0.5,0.8)
gradient.colors(0,"lightblue",0.6, "magenta", 0.6, "white")
//Background Perlin noise vectors
let lowEndFactor = map(lowEnd,0,250, 0,1000)
stroke(255)
fill(255)
const speed = lowEnd/128
strokeWeight(1.5)
for(let z = 0; z < num; z++) {
let v = vectors[z]
point(v.x, v.y)
let n = noise(v.x * noiseScale, v.y * noiseScale)
let a = n * 360
v.x += cos(a) * speed
v.y += sin(a) * speed
if(onScreen(v)) {
v.x = random(-width, width)
v.y = random(-height,height)
}
}
// gets the waveform as an array
var wave = fft.waveform()
// connects all the points with a line
// iterates to 180 because that is degree of 1/2 circle
//Circle
noFill()
strokeGradient(gradient)
//stroke(255)
strokeWeight(5)
for (var t = -1; t <= 1; t += 2) {
beginShape()
for (var i = 0; i < 180; i += 0.1) {
var index = floor(map(i, 0, 180, 0, wave.length -1))
var r = map(wave[index], -1, 1, 100, 250)
var x = r * sin(i) * t
var y = r * cos(i) * t
vertex(x, y)
}
endShape()
}
}
function onScreen(v) {
return v.x < -width || v.x > width ||
v.y < -height || v.y > height;
}