js6450.github.io/waves.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
<!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;
		overflow: hidden;
	}
</style>
<body>

</body>
<script type="text/javascript">

	function setup() {
	  createCanvas(window.innerWidth, window.innerHeight);
	  noStroke();
	}

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

	  for(var x = 0; x < width; x += 4){
	  	//freq = speed of movement
	    var freq = sin(frameCount * 0.01) * 0.01;
	    //amp height
	    var amp = sin(frameCount * 0.01) * mouseY / 3;
	    var sinVal = sin((x + frameCount) * freq) * amp;
	    var y = height / 2 + sinVal;
	    var dia = random(3, 10);
	    noStroke();
	    fill(255, random(0, 70))
	    ellipse(x, y, dia, dia);
	    noFill();
	    stroke(255, random(0, 70));
	    line(x, y, x, height);
	  }

	  for(var x = 0; x < width; x += 4){
	  	//speed of change
	  	//number of waves
	    var freq = sin(frameCount * 0.005) * 0.005;
	    //height of wave
	    var amp = sin(frameCount * 0.01) * mouseY / 2;
	    var sinVal = sin((PI + x + frameCount) * freq) * amp;
	   	//var sinVal = sin(x + frameCount * freq) * amp;

	    var y = height / 2 + sinVal;
	    var dia = random(3, 10);
	    noStroke();
	    fill(255, 0, 0, random(0, 70));
	    ellipse(x, y, dia, dia);
	    noFill();
	    stroke(0, 0, 180, random(0, 70));
	    line(x, y, x, 0);
	  }
	}

</script>
</html>