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

 
(31 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{UCAS-China}}
 
{{UCAS-China}}
−
<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 = {
+
<html>
 +
<head>
 +
<script>
 +
window.readcubeExtension = {
 
   version: '1.36',
 
   version: '1.36',
 
   id: 'mfacblegickmnfpaebakfnlbfhpoegin'
 
   id: 'mfacblegickmnfpaebakfnlbfhpoegin'
−
};</script>
+
};
−
<title>夜莺与玫瑰-音转图测试</title>
+
</script>
 +
<title>Team:UCAS-China</title>
 
<meta charset="utf-8">
 
<meta charset="utf-8">
 
</head>
 
</head>
 +
<script>
 +
 +
</script>
 
<body>
 
<body>
−
<span>请选择图片：</span>
+
<div class="container"> 
−
<input id="picture" type="file" accept="image/*" style="font-size: 15px;" onchange="ugly();"><br>
+
    <div style="margin-top: 100px"></div>
−
<span>请选择音乐：</span>
+
<h1>SOFTWARE</h1>
−
<input id="audio" type="file" accept="audio/*" style="font-size: 15px;" onchange="noise();"><br>
+
<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>
−
<button style="font-size: 15px;" onclick="begin();">开始</button>
+
<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>
−
<span id="wait" style="visibility: hidden;">请等待</span><br>
+
<img class="img-responsive img-center" width="600px;" src="https://static.igem.org/mediawiki/2018/d/df/T--UCAS-China--111111111.jpg">
−
<canvas id="target"></canvas><br>
+
<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>
 +
 
 +
<p> You can enjoy our software below and bring your unique soul to our roses!</p>
 +
<center>
 +
<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>
 +
 
 +
 
 +
  <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>
 +
 
 +
<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>
 +
 
 +
<h2>References</h2>
 +
 
 +
<p>[1]https://simple.wikipedia.org/wiki/Orpheus
 +
</div>
 
<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>
 
<canvas id="color" style="visibility:hidden; position:absolute;"></canvas>
 
<canvas id="color" style="visibility:hidden; position:absolute;"></canvas>
 +
</body>
  
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 28: Line 85:
  
 
var
 
var
 +
audio_state = false,
 +
image_state = false,
 +
have_run    = false,
 
particles = [];
 
particles = [];
  
Line 51: Line 111:
  
 
function ugly(){
 
function ugly(){
 +
if(have_run)
 +
return ;
 +
 
var
 
var
 
reader = new FileReader();
 
reader = new FileReader();
Line 59: Line 122:
 
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 96: Line 161:
  
 
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 113: Line 182:
 
animateId;
 
animateId;
 
var analyze = function(){
 
var analyze = function(){
 +
have_run = true;
 
var
 
var
 
freq = new Uint8Array(4);
 
freq = new Uint8Array(4);
Line 145: Line 215:
  
 
function begin(){
 
function begin(){
−
document.getElementById("wait").style.visibility = "visible";
+
var
−
analyze();
+
wait = document.getElementById("wait");
−
source.start(0);
+
if( !audio_state || !image_state )
 +
wait.innerHTML = "Please load resources.";
 +
else{
 +
wait.innerHTML = "Please wait.";
 +
        analyze();
 +
        source.start(0);
 +
      }
 +
wait.style.visibility = "visible";
 
}
 
}
−
 
 
</script>
 
</script>
 +
</html>
 +
</div>
 
</body>
 
</body>
 +
</html>
  
−
 
+
{{UCAS-China/footer}}
−
 
+
−
</html>
+

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>