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

Line 2: Line 2:
 
<html>
 
<html>
  
 +
<head>
 +
<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style><script>window.readcubeExtension = {
 +
  version: '1.36',
 +
  id: 'mfacblegickmnfpaebakfnlbfhpoegin'
 +
};</script>
 +
<title>夜莺与玫瑰-音转图测试</title>
 +
<meta charset="utf-8">
 +
</head>
 +
<body>
 +
<span>请选择图片：</span>
 +
<input id="picture" type="file" accept="image/*" style="font-size: 15px;" onchange="ugly();"><br>
 +
<span>请选择音乐：</span>
 +
<input id="audio" type="file" accept="audio/*" style="font-size: 15px;" onchange="noise();"><br>
 +
<button style="font-size: 15px;" onclick="begin();">开始</button>
 +
<span id="wait" style="visibility: hidden;">请等待</span><br>
 +
<canvas id="target"></canvas><br>
 +
<img id="img" style="width: 500px; visibility:hidden; position:absolute;">
 +
<canvas id="sketch" style="visibility:hidden; position:absolute;"></canvas>
 +
<canvas id="color" style="visibility:hidden; position:absolute;"></canvas>
  
 +
<script type="text/javascript">
 +
var
 +
targetC = document.getElementById("target"),
 +
greyC = document.getElementById("sketch"),
 +
colorC = document.getElementById("color"),
  
 +
targetX, colorX;
  
−
<div class="clear"></div>
+
var
 +
particles = [];
  
 +
function draw() {
 +
if( !targetX )
 +
return ;
  
−
<div class="column full_size">
+
var
−
<h1>Software</h1>
+
imgt = targetX.getImageData(0, 0,  targetC.width, targetC.height),
−
</div>
+
pixC = colorX. getImageData(0,0, targetC.width, targetC.height).data,
−
<div class="column two_thirds_size">
+
pixG = greyX. getImageData(0,0,targetC.width, targetC.height).data,
−
<h3>Best Software Tool Special Prize</h3>
+
pixT = imgt.data;
−
<p>Regardless of the topic, iGEM projects often create or adapt computational tools to move the project forward. Because they are born out of a direct practical need, these software tools (or new computational methods) can be surprisingly useful for other teams. Without necessarily being big or complex, they can make the crucial difference to a project's success. This award tries to find and honor such "nuggets" of computational work.
+
  
 +
for(var i = 0, n = pixT.length; i < n; i += 4){
 +
pixT[i]  = pixC[i]  * pixG[i]  / 255;
 +
pixT[i+1] = pixC[i+1] * pixG[i+1] / 255;
 +
pixT[i+2] = pixC[i+2] * pixG[i+2] / 255;
 +
pixT[i+3] = 255;
 +
}
  
−
<br><br>
+
targetX.putImageData(imgt, 0, 0);
−
To compete for the <a href="https://2018.igem.org/Judging/Awards">Best Software Tool prize</a>, please describe your work on this page and also fill out the description on the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>.
+
};
−
<br><br>
+
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
−
</p>
+
  
 +
function ugly(){
 +
var
 +
reader = new FileReader();
 +
 +
reader.onload = function() {
 +
var
 +
s = document.getElementById("img");
 +
s.src = this.result;
 +
s.onload = function(){
 +
greyC.width = s.width;
 +
greyC.height = s.height;
 +
 +
colorC.width = s.width;
 +
colorC.height = s.height;
 +
 +
targetC.width = s.width;
 +
targetC.height = s.height;
 +
 +
targetX = targetC.getContext("2d");
 +
colorX = colorC.getContext("2d");
 +
 +
greyX = greyC.getContext("2d");
 +
    greyX.drawImage( s, 0, 0, s.width, s.height );
 +
    var
 +
    imgd = greyX.getImageData(0, 0, s.width, s.height),
 +
    pix  = imgd.data;
 +
 +
    for(var i = 0, n = pix.length; i < n; i += 4){
 +
    var
 +
    grey = pix[i]*0.27 + pix[ i+1 ]*0.54 + pix[i+2] * 0.1 + 25;
 +
   
 +
    pix[i] = pix[i+1] = pix[i+2] = grey;
 +
    }
 +
    greyX.putImageData(imgd, 0, 0);
 +
};
 +
};
 +
 +
reader.readAsDataURL( document.getElementById("picture").files[0] );
 +
}
 +
 +
var
 +
ac = new ( window.AudioContext || window.webkitAudioContext )(),
 +
source = ac.createBufferSource(),
 +
analyzer = ac.createAnalyser();
 +
 +
