js6450.github.io/osc.html at master · js6450/js6450.github.io · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--https://cdnjs.com/libraries/p5.js-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.min.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
	html, body{
		margin: 0;

	}
</style>
<body>

</body>
<script type="text/javascript">
var circles = [];

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  colorMode(HSB, 360, 100, 100, 100);
  noStroke();
}

function draw() {
  background(0, 15);

  for (var i = 0; i < circles.length; i++) {
    circles[i].display();
  }
}

function mousePressed() {
  circles.push(new Circle(mouseX, mouseY));
}

function Circle(x, y) {
  this.xpos = x;
  this.ypos = y;
  this.distance = random(50, 75);
  this.rad = random(15, 30);
  this.col = random(360);
  this.colSpeed = random(0.01, 0.05);
  this.osc = new p5.Oscillator();
  this.freq = map(this.col, 0, 360, 240, 700);
  this.osc.start();
  this.osc.freq(this.freq);
  this.osc.amp(0);

  this.display = function() {
    for (var i = 0; i < 6; i++) {
      push();
      translate(this.xpos, this.ypos);
      rotate(frameCount * this.colSpeed + PI * i / 3);
      fill(this.col + 5 * i, sin(frameCount * this.colSpeed) * 30 + 70, 100, 75);
      var x = this.distance + sin(frameCount * this.colSpeed) * this.distance;
      if(x >= this.distance * 1.95){
        this.osc.amp(0.2, 0.05);
      }else{
        this.osc.amp(0, 0.1);
      }
      ellipse(x, 0, this.rad + 3 * i, this.rad + 3 * i);
      pop();
    }
  }
}
</script>
</html>