Difference between revisions of "Team:UCAS-China/Software"

m
m
Line 11: Line 11:
 
<meta charset="utf-8">
 
<meta charset="utf-8">
 
</head>
 
</head>
−
 
 
<body>
 
<body>
−
<span>Please firstly select a picture</span>
+
<center>
−
<a><input id="picture" type="file" accept="image/*" style="font-size: 15px;" onchange="ugly();"></a><br>
+
<div>
−
<span>Please select a piece of music</span>
+
<div>
−
<a><input id="audio" type="file"  accept="audio/*" style="font-size: 15px;" onchange="noise();"></a><br>
+
<span>Please firstly select a picture</span>
−
<button style="font-size: 15px;" onclick="begin();">Let's begin!</button>
+
<a><input id="picture" type="file" accept="image/*" style="font-size: 15px;" onchange="ugly();"></a><br>
−
<span id="wait" style="visibility: hidden;">Please wait.</span><br>
+
<span>Please select a piece of music</span>
−
<canvas id="target"></canvas><br>
+
<a><input id="audio" type="file"  accept="audio/*" style="font-size: 15px;" onchange="noise();"></a><br>
 +
<button style="font-size: 15px;" onclick="begin();">Let's begin!</button>
 +
<span id="wait" style="visibility: hidden;">Please wait.</span><br>
 +
</div>
 +
<canvas id="target"></canvas>
 +
</div>
 +
</center>
 
<img id="img" style="width: 500px; visibility:hidden; position:absolute;">
 
<img id="img" style="width: 500px; visibility:hidden; position:absolute;">
 
<canvas id="sketch" style="visibility:hidden; position:absolute;"></canvas>
 
<canvas id="sketch" style="visibility:hidden; position:absolute;"></canvas>
Line 34: Line 39:
  
 
var
 
var
 +
audio_state = false,
 +
image_state = false,
 +
have_run    = false,
 
particles = [];
 
particles = [];
  
Line 57: Line 65:
  
 
function ugly(){
 
function ugly(){
 +
if(have_run)
 +
return ;
 +
 
var
 
var
 
reader = new FileReader();
 
reader = new FileReader();
Line 65: Line 76:
 
s.src = this.result;
 
s.src = this.result;
 
s.onload = function(){
 
s.onload = function(){
 +
image_state = true;
 +
 
greyC.width = s.width;
 
greyC.width = s.width;
 
greyC.height = s.height;
 
greyC.height = s.height;
Line 102: Line 115:
  
 
function noise(){
 
function noise(){
 +
if(have_run)
 +
return ;
 +
 
var
 
var
 
reader = new FileReader();
 
reader = new FileReader();
  
 
reader.onload = function() {
 
reader.onload = function() {
 +
audio_state = true;
 
    ac.decodeAudioData( this.result , function(data){
 
    ac.decodeAudioData( this.result , function(data){
 
    source.buffer = data;
 
    source.buffer = data;
Line 119: Line 136:
 
animateId;
 
animateId;
 
var analyze = function(){
 
var analyze = function(){
 +
have_run = true;
 
var
 
var
 
freq = new Uint8Array(4);
 
freq = new Uint8Array(4);
Line 151: Line 169:
  
 
function begin(){
 
function begin(){
−
document.getElementById("wait").style.visibility = "visible";
+
var
 +
wait = document.getElementById("wait");
 +
if( audio_state && image_state )
 +
wait.innerHTML = "Please wait.";
 +
else
 +
wait.innerHTML = "Please load resources.";
 +
 
 +
wait.style.visibility = "visible";
 
analyze();
 
analyze();
 
source.start(0);
 
source.start(0);
 
}
 
}
−
 
 
</script>
 
</script>
−
</body></html>
+
</html>

Revision as of 03:00, 17 October 2018

Team:UCAS-China
Please firstly select a picture
Please select a piece of music