IDeATe

Outcome

Project Description

My idea of the topic is to make music responds to the environment and human's mood. In this project, I use Photo Resistor and Force Sensitive Resistor to get the light value around and the pressure level people give to the sensor, which means the much more pressure you give to the sensor will trigger exciting music indicating that you are in a high spirit. On the contrary when it is dim around, you just press the sensor a little bit, a piece of soft music will play indicating you want to clam down.

Material used:

● Spark Microcontroller

● Breadboard

● Jumper Wires

● Two 1kΩ Resistor

● Two single color LED (red and green)

● Two 10kΩ Resistor

● A photoresistor

● A forceresistor

The picture below show the circuit I built.

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

And below my code written in Spark Dev.

Move up Delete Move down

//Define the pin that we'll place photo cell on
int photocellpin = A0;
//Defined the pin that we'll fsr on
int fsrpin = A1;
//Define the pin that red led is on
int ledredpin = D0;
//Define the pin that green led is on
int ledgreenpin = D1;
// Create a variable to store the LED brightness.
int ledredbrightness = 0;
int ledgreenbrightness = 0;

int photocellreading = 0;
// Create a variable to hold the force reading
int fsrreading = 0;


void setup()
{
  //get to know the light value around
  Spark.variable("light", &photocellreading, INT);
  //get to know the force value
  Spark.variable("force", &fsrreading, INT);

  pinMode(photocellpin, INPUT);
  pinMode(ledredpin, OUTPUT);
  pinMode(ledgreenpin, OUTPUT);
}

void loop()
{
   //read photoresistor value
   photocellreading = analogRead(photocellpin);
   //green led brightness
   ledgreenbrightness = 255 - map (photocellreading, 0, 4095, 0, 255);
   //
   analogWrite(ledgreenpin, ledgreenbrightness);

   //read fsr value
   fsrreading = analogRead(fsrpin);
   ledredbrightness = map (fsrreading, 0, 4095, 0, 255);

   analogWrite(ledredpin, ledredbrightness);

   delay(1000);

   //if force value > 1500, then red led blinks 3 times
  if(fsrreading > 1500)
   {
     for(int i=0; i < 2; i++)
     digitalWrite(ledredpin, HIGH);
     delay(500);
     digitalWrite(ledredpin, LOW);
     delay(500);
   }
   delay(1000);

}

Show Advanced Options

Move up Delete Move down

In dim or dark environment, the green led will light with the brightness according to the Photoresistor reading.

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

When pressing the FSR, the red led will light with the brightness according to the FSR reading, until the force value reach 1500 or more, the red led will blink three times.

Move up Delete Move down

FSR control red led to light and to blink 3 times until force value reach at least 1500 from Jodie Wu on Vimeo.

Show Advanced Options

Move up Delete Move down

Blow shows the the cloud variables in Spark Dev.

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

Next, I made webpage using JQuery to make calls directly to the cloud API and my two variables available in the browser.

I use HTML5 audio to add music in the page, and I want the two variables to control the music play.

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

Here is the html code I have written so far, when the force value reach 1000 or more, the audio will play.

Move up Delete Move down

<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  
    
<body>
    <h1>
    Force Music
</h1>

<p> Here's a song: </p>
<audio id="audio1" controls autoplay>
    <source src="media/song.m4a" type="audio/x-aac" />
    <source src="media/song.mp3" type="audio/mpeg" />
    <source src="media/song.ogg" type="audio/ogg" />
    <p> Your browser does not support the HTML5 audio feature. </p>
</audio>


    
    <h3>Light Levels from Photo Resistor / Photo Cell</h3> <br><br>
	<p>Reads every 5 seconds </p>
    <br><br>
	
	<p>
	  <label for="amountL">Light Levels:</label>
	  <br/>
	  <span id="amountL" ></span>
	</p>

    <br><br>
	
	
	<hr/>
</br>
	
    <h3>Force Levels from FSR </h3> <br><br>
	<p>Reads every 1 seconds </p>
    <br><br>
	
	<p>
	  <label for="amountF">Force Levels:</label>
	  <br/>
	  <span id="amountF" ></span>
	</p>

    <br><br>
	
	
	<hr/>
</br>

	<em>Device ID: </em><input type="text" id="deviceIDInput" onKeyUp="return handleDeviceIDChange()" ></input>
	<br/>
	<em>Access Token: </em><input type="text" id="accessTokenInput" onKeyUp="return handleAccessTokenChange()" ></input>
	<br/>



    <script type="text/javascript">
      var deviceID    = "<< device id >>";
      var accessToken = "<< access token >>";
	  
      var getL = "light";
	  $( document ).ready(function() {
	      $("#deviceIDInput").val(  deviceID );
	      $("#accessTokenInput").val(  accessToken );
	  });
	  
	  
	  window.setInterval(function() {
	          requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getL + "/?access_token=" + accessToken;
	          $.getJSON(requestURL, function(json) {
	                   document.getElementById("amountL").innerHTML = json.result + " ";
	                   document.getElementById("amountL").style.fontSize = "28px";
                  
                   
				   });
	        }, 5000);
       
        
        var getF = "Force";
	  $( document ).ready(function() {
	      $("#deviceIDInput").val(  deviceID );
	      $("#accessTokenInput").val(  accessToken );
	  });
	  
	  
	  window.setInterval(function() {
	          requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getF + "/?access_token=" + accessToken;
	          $.getJSON(requestURL, function(json) {
	                   document.getElementById("amountF").innerHTML = json.result + " ";
	                   document.getElementById("amountF").style.fontSize = "28px";
                  
                  if(+json.value > 1000){
                            audio1.play();
                        }
                  
				   });
	        }, 1000);
        
	  function handleDeviceIDChange(){
		  deviceID = $("#deviceIDInput").val().trim();
		  return ;
	  }
	  function handleAccessTokenChange(){
		  accessToken = $("#accessTokenInput").val().trim();
		  return ;
	  }
     
    </script>


</body>
</html>

Show Advanced Options

Move up Delete Move down

Next I will add more music to the page and make them play at different force value. (final video will be uploaded until I figure out some problems of the html)

You can upload files of up to 20MB using this form.

Add Rich Text Add Code Block Add Embeddable Content

Outcome

Attribution

Attribution

Attribution

Attribution

Attribution

Attribution

Attribution