https://softmaps.netlify.app/script9.js

1let linePoints = []; // Array to store points of the line
2let angle = 0; // Angle for the sine wave
3let frequency = 0.0001; // Controls the frequency of the wave
4let amplitude = 700; // Controls the amplitude of the wave
5let segmentWidth = 5; // Width of each line segment
6let direction = 1; // 1 for moving right, -1 for moving left
7var song;
8var button;
9var amp;
10var volHistory = [];
11var bassHistory = [];
12var midHistory = [];
13var trebleHistory = [];
14let vid;
15let playing = false;
16
17function toggleSong(){
18  if (song.isPlaying()){
19    song.pause();
20    button.html('start sound mapping');
21  } else {
22    song.play();
23    button.html('stop sound mapping');
24
25  }
26}
27
28
29
30// function windowResized() { 
31//     if(windowWidth < 550) {
32//         size = 10;
33//     } else {
34//         size = 100;
35//     }
36// }
37
38function preload(){
39  song = loadSound("assets/new-sound3.mp3");
40  // vid = createVideo(['testunderwater3.mov', 'testunderwater3.webm']);
41  // vid = createVideo(['pool13.mp4']);
42  gif_loadImg = loadImage("assets/feet-pool.gif");
43  // gif_loadImg2 = loadImage("underwater2.gif");
44  // vid.size(width, height);
45  // vid.hide();
46  // vid.loop();
47
48  // gif_loadImg.resize(windowWidth, 0);
49  // gif_createImg = createImg("test-dither2.gif");
50}
51function toggleVid() {
52  if (playing) {
53    vid.pause();
54    button3.html('play video');
55  } else {
56    vid.loop();
57    button3.html('pause video');
58  }
59  playing = !playing;
60}
61
62function setup() {
63  // createCanvas(1280,720);
64  createCanvas(windowWidth,windowHeight);
65  button=createButton('start or stop mapping');
66  button.mousePressed(toggleSong);
67  button.position(windowWidth/20,windowHeight/20)
68  //button3 = createButton('play');
69  //button3.position(windowWidth/15, windowHeight/8 )
70  //button3.mousePressed(toggleVid); // attach button listener
71  song.play();
72  amp = new p5.Amplitude();
73  freq = new p5.FFT();
74
75  background(0);
76
77  initializeLine();
78}
79
80function draw() {
81  resizeCanvas(windowWidth, windowHeight);
82
83
84
85  var vol = amp.getLevel();
86  volHistory.push(vol);
87
88   freq.analyze();
89      let bassFreq = freq.getEnergy("bass");
90      // console.log("bass"+bassFreq);
91
92      let bassMap = map(bassFreq, 0, 50, 0, 5);
93      console.log("bassmap:" + bassMap);
94      let midFreq = freq.getEnergy("lowMid");
95      
96      let midMap = map(midFreq, 0, 50, 0, 5);
97      console.log("midmap:"+ midMap);
98      let trebleFreq = freq.getEnergy("highMid");
99      let trebMap = map(trebleFreq, 0, 50, 0, 5);
100      // console.log("treble"+trebleFreq);
101      console.log("trebmap:" + trebMap);
102  //  // console.log(volHistory);
103
104
105  for (var i = 0; i < volHistory.length; i++){
106    var y = map(volHistory[i]*5, 0,1,height/1.1,0.5);
107    // console.log(y);
108    var y2 = map(100, 0,1,height/1.5,0.5);
109    // console.log(y);
110    fill(0, 0, 255);
111    stroke(0,0,255);
112    // stroke(255, 192, 203);
113    ellipse(i, y, 5, 5);
114    // point (i, y);
115  }
116
117 if (volHistory.length > width){
118    volHistory.splice(0,1);
119  }
120
121 // if (bassFreq > 60){
122 //    angle = bassFreq/2;
123 //    amplitude=50;
124 //    stroke(0, 255, 255);
125 //    ellipse(100, 200, 100, 100);
126 //  } else if (trebleFreq <10 ){
127 //    amplitude=200;
128 //    stroke(0, 0, 255);
129 //    ellipse(400, 600, 100, 100);
130 //  } else if (midFreq <5){
131 //    stroke(255, 192, 203);
132 //    amplitude=100;
133 //    rect(300, 600, 100, 100);
134 //  }
135
136
137if (bassMap > 15.7){
138    // angle = bassFreq/2;
139    // amplitude=50;
140    // stroke(0, 255, 255);
141    ellipse(100, 200, 100, 100);
142  } else if (trebMap >7.2 ){
143    amplitude=300;
144
145    stroke(0, 0, 255);
146    fill(255, 146, 146);
147    ellipse(400, 600, 100, 100);
148
149
150  } else if (midMap <14){
151    angle = midMap/2;
152    stroke(255, 146, 146);
153    amplitude=100;
154    fill(255, 146, 146);
155    rect(100, 300, 100, 100);
156    fill(255, 146, 146);
157  }
158 // if (bassMap > 15.7){
159 //    // angle = bassFreq/2;
160 //    // amplitude=50;
161 //    amplitude=100;
162 //    // stroke(0, 255, 255);
163 //    ellipse(100, 200, 100, 100);
164 //  } else if (trebMap >7.5 ){
165 //    amplitude=300;
166 //     angle = trebleFreq/2;
167 //    stroke(0, 0, 255);
168 //    fill(255, 146, 146);
169 //    ellipse(400, 600, 100, 100);
170
171
172 //  } else if (midMap <14){
173 //    angle = midMap/2;
174 //    stroke(255, 146, 146);
175 //    amplitude=100;
176 //    fill(255, 146, 146);
177 //    rect(100, 300, 100, 100);
178 //    fill(255, 146, 146);
179 //  }
180
181
182  // if (bassMap > 70){
183
184  //   // angle = bassFreq/2;
185  //   // amplitude=50;
186  //   // stroke(0, 255, 255);
187  //   ellipse(100, 200, 100, 100);
188  //   // console.log(bassFreq)
189  // } else if (trebMap <45 ){
190  //   amplitude=100;
191
192  //   stroke(0, 0, 255);
193  //   ellipse(400, 600, 100, 100);
194 
195
196  // } else if (midMap <30){
197  //   angle = midMap/2;
198  //   // frequency=0.0005
199  //   stroke(255, 146, 146);
200  //   amplitude=100;
201  //   fill(255, 146, 146);
202  //   rect(100, 300, 100, 100);
203  //   fill(255, 146, 146);
204  // }
205
206  // Update the last point of the line based on a sine wave
207  let endX = linePoints[linePoints.length - 1].x + segmentWidth * direction; // Move to the right or left
208  let endY = height / 2 + sin(angle) * amplitude+(vol*100);
209
210  // Add the new point to the array
211  linePoints.push(createVector(endX, endY));
212
213  
214  // Draw multiple segments of the line
215  for (let i = 0; i < linePoints.length - 1; i++) {
216    line(linePoints[i].x, linePoints[i].y, linePoints[i + 1].x, linePoints[i + 1].y);
217  }
218
219  // Increment the angle for the sine wave
220  angle += frequency*(vol*500);
221
222  // Check if the line has reached the right or left side of the canvas
223  if (endX > width || endX < 0) {
224    // Reverse the direction
225    direction *= -1;
226
227    // Remove the last point to avoid overlapping when changing direction
228    linePoints.pop();
229  }
230  // if (linePoints.length > width){
231  //   linePoints.splice(0,1);
232  // }
233   // gif_createImg.position(50, 350);
234  // background(clear);
235}
236
237function initializeLine() {
238  // Initialize the array with the starting point of the line
239  linePoints.push(createVector(0, height / 2));
240}
241
242function windowResized() {
243  resizeCanvas(windowWidth, windowHeight);
244  // vid.size(width, height);
245  // pixelSize = 8; // Reset the pixel size when the window is resized
246}