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

(Prototype team page)
 
 
(37 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{UCAS-China}}
 
{{UCAS-China}}
 
<html>
 
<html>
 +
<head>
 +
<script>
 +
window.readcubeExtension = {
 +
  version: '1.36',
 +
  id: 'mfacblegickmnfpaebakfnlbfhpoegin'
 +
};
 +
</script>
 +
<title>Team:UCAS-China</title>
 +
<meta charset="utf-8">
 +
</head>
 +
<script>
  
 +
</script>
 +
<body>
 +
<div class="container"> 
 +
    <div style="margin-top: 100px"></div>
 +
<h1>SOFTWARE</h1>
 +
<p> In Oscar Wilde’s story, it was the singing of the Nightingale that brought a unique soul to the rose. Correspondingly, in our project, we needed different sounds to bring distinctive souls to our roses. Therefore, Orpheus was born!</p>
 +
<p>Our software was named after the god of music in Greek mythology.[1] When he played his harp the world would sway to the music. Sadly, he lost his beloved wife and failed to bring her back from the underworld.  After his death, Orpheus was buried at Leibethra below Mount Olympus, where the nightingales sang over his grave. We named our software Orpheus in memory of this god of music. We hope the beautiful songs and touching roses created by our software can bring comfort and sincere wishes everyone.</p><br>
 +
<img class="img-responsive img-center" width="600px;" src="https://static.igem.org/mediawiki/2018/d/df/T--UCAS-China--111111111.jpg">
 +
<img class="img-responsive img-center" width="600px;" src="https://static.igem.org/mediawiki/2018/f/fd/T--UCAS-China--sound1.png">
 +
<h5>Figure 1. The operation of our software Orpheus.</h5>
 +
<br></center><br>
 +
<p> Orpheus is an online software which can convert any sound into corresponding color spots and paint them on an inputted image. First of all, users can choose an image file and an audio file stored in their computer. Then Orpheus will graying the inputted image and carefully decodes the inputted audio into wave shapes. After that a series of spots will be generated with corresponding hue and brightness on the image. For hue, Orpheus first decodes sound into wave shapes and analyzes its low, medium and high volume, then generates RGB values with our delicate mapping function. For brightness, Orpheus converts source photos into grayscale images which is in proportion to brightness. The random dropping process, just as the nightingale slowly colors the rose as it warbles in the story, each drop will color some area by the aforementioned method accompanied by the inputted music and finally a beautiful picture is produced.
</p>
  
−
<div class="column full_size judges-will-not-evaluate">
+
<p> You can enjoy our software below and bring your unique soul to our roses!</p>
−
<h3>★  ALERT! </h3>
+
<center>
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
<div>
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
<div>
−
</div>
+
<span style="color:white">Please firstly select a picture</span><input id="picture" type="file" accept="image/*" style="display:inline; font-size: 15px;color: white;" onchange="ugly();" value="Please load a picture."><br>
 +
<span style="color:white">Please select a piece of music</span><input id="audio" type="file"  accept="audio/*" style="display:inline;  font-size: 15px; color: white;" onchange="noise();" value="Please load a song."><br>
 +
<button style="font-size: 15px;" onclick="begin();">Let's begin!</button>
 +
<span id="wait" style="color:white; visibility: hidden;">Please wait.</span><br>
 +
</div>
 +
<canvas id="target"></canvas>
 +
</div>
 +
</center>
 +
<p> We record some fancy videos we created using Orpheus: </p><br>
 +
  <video width="100%" height="500" controls>
  
  
−
<div class="clear"></div>
+
  <source src="https://static.igem.org/mediawiki/2018/c/c6/T--UCAS-China--111111e.mp4" type="video/mp4">   </video>
 +
  <h5>Video 1. 3055 by Olafur Arnalds</h5>
 +
  <br></center><br>
 +
  <video width="100%" height="500" controls> 
 +
  <source src="https://static.igem.org/mediawiki/2018/b/b3/T--UCAS-China--111111111331.mp4" type="video/mp4">  </video>
 +
  <h5>Video 2. Faint by Linkin Park</h5>
 +
  <br></center><br>
 +
  <video width="100%" height="500" controls>
 +
  <source src="https://static.igem.org/mediawiki/2018/8/87/T--UCAS-China--111111111111.mp4" type="video/mp4">  </video>
 +
  <h5>Video 3. Opera by Vitas</h5>
 +
  <br></center><br>
  
 +
 +
<p> Except for music, you can try many other kinds of sound. The only limitation is your imagination!</p><br>. 
 +
<img class="img-responsive img-center" width="400px;" src="https://static.igem.org/mediawiki/2018/6/62/T--UCAS-China--softwarepic.jpg">
 +
<h5>Figure 2. Some beautiful outcomes of our software. The first one came from a poem. The second one came from wind. The third one came from the song of the birds. The fourth one came from rain. </h5>
 +
<br></center><br>
 +
<img class="img-responsive img-center" width="400px;" src="https://static.igem.org/mediawiki/2018/6/6f/T--UCAS-China--sound3.png">
 +
<h5>Figure 3. We combined tons of pictures from the software and creatively made a composite image of our banner. </h5>
 +
<br></center><br>
 +
<p>With Orpheus，everyone can put a unique soul into his rose. Combined with our hardware, we can finally create a rose forest, permeated with beauty and romance, for all human-beings!</p><br>
 +
<p>Interested? Why not try it now? Don’t forget to upload your final image to our online album and share it to everyone!</p><br>
  