function noise(){
 +
var
 +
reader = new FileReader();
 +
 +
reader.onload = function() {
 +
    ac.decodeAudioData( this.result , function(data){
 +
    source.buffer = data;
 +
    source.connect( analyzer );
 +
analyzer.connect( ac.destination );
 +
    });
 +
};
 +
 +
reader.readAsArrayBuffer( document.getElementById("audio").files[0] );
 +
};
 +
 +
var
 +
animateId;
 +
var analyze = function(){
 +
var
 +
freq = new Uint8Array(4);
 +
analyzer.getByteFrequencyData( freq );
 +
    var
 +
    loudness = Math.sqrt( freq[0]*freq[0] + freq[1]*freq[1] + freq[2]*freq[2] + freq[3]*freq[3] ),
 +
    r = Math.max( Math.min( Math.floor( (freq[0]+freq[1] - 200)*1000/(2*loudness)), 255), 0 ),
 +
    g = Math.max( Math.min( Math.floor( (freq[1]+freq[2] - 260)*1000/(2*loudness)), 255), 0 ),
 +
    b = Math.max( Math.min( Math.floor( (freq[2]+freq[3] - 260)*1000/(2*loudness)), 255), 0 ),
 +
   
 +
    p = {
 +
x: Math.random()*colorC.width,
 +
y: Math.random() * colorC.height,
 +
r: loudness * 0.06,
 +
c: 'rgb(' + r +","+ g +","+ b +")" //*255/(2*loudness)
 +
};
 +
 +
if(loudness > 0){
 +
console.log(p.c);
 +
particles.push(p);
 +
 +
    colorX.beginPath();
 +
    colorX.arc( p.x, p.y, p.r, 0, 2 * Math.PI, true);
 +
    colorX.fillStyle = p.c;
 +
    colorX.fill();
 +
    colorX.closePath();
 +
    document.getElementById("wait").style.visibility = "hidden";
 +
draw();
 +
}
 +
animateId = setTimeout(analyze, 500);
 +
};
 +
 +
function begin(){
 +
document.getElementById("wait").style.visibility = "visible";
 +
analyze();
 +
source.start(0);
 +
}
 +
 +
</script>
 +
</body>
 +
<html><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style><script>window.readcubeExtension = {
 +
  version: '1.36',
 +
  id: 'mfacblegickmnfpaebakfnlbfhpoegin'
 +
};</script>
 +
<title>夜莺与玫瑰-音转图测试</title>
 +
<meta charset="utf-8">
 +
</head>
 +
<body>
 +
<span>请选择图片：</span>
 +
<input id="picture" type="file" accept="image/*" style="font-size: 15px;" onchange="ugly();"><br>
 +
<span>请选择音乐：</span>
 +
<input id="audio" type="file" accept="audio/*" style="font-size: 15px;" onchange="noise();"><br>
 +
<button style="font-size: 15px;" onclick="begin();">开始</button>
 +
<span id="wait" style="visibility: hidden;">请等待</span><br>
 +
<canvas id="target"></canvas><br>
 +
<img id="img" style="width: 500px; visibility:hidden; position:absolute;">
 +
<canvas id="sketch" style="visibility:hidden; position:absolute;"></canvas>
 +
<canvas id="color" style="visibility:hidden; position:absolute;"></canvas>
 +
 +
<script type="text/javascript">
 +
var
 +
targetC = document.getElementById("target"),
 +
greyC = document.getElementById("sketch"),
 +
colorC = document.getElementById("color"),
 +
 +
targetX, colorX;
 +
 +
var
 +
particles = [];
 +
 +
function draw() {
 +
if( !targetX )
 +
return ;
 +
 +
var
 +
imgt = targetX.getImageData(0, 0,  targetC.width, targetC.height),
 +
pixC = colorX. getImageData(0,0, targetC.width, targetC.height).data,
 +
pixG = greyX.  getImageData(0,0,targetC.width, targetC.height).data,
 +
pixT = imgt.data;
 +
 +
for(var i = 0, n = pixT.length; i < n; i += 4){
 +
pixT[i]  = pixC[i]  * pixG[i]  / 255;
 +
pixT[i+1] = pixC[i+1] * pixG[i+1] / 255;
 +
pixT[i+2] = pixC[i+2] * pixG[i+2] / 255;
 +
pixT[i+3] = 255;
 +
}
 +
 +
targetX.putImageData(imgt, 0, 0);
 +
};
 +
 +
