RafaelRAzevedo/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

## sketch.js
var a1, a2, x1, x2, y1, y2, number, offset, espessura;
var corLinhas = [];
var mask;

//----------------------------------------------------------------------------------------------------------------------------

function setup() {

  // CHAMAR A FUNÇÃO DE DETECTAR O MENOR LADO DA JANELA
    var tamanhoCanvas = detectarJanela();

  // CRIAR CANVAS
    createCanvas(tamanhoCanvas.l, tamanhoCanvas.a);

  // ELLIPSE - TESTE
    //noFill();
    //ellipse(0,0,width,height);

	//CORES DAS LINHAS
    corLinhas[0] = color(255, 0, 0, 200); 		// Vermelho
    corLinhas[1] = color(0, 130, 200, 200); 	// Azul
    corLinhas[2] = color(245, 130, 48, 200); 	// Laranja
    corLinhas[3] = color(255, 225, 25, 200); 	// Amarelo
    corLinhas[4] = color(145, 30, 180, 200); 	// Roxo
    corLinhas[5] = color(170, 110, 40, 200); 	// Castanho
    corLinhas[6] = color(128, 0, 0, 200); 		// Bordeux
    corLinhas[7] = color(60, 180, 75, 200); 	// Verde
    corLinhas[8] = color(255, 200); 			// Branco
    corLinhas[9] = color(210, 245, 60, 200); 	// Lima

  // LOAD DO QUACK
    song = loadSound('quack.mp3');

  // MARGEM DE "ERRO" EM RELAÇÃO AOS 10 PONTOS DA CIRCUNFERÊNCIA
    offset = TWO_PI/25;

  // ESPESSURA DAS LINHAS;
  	espessura = 8;
  // MASK
  mask = createGraphics(200,200);
  mask.ellipse(0,0,width,height);
}

//----------------------------------------------------------------------------------------------------------------------------

function draw() {
  // CHAMAR A FUNÇÃO DE DETECTAR O MENOR LADO DA JANELA
    var tamanhoCanvas = detectarJanela();

  mask = createGraphics(width,height);
  mask.ellipse(0,0,width,height);


  push();
	bola();
  pop();

  image(mask,0,0);
}

//----------------------------------------------------------------------------------------------------------------------------

function bola() {
  // CHAMAR A FUNÇÃO DE DETECTAR O MENOR LADO DA JANELA
    var tamanhoCanvas = detectarJanela();

  // MUDAR O PONTO DE CRIAÇÃO DA ELLIPSE DE 0,0 PARA A PROSIÇÃO DENTRO DO TRANSLATE
    translate(width / 2, height / 2);

  // 10 PONTOS ALEATÓRIOS (MAPEADOS NUMA CIRCUNFERÊNCIA) DE 0 ATÉ 9
  	// PRIMEIRO PONTO DA LINHA
    number = int(random(0, 10));
    ponto1 = map(number, 0, 10, 0, TWO_PI) + random(-offset, offset);

  	// SEGUNDO PONTO DA LINHA
    number = int(random(0, 10));
    ponto2 = map(number, 0, 10, 0, TWO_PI) + random(-offset, offset);

  // PONTOS DA LINHA
  	// MULTIPLICAR PELO COS (x) E PELO SENO (y) PARA OBTER UM PONTO NA CIRCUNFERÊNCIA
    x1 = width / 2 * cos(ponto1);
    y1 = height / 2 * sin(ponto1);
    x2 = width / 2 * cos(ponto2);
    y2 = height / 2 * sin(ponto2);

  //ESPESSURA DA LINE
    strokeWeight(espessura);

  // COR DA LINHA CORRESPONDE AO ÚLTIMO NÚMERO (RANDOM) OU SEJA À ÙLTIMA POSIÇÃO (x2,y2)
    stroke(corLinhas[number]);

  //LINHA
    line(x1, y1, x2, y2);
}

//----------------------------------------------------------------------------------------------------------------------------

// SOM AO CLICKAR NO RATO
function mousePressed() {
    song.play();
}


/*
function detectarJanela() {
  if(windowWidth >= windowHeight)  {
    createCanvas(windowHeight, windowHeight);
    return windowHeight;
  }
  else {
    createCanvas(windowWidth,windowWidth);
    return windowWidth;
  }
}
*/

//----------------------------------------------------------------------------------------------------------------------------

function detectarJanela() {
    var tamanhoCanvas;

    if (windowWidth >= windowHeight) tamanhoCanvas = {
        l: windowHeight,
        a: windowHeight
    }
    else tamanhoCanvas = {
        l: windowWidth,
        a: windowWidth
    }

    return tamanhoCanvas;
}

//----------------------------------------------------------------------------------------------------------------------------

