first commit
UDI-ME-TA
7 years ago
parent
d8f03934e8
commit
b8bc62e3d9
Binary file not shown.
@ -0,0 +1,20 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
|
||||
|
||||
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
|
||||
<!-- uncomment lines below to include extra p5 libraries -->
|
||||
<script language="javascript" src="libraries/p5.dom.js"></script>
|
||||
<script language="javascript" src="libraries/p5.sound.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="sketch.js"></script>
|
||||
<!-- this line removes any default padding and style. you might only need one of these values set. -->
|
||||
<style> body {padding: 0; margin: 0;} </style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,267 @@
|
||||
var carrier; // this is the carrierillator we will hear
|
||||
var modulator; // this carrierillator will modulate the amplitude of the carrier
|
||||
var fft; // we'll visualize the waveform
|
||||
|
||||
var opac;
|
||||
var carrier;
|
||||
|
||||
|
||||
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function setup() {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
createCanvas(innerWidth,innerHeight);
|
||||
noFill();
|
||||
|
||||
|
||||
//SETING FIRST OSCILLATOR: CARRIER
|
||||
// EXPLANATION FROM WEBSITE: The carrier is typically set at an audible frequency (i.e. 440 Hz) and connected to master output by default. The carrier.amp is set to zero because we will have the modulator control its amplitude.
|
||||
|
||||
var randomnumb = getRandomArbitrary(0, 20);
|
||||
|
||||
console.log(randomnumb);
|
||||
carrier = new p5.Oscillator(); // connects to master output by default
|
||||
carrier.freq(200 + randomnumb); // it sets the frequency of the carrier. AN AUDIBLE ONE.
|
||||
carrier.amp(1);
|
||||
// carrier's amp is 0 by default, giving our modulator total control
|
||||
|
||||
carrier.start();
|
||||
|
||||
|
||||
|
||||
|
||||
// create an fft to analyze the audio
|
||||
//an FFT (fast Fourier transform) converts a signal from its original domain (often time or space) to a representation in the frequency domain and vice versa
|
||||
|
||||
fft = new p5.FFT();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
|
||||
//depen de la alçada, la nota TOCADA se sent mes for o menys (volum = amplitud)
|
||||
if(mouseY <= height/2) {
|
||||
|
||||
var ampli = map(mouseY, 0, height, 0.01, 2.02);
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
|
||||
var ampli = map(mouseY, height, 0, 0.01, 2.02);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// change carrierillator frequency based on mouseX
|
||||
|
||||
var modFreq = 0.1;
|
||||
|
||||
|
||||
|
||||
|
||||
// si el mouseY és igual o el mateix que la meitat de l'altura, fes aixo. ((DEFINEIX LA AMPLITUD.))
|
||||
if(mouseY <= height/2) {
|
||||
|
||||
var modAmp = map(mouseY, 0, height, 0.01, 2.02);
|
||||
|
||||
}else{
|
||||
|
||||
var modAmp = map(mouseY, height, 0, 0.01, 2.02);
|
||||
|
||||
|
||||
}
|
||||
|
||||
carrier.amp(modAmp, 0.01); // fade time of 0.1 for smooth fading
|
||||
|
||||
|
||||
// analyze the waveform
|
||||
waveform = fft.waveform();
|
||||
|
||||
|
||||
|
||||
// drawText(modFreq, modAmp);
|
||||
|
||||
if (mouseIsPressed || (touches && touches.length)){
|
||||
|
||||
opac = 100;
|
||||
var mx = mouseX || (touches[0] && touches[0][0]);
|
||||
if (mx > 0 && mx < width/20 ){
|
||||
|
||||
carrier.freq(220.0);
|
||||
carrier.amp(ampli);
|
||||
|
||||
|
||||
}else if ( mx > width/20 && mx < 2*(width/20)){
|
||||
|
||||
carrier.freq(233.08);
|
||||
carrier.amp(ampli);
|
||||
|
||||
}else if (mx > 2*(width/20) && mx < 3*(width/20)){
|
||||
|
||||
carrier.freq(246.94);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 3*(width/20) && mx < 4*(width/20)){
|
||||
|
||||
carrier.freq(261.63);
|
||||
carrier.amp(ampli);
|
||||
|
||||
|
||||
|
||||
|
||||
}else if (mx > 4*(width/20) && mx < 5*(width/20)){
|
||||
|
||||
carrier.freq(277.18);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 5*(width/20) && mx < 6*(width/20)){
|
||||
|
||||
carrier.freq(293.66);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 6*(width/20) && mx < 7*(width/20)){
|
||||
|
||||
carrier.freq(311.13);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 7*(width/20) && mx < 8*(width/20)){
|
||||
|
||||
carrier.freq(329.63);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 8*(width/20) && mx < 9*(width/20)){
|
||||
|
||||
carrier.freq(349.23);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 9*(width/20) && mx < 10*(width/20)){
|
||||
|
||||
carrier.freq(369.99);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 10*(width/20) && mx < 11*(width/20)){
|
||||
|
||||
carrier.freq(392.0);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 11*(width/20) && mx < 12*(width/20)){
|
||||
|
||||
carrier.freq(415.3);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 12*(width/20) && mx < 13*(width/20)){
|
||||
|
||||
carrier.freq(440.0);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 13*(width/20) && mx < 14*(width/20)){
|
||||
|
||||
carrier.freq(466.16);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 14*(width/20) && mx < 15*(width/20)){
|
||||
|
||||
carrier.freq(493.88);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 15*(width/20) && mx < 16*(width/20)){
|
||||
|
||||
carrier.freq(523.25);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 16*(width/20) && mx < 17*(width/20)){
|
||||
|
||||
carrier.freq(554.37);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 17*(width/20) && mx < 18*(width/20)){
|
||||
|
||||
carrier.freq(587.33);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 18*(width/20) && mx < 19*(width/20)){
|
||||
|
||||
carrier.freq(622.25);
|
||||
carrier.amp(ampli);
|
||||
}else if (mx > 19*(width/20) && mx < width){
|
||||
|
||||
carrier.freq(659.26);
|
||||
carrier.amp(ampli);
|
||||
}
|
||||
|
||||
|
||||
|
||||
//draw a new line
|
||||
stroke(0,0,0);
|
||||
strokeWeight(0.5);
|
||||
|
||||
line(0, height/2,mx, mouseY);
|
||||
line(mx, mouseY, width, height/2);
|
||||
background(255, 255, 255,100);
|
||||
|
||||
|
||||
|
||||
|
||||
}else{
|
||||
|
||||
|
||||
|
||||
// IF MOUSE IS NOT PRESSED
|
||||
if(mouseY <= height/2) {
|
||||
|
||||
opac = map(mouseY, 0,height/2, 100, 0);
|
||||
|
||||
}else{
|
||||
|
||||
opac = map(mouseY, height, height/2, 100, 0);
|
||||
|
||||
|
||||
}
|
||||
|
||||
background(255,255,255,opac); // alpha
|
||||
// draw the shape of the waveform
|
||||
drawWaveform();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function drawWaveform() {
|
||||
|
||||
|
||||
if(mouseIsPressed){
|
||||
|
||||
stroke(255,255,255);
|
||||
strokeWeight(1);
|
||||
|
||||
line(0, height/2,mx, mouseY);
|
||||
line(mx, mouseY, width, height/2);
|
||||
background(0, 0, 0,100);
|
||||
|
||||
}else{
|
||||
|
||||
stroke(0,0,0,100);
|
||||
strokeWeight(0.5);
|
||||
beginShape();
|
||||
for (var i = 0; i<waveform.length; i++){
|
||||
var x = map(i, 0, (waveform.length)/8, 0, width);
|
||||
var y = map((waveform[i])/8, -1, 1, -height/2, height/2);
|
||||
vertex(x, y + height/2);
|
||||
}
|
||||
endShape();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
Binary file not shown.
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
|
||||
|
||||
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
|
||||
<script language="javascript" src="libraries/p5.dom.js"></script>
|
||||
<script language="javascript" src="libraries/p5.sound.js"></script>
|
||||
<script language="javascript" type="text/javascript" src="sketch.js"></script>
|
||||
|
||||
<title>The fine line</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="canvasp5"></div>
|
||||
|
||||
<div id="wrap">
|
||||
|
||||
<div id="fine-line">
|
||||
<h1>"The fine line between nothing matters and everything matters"</h1>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<li>
|
||||
|
||||
<ul><a href="">Existencialism and Spirituality</a></ul>
|
||||
<ul><a href="">Explanation of the project</a></ul>
|
||||
<ul><a href="">Score to find the line</a></ul>
|
||||
<ul><a href="">The fine line</a></ul>
|
||||
|
||||
|
||||
</li>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,112 @@
|
||||
var carrier; // this is the carrierillator we will hear
|
||||
var modulator; // this carrierillator will modulate the amplitude of the carrier
|
||||
var fft; // we'll visualize the waveform
|
||||
|
||||
var opac;
|
||||
var carrier;
|
||||
|
||||
|
||||
|
||||
function getRandomArbitrary(min, max) {
|
||||
return Math.random() * (max - min) + min;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function setup() {
|
||||
|
||||
|
||||
var myCanvas = createCanvas(innerWidth,200);
|
||||
myCanvas.parent("canvasp5");
|
||||
|
||||
|
||||
noFill();
|
||||
|
||||
|
||||
//SETING FIRST OSCILLATOR: CARRIER
|
||||
// EXPLANATION FROM WEBSITE: The carrier is typically set at an audible frequency (i.e. 440 Hz) and connected to master output by default. The carrier.amp is set to zero because we will have the modulator control its amplitude.
|
||||
|
||||
var randomnumb = getRandomArbitrary(0, 20);
|
||||
|
||||
console.log(randomnumb);
|
||||
carrier = new p5.Oscillator(); // connects to master output by default
|
||||
carrier.freq(200 + randomnumb); // it sets the frequency of the carrier. AN AUDIBLE ONE.
|
||||
carrier.amp(1);
|
||||
// carrier's amp is 0 by default, giving our modulator total control
|
||||
|
||||
carrier.start();
|
||||
|
||||
|
||||
|
||||
|
||||
// create an fft to analyze the audio
|
||||
//an FFT (fast Fourier transform) converts a signal from its original domain (often time or space) to a representation in the frequency domain and vice versa
|
||||
|
||||
fft = new p5.FFT();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function draw() {
|
||||
|
||||
|
||||
|
||||
|
||||
var modAmp= 1;
|
||||
|
||||
// si el mouseY és igual o el mateix que la meitat de l'altura, fes aixo. ((DEFINEIX LA AMPLITUD.))
|
||||
/* if(mouseY <= height) {
|
||||
|
||||
var modAmp = map(mouseY, 0, height, 0.01, 2.02);
|
||||
|
||||
}else{
|
||||
|
||||
var modAmp = map(mouseY, height, 0, 0.01, 2.02);
|
||||
|
||||
|
||||
}
|
||||
*/
|
||||
carrier.amp(modAmp, 0.01); // fade time of 0.1 for smooth fading
|
||||
|
||||
|
||||
// analyze the waveform
|
||||
waveform = fft.waveform();
|
||||
|
||||
|
||||
background(255,255,255,50); // alpha
|
||||
|
||||
// draw the shape of the waveform
|
||||
drawWaveform();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function drawWaveform() {
|
||||
|
||||
|
||||
stroke(0,0,0,100);
|
||||
strokeWeight(0.5);
|
||||
beginShape();
|
||||
for (var i = 0; i<waveform.length; i++){
|
||||
var x = map(i, 0, (waveform.length)/8, 0, width);
|
||||
var y = map((waveform[i])/8, -1, 1, -height/2, height/2);
|
||||
vertex(x, y + 100);
|
||||
}
|
||||
endShape();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,68 @@
|
||||
|
||||
|
||||
body{
|
||||
font-family: 'Fjalla One', sans-serif;
|
||||
|
||||
}
|
||||
|
||||
li{
|
||||
list-style: none;
|
||||
line-height: 0.7;
|
||||
margin-left:-40px;
|
||||
|
||||
}
|
||||
|
||||
h1{
|
||||
|
||||
font-size: 70px;
|
||||
|
||||
}
|
||||
|
||||
#wrap{
|
||||
position:relative;
|
||||
padding-top:100px;
|
||||
width:75%;
|
||||
margin: auto;
|
||||
text-align:center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.links{
|
||||
padding-top: 300px;
|
||||
width:200px;
|
||||
margin:auto;
|
||||
text-align: left;
|
||||
|
||||
|
||||
}
|
||||
|
||||
#defaultCanvas0{
|
||||
position:absolute;
|
||||
top:30px;
|
||||
|
||||
}
|
||||
|
||||
#canvasp5{
|
||||
position:absolute;
|
||||
z-index: 0;
|
||||
top:300px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Smartphones (portrait) ----------- */
|
||||
@media only screen and (max-width : 600px) {
|
||||
/* Styles */
|
||||
}
|
||||
|
||||
|
||||
/* iPads (portrait and landscape) ----------- */
|
||||
@media only screen and (min-device-width : 600px) and (max-device-width : 1024px) {
|
||||
/* Styles */
|
||||
}
|
||||
|
||||
/* Desktops and laptops ----------- */
|
||||
@media only screen and (min-width : 1024px) {
|
||||
/* Styles */
|
||||
}
|
||||
Loading…
Reference in New Issue