Nature of Code: outer space audio physics interactive art environment

I have been imagining a sort of outer space audio physics interactive art environment and have tried to create it for this final project. I was inspired by an outer-space spray paint art project I did growing up at camp.

The environment does not work in the safari browser because of audio input issues. It works well in Chrome. You can try it out and see a video of the environment below.

A description of the moving parts

speakerBox: reading in the amplitude of the song being played and is mapping it to properties of an ellipse element

Orbiters: system of boids following physics set in the program. New ones can be generated by the user by pressing the button in the top left hand corner

Particles: created using particles js. Their behavior is set to be onClick = create new particles and onHover = repel.

Celestial Mist: The project posted on the web is currently using the fft input of the song being played. In the version seen in the videos the mist is reading in the ftt from the computers microphone and mapping it to a set of ellipses which are set to have low opacity values using RGBA and colors being mapped to the input as well.

The program is set up to be dynamic and able to create different paintings each time based on user interaction and randomization programmed into the code. Also trying to create an interaction where improvisation is possible between computer and human. The program changes the velocity of the objects moving through space over time, which gives the environment the ability to continue changing over time.

Here is a video from the beginning stages of the environments, and this one highlights the particles, which you can interact with. See the mouse interaction at the bottom of the screen.

Some Alternate Universes

In the ‘final’ version of this project I gave the p5 canvas no background color which reveals all of the particles in the background, and creates the color streaks left by the elements paths. There is however an alternate universe in which their is a background to the canvas, and that one is fun to explore as well

* In some of the videos you may notice a little trick with the button in the left hand corner. I have made the button element content editable in the html so that I can live edit what the button text is. This has a couple interesting possibilities, one of them that I am trying here, is to add a layer of improvisational documentation, by typing what the button is doing while pressing the button. Very meta.

Breakdown of the code

Code Breakdown

JavaScript

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

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

//variables for the orbiters

varorbiters=[];

varattractor;

// velocity times acceleration = something important in all of this

// variables to control the constant circle bar ---anything else?

varangle;

varaVelocity=0;

varaAcceleration=0.00001;

//variables to play the song and read in the values

varsong;

varanalyzer;

//sound

varmic;

varfft;

// variables for canvas and window width and height to place the canvas correctly

varc;

varwindow_width;

varwindow_height;

varx;

vary;

//function to center the p5 canvas, with window resized function at bottom which refreshes the value every time the window size is adjusted to make canvas responsive

functioncenterCanvas(){

varx=(windowWidth-width)/2;

vary=(windowHeight-height)/2;

c.position(x,y);

}

functionsetup(){

// variables to hold the window width and height

window_height=windowHeight;

window_width=windowWidth;

//create canvas

c=createCanvas(window_width,window_height-200);

//center the canvas

centerCanvas()

//add id to canvas to make its position absolute

c.id('phyCanvas');

/*

AUDIO SET UP

*/

//load song

song=loadSound('gta.mp3');

// select play button created on index.html page to toggle playing song

//set the input to be the mic--I could also change this to read in the value of the song playing using fft.setInput(song). This would solve the https issue I'm having accessing computer mic non locally

fft.setInput(song);

//instantiate p5 amplitude to measure volume

analyzer=newp5.Amplitude();

//set the analyzer to read in the amplitude of the song playing

analyzer.setInput(song);

/*

End AUDIO SET UP

*/

//set initial angle for the circle bars

angle=PI;

//push starting orbiters into the orbiters array which will be used to draw orbiters to canvas below in the draw functon. This is calling from the file orbiters.js

//Right now set to begin with just one. But other values are enjoyable as well and can be easily adjusted by changing the value that is currently 1 in the for loop section below: ' i<1'; e.g. 'i<20'

for(vari=0;i<1;i++){

//create the possibility for improvisation by setting a random range for the new orbiters to begin