function windowResized() {
    var tamanhoCanvas = detectarJanela();
    resizeCanvas(tamanhoCanvas.l, tamanhoCanvas.a);
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
	<link rel="stylesheet" type="text/css" href="style.css">
	<meta charset="utf-8" />

	</head>
	<body>
	<script src="sketch.js"></script>
	</body>
	</html>
	var a1, a2, x1, x2, y1, y2, number, offset, espessura;
	var corLinhas = [];
	var mask;

	//----------------------------------------------------------------------------------------------------------------------------

	function setup() {

	// CHAMAR A FUNÇÃO DE DETECTAR O MENOR LADO DA JANELA
	var tamanhoCanvas = detectarJanela();

	// CRIAR CANVAS
	createCanvas(tamanhoCanvas.l, tamanhoCanvas.a);

	// ELLIPSE - TESTE
	//noFill();
	//ellipse(0,0,width,height);

	//CORES DAS LINHAS
	corLinhas[0] = color(255, 0, 0, 200); // Vermelho
	corLinhas[1] = color(0, 130, 200, 200); // Azul
	corLinhas[2] = color(245, 130, 48, 200); // Laranja
	corLinhas[3] = color(255, 225, 25, 200); // Amarelo
	corLinhas[4] = color(145, 30, 180, 200); // Roxo
	corLinhas[5] = color(170, 110, 40, 200); // Castanho
	corLinhas[6] = color(128, 0, 0, 200); // Bordeux
	corLinhas[7] = color(60, 180, 75, 200); // Verde
	corLinhas[8] = color(255, 200); // Branco
	corLinhas[9] = color(210, 245, 60, 200); // Lima

	// LOAD DO QUACK
	song = loadSound('quack.mp3');

	// MARGEM DE "ERRO" EM RELAÇÃO AOS 10 PONTOS DA CIRCUNFERÊNCIA
	offset = TWO_PI/25;

	// ESPESSURA DAS LINHAS;
	espessura = 8;
	// MASK
	mask = createGraphics(200,200);
	mask.ellipse(0,0,width,height);
	}

	//----------------------------------------------------------------------------------------------------------------------------

	function draw() {
	// CHAMAR A FUNÇÃO DE DETECTAR O MENOR LADO DA JANELA
	var tamanhoCanvas = detectarJanela();

	mask = createGraphics(width,height);
	mask.ellipse(0,0,width,height);


	push();
	bola();
	pop();

	image(mask,0,0);
	}

	//----------------------------------------------------------------------------------------------------------------------------

	function bola() {
	// CHAMAR A FUNÇÃO DE DETECTAR O MENOR LADO DA JANELA
	var tamanhoCanvas = detectarJanela();

	// MUDAR O PONTO DE CRIAÇÃO DA ELLIPSE DE 0,0 PARA A PROSIÇÃO DENTRO DO TRANSLATE
	translate(width / 2, height / 2);

	// 10 PONTOS ALEATÓRIOS (MAPEADOS NUMA CIRCUNFERÊNCIA) DE 0 ATÉ 9
	// PRIMEIRO PONTO DA LINHA
	number = int(random(0, 10));
	ponto1 = map(number, 0, 10, 0, TWO_PI) + random(-offset, offset);

	// SEGUNDO PONTO DA LINHA
	number = int(random(0, 10));
	ponto2 = map(number, 0, 10, 0, TWO_PI) + random(-offset, offset);

	// PONTOS DA LINHA
	// MULTIPLICAR PELO COS (x) E PELO SENO (y) PARA OBTER UM PONTO NA CIRCUNFERÊNCIA
	x1 = width / 2 * cos(ponto1);
	y1 = height / 2 * sin(ponto1);
	x2 = width / 2 * cos(ponto2);
	y2 = height / 2 * sin(ponto2);

	//ESPESSURA DA LINE
	strokeWeight(espessura);

	// COR DA LINHA CORRESPONDE AO ÚLTIMO NÚMERO (RANDOM) OU SEJA À ÙLTIMA POSIÇÃO (x2,y2)
	stroke(corLinhas[number]);

	//LINHA
	line(x1, y1, x2, y2);
	}

	//----------------------------------------------------------------------------------------------------------------------------

	// SOM AO CLICKAR NO RATO
	function mousePressed() {
	song.play();
	}


	/*
	function detectarJanela() {
	if(windowWidth >= windowHeight) {
	createCanvas(windowHeight, windowHeight);
	return windowHeight;
	}
	else {
	createCanvas(windowWidth,windowWidth);
	return windowWidth;
	}
	}
	*/

	//----------------------------------------------------------------------------------------------------------------------------

	function detectarJanela() {
	var tamanhoCanvas;

	if (windowWidth >= windowHeight) tamanhoCanvas = {
	l: windowHeight,
	a: windowHeight
	}
	else tamanhoCanvas = {
	l: windowWidth,
	a: windowWidth
	}

	return tamanhoCanvas;
	}

	//----------------------------------------------------------------------------------------------------------------------------

	function windowResized() {
	var tamanhoCanvas = detectarJanela();
	resizeCanvas(tamanhoCanvas.l, tamanhoCanvas.a);
	}