function ugly(){
 +
var
 +
reader = new FileReader();
 +
 +
reader.onload = function() {
 +
var
 +
s = document.getElementById("img");
 +
s.src = this.result;
 +
s.onload = function(){
 +
greyC.width = s.width;
 +
greyC.height = s.height;
 +
 +
colorC.width = s.width;
 +
colorC.height = s.height;
 +
 +
targetC.width = s.width;
 +
targetC.height = s.height;
 +
 +
targetX = targetC.getContext("2d");
 +
colorX = colorC.getContext("2d");
 +
 +
greyX = greyC.getContext("2d");
 +
    greyX.drawImage( s, 0, 0, s.width, s.height );
 +
    var
 +
    imgd = greyX.getImageData(0, 0, s.width, s.height),
 +
    pix  = imgd.data;
 +
 +
    for(var i = 0, n = pix.length; i < n; i += 4){
 +
    var
 +
    grey = pix[i]*0.27 + pix[ i+1 ]*0.54 + pix[i+2] * 0.1 + 25;
 +
   
 +
    pix[i] = pix[i+1] = pix[i+2] = grey;
 +
    }
 +
    greyX.putImageData(imgd, 0, 0);
 +
};
 +
};
 +
 +
reader.readAsDataURL( document.getElementById("picture").files[0] );
 +
}
 +
 +
var
 +
ac = new ( window.AudioContext || window.webkitAudioContext )(),
 +
source = ac.createBufferSource(),
 +
analyzer = ac.createAnalyser();
 +
 +
function noise(){
 +
var
 +
reader = new FileReader();
 +
 +
reader.onload = function() {
 +
    ac.decodeAudioData( this.result , function(data){
 +
    source.buffer = data;
 +
    source.connect( analyzer );
 +
analyzer.connect( ac.destination );
 +
    });
 +
};
 +
 +
reader.readAsArrayBuffer( document.getElementById("audio").files[0] );
 +
};
 +
 +
var
 +
animateId;
 +
var analyze = function(){
 +
var
 +
freq = new Uint8Array(4);
 +
analyzer.getByteFrequencyData( freq );
 +
    var
 +
    loudness = Math.sqrt( freq[0]*freq[0] + freq[1]*freq[1] + freq[2]*freq[2] + freq[3]*freq[3] ),
 +
    r = Math.max( Math.min( Math.floor( (freq[0]+freq[1] - 200)*1000/(2*loudness)), 255), 0 ),
 +
    g = Math.max( Math.min( Math.floor( (freq[1]+freq[2] - 260)*1000/(2*loudness)), 255), 0 ),
 +
    b = Math.max( Math.min( Math.floor( (freq[2]+freq[3] - 260)*1000/(2*loudness)), 255), 0 ),
 +
   
 +
    p = {
 +
x: Math.random()*colorC.width,
 +
y: Math.random() * colorC.height,
 +
r: loudness * 0.06,
 +
c: 'rgb(' + r +","+ g +","+ b +")" //*255/(2*loudness)
 +
};
 +
 +
if(loudness > 0){
 +
console.log(p.c);
 +
particles.push(p);
 +
 +
    colorX.beginPath();
 +
    colorX.arc( p.x, p.y, p.r, 0, 2 * Math.PI, true);
 +
    colorX.fillStyle = p.c;
 +
    colorX.fill();
 +
    colorX.closePath();
 +
    document.getElementById("wait").style.visibility = "hidden";
 +
draw();
 +
}
 +
animateId = setTimeout(analyze, 500);
 +
};
 +
 +
function begin(){
 +
document.getElementById("wait").style.visibility = "visible";
 +
analyze();
 +
source.start(0);
 +
}
 +
 +
</script>
 +
</body>
  
−
</div>
 
  
−
<div class="column third_size">
 
−
<div class="highlight decoration_A_full">
 
−
<h3> Inspiration </h3>
 
−
<p>
 
−
Here are a few examples from previous teams:
 
−
</p>
 
−
<ul>
 
−
<li><a href="https://2016.igem.org/Team:BostonU_HW">2016 BostonU HW</a></li>
 
−
<li><a href="https://2016.igem.org/Team:Valencia_UPV">2016 Valencia UPV</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Heidelberg/Software">2014 Heidelberg</a></li>
 
−
<li><a href="https://2014.igem.org/Team:Aachen/Project/Measurement_Device#Software">2014 Aachen</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
  
 
</html>
 
</html>

Revision as of 02:24, 17 October 2018

夜莺与玫瑰-音转图测试 请选择图片：
请选择音乐：


夜莺与玫瑰-音转图测试 请选择图片：
请选择音乐：