−
<div class="column full_size">
+
<p>Using Orpheus, we everyone could ensoul the roses with our own voice, our music, and even the natural sounds. The interaction designed here also resulted from our human practices, which shew us that the acceptance of the combination of art and science among young generation was high and what we needed was to provide them a practical chance to be involved in the art and science. So we created Orpheus, wishing that everyone would enjoy the art-and-experience experience when they brought roses unique souls.(More details, please see <a href= "https://2018.igem.org/Team:UCAS-China/Human_Practices">Human Practices</a>).</p><br>
−
<h1>Software</h1>
+
−
</div>
+
−
<div class="column two_thirds_size">
+
−
<h3>Best Software Tool Special Prize</h3>
+
−
<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.
+
  
 +
<h2>References</h2>
  
−
<br><br>
+
<p>[1]https://simple.wikipedia.org/wiki/Orpheus
−
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>.
+
</div>
−
<br><br>
+
<img id="img" style="width: 500px; visibility:hidden; position:absolute;">
−
You must also delete the message box on the top of this page to be eligible for this prize.
+
<canvas id="sketch" style="visibility:hidden; position:absolute;"></canvas>
−
</p>
+
<canvas id="color" style="visibility:hidden; position:absolute;"></canvas>
 +
</body>
  
 +
<script type="text/javascript">
 +
var
 +
targetC = document.getElementById("target"),
 +
greyC = document.getElementById("sketch"),
 +
colorC = document.getElementById("color"),
  
−
</div>
+
targetX, colorX;
  
−
<div class="column third_size">
+
var
−
<div class="highlight decoration_A_full">
+
audio_state = false,
−
<h3> Inspiration </h3>
+
image_state = false,
−
<p>
+
have_run    = false,
−
Here are a few examples from previous teams:
+
particles = [];
−
</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>
+
  
 +
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(){
 +
if(have_run)
 +
return ;
 +
 +
var
 +
reader = new FileReader();
 +
 +
reader.onload = function() {
 +
var
 +
s = document.getElementById("img");
 +
s.src = this.result;
 +
s.onload = function(){
 +
image_state = true;
 +
 +
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(){
 +
if(have_run)
 +
return ;
 +
 +
var
 +
reader = new FileReader();
 +
 +
reader.onload = function() {
 +
audio_state = true;
 +
    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(){
 +
have_run = true;
 +
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(){
 +
var
 +
wait = document.getElementById("wait");
 +
if( !audio_state || !image_state )
 +
wait.innerHTML = "Please load resources.";
 +
else{
 +
wait.innerHTML = "Please wait.";
 +
        analyze();
 +
        source.start(0);
 +
      }
 +
wait.style.visibility = "visible";
 +
}
 +
</script>
 
</html>
 
</html>
 +
</div>
 +
</body>
 +
</html>
 +
 +
{{UCAS-China/footer}}

Latest revision as of 02:04, 18 October 2018

Team:UCAS-China

SOFTWARE

In Oscar Wilde’s story, it was the singing of the Nightingale that brought a unique soul to the rose. Correspondingly, in our project, we needed different sounds to bring distinctive souls to our roses. Therefore, Orpheus was born!

Our software was named after the god of music in Greek mythology.[1] When he played his harp the world would sway to the music. Sadly, he lost his beloved wife and failed to bring her back from the underworld.  After his death, Orpheus was buried at Leibethra below Mount Olympus, where the nightingales sang over his grave. We named our software Orpheus in memory of this god of music. We hope the beautiful songs and touching roses created by our software can bring comfort and sincere wishes everyone.


Figure 1. The operation of our software Orpheus.


Orpheus is an online software which can convert any sound into corresponding color spots and paint them on an inputted image. First of all, users can choose an image file and an audio file stored in their computer. Then Orpheus will graying the inputted image and carefully decodes the inputted audio into wave shapes. After that a series of spots will be generated with corresponding hue and brightness on the image. For hue, Orpheus first decodes sound into wave shapes and analyzes its low, medium and high volume, then generates RGB values with our delicate mapping function. For brightness, Orpheus converts source photos into grayscale images which is in proportion to brightness. The random dropping process, just as the nightingale slowly colors the rose as it warbles in the story, each drop will color some area by the aforementioned method accompanied by the inputted music and finally a beautiful picture is produced.


You can enjoy our software below and bring your unique soul to our roses!

Please firstly select a picture
Please select a piece of music

We record some fancy videos we created using Orpheus:


Video 1. 3055 by Olafur Arnalds


Video 2. Faint by Linkin Park


Video 3. Opera by Vitas


Except for music, you can try many other kinds of sound. The only limitation is your imagination!


.
Figure 2. Some beautiful outcomes of our software. The first one came from a poem. The second one came from wind. The third one came from the song of the birds. The fourth one came from rain.


Figure 3. We combined tons of pictures from the software and creatively made a composite image of our banner.


With Orpheus，everyone can put a unique soul into his rose. Combined with our hardware, we can finally create a rose forest, permeated with beauty and romance, for all human-beings!


Interested? Why not try it now? Don’t forget to upload your final image to our online album and share it to everyone!


Using Orpheus, we everyone could ensoul the roses with our own voice, our music, and even the natural sounds. The interaction designed here also resulted from our human practices, which shew us that the acceptance of the combination of art and science among young generation was high and what we needed was to provide them a practical chance to be involved in the art and science. So we created Orpheus, wishing that everyone would enjoy the art-and-experience experience when they brought roses unique souls.(More details, please see Human Practices).


References

[1]https://simple.wikipedia.org/wiki/Orpheus

</div> </body> </html>