https://eco-freq-o.netlify.app/sketch.js

1// VAriable declarations
2
3let people = [];
4let sounds = [];
5let images = [];
6let sliders = [];
7let targetSize = 30;
8let field = new WaveFieldDesign();
9let refresh;
10let startbackgroundColor;
11let newBackgroundColor;
12let backgroundRefresh;
13let isRefreshed;
14let button1;
15let button2;
16let button3;
17let button4;
18let button5;
19let slider1;
20let slider3;
21let mixer = [];
22let testSound;
23let carbonText;
24let fft;
25let peakDetect;
26let slider2;
27let xBoxPos = 40;
28let sliderYstart = 200;
29let settings = {
30  numberOfagents: 30,
31};
32
33let numberOfagents = 30;
34//preload images and sounds
35function preload() {
36  peopleData.forEach((p) => sounds.push(loadSound(p.sound)));
37  peopleData.forEach((p) => images.push(loadImage(p.image)));
38}
39
40function setup() {
41  createCanvas(windowWidth, windowHeight);
42  getAudioContext().suspend();
43  startbackgroundColor = random(backgroundPalette);
44  background(startbackgroundColor);
45  isRefreshed = false;
46  field.setup();
47  people = peopleData.map((x, i) =>
48    createPerson(
49      random(200, width - 50),
50      random(200, height - 50),
51      sounds[i],
52      x.title,
53      images[i],
54      50,
55      x.color
56    )
57  );
58
59  function windowResized() {
60    resizeCanvas(windowWidth, windowHeight);
61  }
62
63  slider1 = createSlider(1, 50, 30);
64  slider1.position(xBoxPos, sliderYstart);
65
66  slider2 = createSlider(20, 100, 50);
67  slider2.position(xBoxPos, sliderYstart + 50);
68
69  slider3 = createSlider(0, 50, 10);
70  slider3.position(xBoxPos, sliderYstart + 100);
71
72  button1 = createButton("refresh background color");
73  button2 = createButton("reload whole page");
74  button3 = createButton("Show titles");
75  button4 = createButton("Stop Sound");
76  button5 = createButton("logo Invasion");
77
78  button1.position(xBoxPos, 40);
79  button2.position(xBoxPos, 90);
80  button3.position(xBoxPos, 150);
81  button4.position(xBoxPos, 120);
82  button5.position(xBoxPos, 600);
83  // button5.position(40, 200);
84  button1.style(
85    "color: white; background-color: black; font-family: 'Roboto', sans-serif; width: 100px; border: solid #ffffff 1px;"
86  );
87  button2.style(
88    "color: white; background-color: black; font-family: 'Roboto', sans-serif; width: 100px; border: solid #ffffff 1px;"
89  );
90  button4.style(
91    "color: white; background-color: black; font-family: 'Roboto', sans-serif; width: 100px; border: solid #ffffff 1px;"
92  );
93  button3.style(
94    "color: white; background-color: black; font-family: 'Roboto', sans-serif; width: 100px; border: solid #ffffff 1px;"
95  );
96  button5.style(
97    "color: white; background-color: black; font-family: 'Roboto', sans-serif; width: 100px; border: solid #ffffff 1px;"
98  );
99  button1.mousePressed(refreshBackground);
100  button2.mousePressed(refreshPage);
101  button3.mousePressed(showTitles);
102  button4.mousePressed(stopMusic);
103  button5.mousePressed(changePos);
104  // button5.mousePressed(redraw);
105}
106
107// function instruction() {
108//   let text = text("test", 500, 500);
109//   return {
110//     text,
111//   };
112// }
113
114function stopMusic() {
115  people.forEach((p) => {
116    p.soundStop();
117  });
118}
119function showTitles() {
120  people.forEach((p) => {
121    p.drawtext();
122  });
123}
124function redraw() {
125  people.forEach((p) => {
126    p.draw();
127  });
128}
129function makeSlidersAppear() {
130  people.forEach((p) => {
131    p.createSlider();
132  });
133}
134function makeSlidersDisappear() {
135  people.forEach((p) => {
136    p.hideSlider();
137  });
138}
139function refreshBackground() {
140  text(
141    "Click on icons several times to create more branches, the sound will only play once",
142    100,
143    20
144  );
145  let m = map(carbonEmissionForecast, 0, 350, 0, 255);
146  let newColor = background(random(backgroundPalette));
147  let remove = field.removeAgents(slider3.value());
148  console.log(slider3.value());
149  changePos();
150  console.log(text);
151  return {
152    newColor,
153    remove,
154  };
155  // return background(random(images));
156}
157
158function changePos() {
159  people.forEach((p) => {
160    p.updatePosition();
161  });
162}
163function refreshPage() {
164  window.location.reload();
165}
166function draw() {
167  textAlign(CENTER, CENTER);
168
169  field.update();
170  field.draw();
171  people.forEach((p) => {
172    p.draw();
173  });
174
175  textFont("Helvetica");
176  text(
177    "Click on icons several times to create more branches, the piece willl only play once.",
178    width / 2,
179    50
180  );
181  textSize(12);
182  textFont("Helvetica");
183  text("Number of branches. range 1-50", xBoxPos + 80, sliderYstart + 30);
184  textFont("Helvetica");
185  text("Alpha value. range 20 - 100", xBoxPos + 68, sliderYstart + 80);
186  textFont("Helvetica");
187  text(
188    "agents to remove on background refresh. range 0 - 50 ",
189    xBoxPos + 130,
190    sliderYstart + 130
191  );
192  // windowResized();
193}
194
195function createPerson(
196  positionx,
197  positiony,
198  sound,
199  caption,
200  icon,
201  size,
202  palette
203) {
204  let newPerson = {
205    positionx,
206    positiony,
207    sound,
208    caption,
209    icon,
210    size,
211    palette,
212  };
213  let slider;
214  let isPlaying = false;

215  return {
216    createSlider: () => {
217      slider = createSlider(0, 0.7, 1);
218      slider.position(positionx, positiony + 40);
219    },
220    hideSlider: () => {
221      slider.hide();
222    },
223    getposition: () => ({ x: newPerson.positionx, y: newPerson.positiony }),
224    handleClick: (x, y) => {
225      // console.log({ x, y, newPerson });
226      let d = dist(newPerson.positionx, newPerson.positiony, x, y);
227      if (d < size) {
228        userStartAudio();
229        if (isPlaying == false) {
230          field.addAgents(slider1.value(), x, y, newPerson.palette);
231          sound.play();
232
233          isPlaying = true;
234        } else if (isPlaying) {
235          field.addAgents(slider1.value(), x, y, newPerson.palette);
236        }
237      }
238    },
239    updatePosition: () => {
240      newPerson.positionx = random(200, width - 50);
241      newPerson.positiony = random(200, height - 50);
242    },
243    draw: () => {
244      stroke(255, 204, 0);
245      strokeWeight(4);
246      image(
247        newPerson.icon,
248        newPerson.positionx,
249        newPerson.positiony,
250        targetSize + 10,
251        targetSize + 10
252      );
253    },
254    drawtext: () => {
255      textSize(20);
256      text(
257        newPerson.caption,
258        newPerson.positionx,
259        newPerson.positiony - 20
260        // newPerson.positionx + 50,
261        // newPerson.positiony + 50
262      );
263    },
264    soundStop: () => {
265      sound.stop();
266    },
267  };
268}
269
270function mousePressed() {
271  people.forEach((x) => {
272    x.handleClick(mouseX, mouseY);
273  });
274}