API tools faq
paste
Advertisement
Guest User

mami entrega2

a guest
Nov 24th, 2017
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
  6.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.dom.min.js"></script>
  7.     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
  8.     <style type="text/css">
  9.         body{
  10.             background-color:black;
  11.         }
  12.         canvas{
  13.             position:absolute;
  14.             margin-left:40%;
  15.  
  16.         }
  17.         .inputDestaque{
  18.             position:absolute;
  19.             margin-left:5%;
  20.             margin-top:10%;
  21.             width:17%;
  22.             background:white;
  23.         }
  24.         .inputFundo{
  25.             position:absolute;
  26.             margin-left:5%;
  27.             margin-top:20%;
  28.             width:17%;
  29.             background:white;
  30.         }
  31.         .sliderSaturacao{
  32.             -webkit-appearance:none;
  33.             position:absolute;
  34.             border:1px solid gray;
  35.             margin-left:5%;
  36.             margin-top:30%;
  37.             height:4%;
  38.             width:15%;
  39.         }
  40.         .sliderSaturacao::-webkit-slider-thumb{
  41.             -webkit-appearance:none;
  42.             border:1px solid black;
  43.             height:40px;
  44.             width:10%;
  45.             background-color:black;
  46.  
  47.         }
  48.         .tituloDestaque{
  49.             position:absolute;
  50.             font-family:'Roboto';
  51.             font-size:1.5em;
  52.             margin-left:5%;
  53.             margin-top:8%;
  54.             color:white;
  55.         }
  56.         .tituloFundo{
  57.             position:absolute;
  58.             font-family:'Roboto';
  59.             font-size:1.5em;
  60.             margin-left:5%;
  61.             margin-top:18%;
  62.             color:white;
  63.         }
  64.         .tituloSatFundo{
  65.             position:absolute;
  66.             font-family:'Roboto';
  67.             font-size:1.5em;
  68.             margin-left:5%;
  69.             margin-top:28%;
  70.             color:white;
  71.         }
  72.         .tituloOrientacao{
  73.             position:absolute;
  74.             margin-left:51%;
  75.             margin-top:45%;
  76.             color:white;
  77.             font-size:1.2em;
  78.             font-family:'Roboto';
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83.     <script type="text/javascript">
  84.         //variáveis NÃO modificaveis
  85.         var xFinal;
  86.         var xDireita;
  87.         var yFinal;
  88.         var xInicial;
  89.         var yInicial;
  90.         var ponto=0;
  91.         var linhaVerticalD;
  92.         var linhaVerticalE;
  93.         var linhaHorizontal;
  94.         var razaoEspessura;
  95.         var corFundo = [200,50,72];
  96.         var tituloCorDestaque;
  97.         var tituloCorFundo;
  98.         var tituloSatFundo
  99.         var tituloOrientacao;
  100.         var inputCorFundo;
  101.         var inputCorDestaque;
  102.         var sliderSaturacaoFundo;
  103.         //variáveis modificáveis
  104.         var corDestaque = 0; // varia de 0 a 360
  105.         var orientacao = 1; // pode ser 1 para orientação a direita ou 0 para orientação a esquerda
  106.         var matizFundo = 300; // varia de 0 a 360
  107.         var saturacaoFundo = 30; // varia de 0 a 100
  108.         function setup(){
  109.             desenhaInterface();
  110.             createCanvas(900,900);
  111.             xFinal = width;
  112.             yFinal = height;
  113.             xInicial = 0;
  114.             yInicial = 0;
  115.             razaoEspessura = 1.25;
  116.             linhaHorizontal = 12.5;
  117.             colorMode(HSB);
  118.            
  119.         }
  120.  
  121.         function draw(){
  122.             background(0);
  123.             htmlFundo = hue(inputCorFundo.value());
  124.             ponto=0;
  125.             xDireita = xFinal;
  126.             xEsquerda = 0;
  127.             corFundo[0] = htmlFundo;
  128.             corFundo[1] = sliderSaturacaoFundo.value();
  129.             corDestaque = hue(inputCorDestaque.value());
  130.        
  131.             if(orientacao==1){
  132.                 linhaVerticalE = 0;
  133.                 linhaVerticalD = 23;
  134.             }
  135.             else{
  136.                 linhaVerticalE=23;
  137.                 linhaVerticalD=0;
  138.             }
  139.             for(let i=0; i<18; i++){
  140.                 desenhaQuadrados(i,orientacao);
  141.             }
  142.             xDireita = xFinal;
  143.             xEsquerda = 0;
  144.             if(orientacao==1){
  145.                 linhaVerticalE = 0;
  146.                 linhaVerticalD = 23;
  147.             }
  148.             else{
  149.                 linhaVerticalE=23;
  150.                 linhaVerticalD=0;
  151.             }
  152.             for(let i=0; i<18; i++){
  153.                 desenhaFundo(i,orientacao);
  154.             }
  155.            
  156.             if(orientacao==1){
  157.                 fill(coloracao(corDestaque,17));
  158.                 rect(xDireita-linhaVerticalE-razaoEspessura,yInicial+2*linhaHorizontal*17.5,linhaVerticalE+razaoEspessura,2*linhaHorizontal);
  159.             }
  160.             else{
  161.                 fill(coloracao(corDestaque,17));
  162.                 rect(xEsquerda,yInicial+2*linhaHorizontal*17.5,linhaVerticalD+razaoEspessura*4,2*linhaHorizontal);
  163.             }
  164.         }
  165.         function desenhaQuadrados(numero,orientacao){
  166.             proporcoes(orientacao);
  167.             strokeCap(SQUARE);
  168.             strokeWeight(linhaHorizontal);
  169.             stroke(coloracao(corDestaque,numero));
  170.             //cima
  171.            
  172.             line(xEsquerda,yInicial+2*linhaHorizontal*numero,xDireita,yInicial+2*linhaHorizontal*numero);
  173.            
  174.             //baixo
  175.             //stroke(corDestaque[0],corDestaque[1],corDestaque[2]);
  176.             line(xEsquerda,yFinal-2*linhaHorizontal*numero,xDireita,yFinal-2*linhaHorizontal*numero);
  177.             //esquerda
  178.             strokeWeight(linhaVerticalE);
  179.             //stroke(corDestaque[0],corDestaque[1],corDestaque[2]);
  180.             line(xEsquerda+linhaVerticalE/2,yInicial+2*linhaHorizontal*numero,xEsquerda+linhaVerticalE/2,yFinal-2*linhaHorizontal*numero);
  181.             //direita
  182.             strokeWeight(linhaVerticalD);
  183.             //stroke(corDestaque[0],corDestaque[1],corDestaque[2]);
  184.             line(xDireita-linhaVerticalD/2,yInicial+2*linhaHorizontal*numero,xDireita-linhaVerticalD/2,yFinal-2*linhaHorizontal*numero);
  185.            
  186.             strokeWeight(0);
  187.  
  188.         }
  189.  
  190.         function desenhaFundo(numero,orientacao){
  191.             proporcoes(orientacao);
  192.             if (numero<9){
  193.                 //corFundo[1] += 12;
  194.                 corFundo[2] -= 10;
  195.             }
  196.             else{
  197.                 //corFundo[1] -= 12;
  198.                 corFundo[2]+=10;
  199.             }
  200.             stroke(corFundo[0],corFundo[1],corFundo[2]);
  201.             //cima 
  202.             strokeWeight(linhaHorizontal);
  203.             line(xEsquerda+linhaVerticalE-razaoEspessura,yInicial+(2*linhaHorizontal*numero)+linhaHorizontal,xDireita-linhaVerticalD,yInicial+(2*linhaHorizontal*numero)+linhaHorizontal);
  204.             //baixo
  205.             strokeWeight(linhaHorizontal);
  206.             line(xEsquerda+linhaVerticalE-razaoEspessura,yFinal-(2*linhaHorizontal*numero)-linhaHorizontal,xDireita-linhaVerticalD,yFinal-(2*linhaHorizontal*numero)-linhaHorizontal);
  207.             //esquerda
  208.             if(orientacao==1){
  209.                 strokeWeight(linhaVerticalE+2*razaoEspessura);
  210.             }
  211.             else{
  212.                 strokeWeight(linhaVerticalE+razaoEspessura);
  213.             }
  214.             line(xEsquerda+(linhaVerticalE/2)+linhaVerticalE+razaoEspessura,yInicial+(2*linhaHorizontal*numero)+linhaHorizontal,xEsquerda+(linhaVerticalE/2)+linhaVerticalE+razaoEspessura,yFinal-(2*linhaHorizontal*numero)-linhaHorizontal);
  215.             //direita
  216.             if(orientacao==1){
  217.                 strokeWeight(linhaVerticalD);
  218.             }
  219.             else{
  220.                 strokeWeight(linhaVerticalD+2*razaoEspessura);
  221.             }
  222.             line(xDireita-(linhaVerticalD/2)-linhaVerticalD+razaoEspessura,yInicial+(2*linhaHorizontal*numero)+linhaHorizontal,xDireita-(linhaVerticalD/2)-linhaVerticalD+razaoEspessura,yFinal-(2*linhaHorizontal*numero)-linhaHorizontal);
  223.             strokeWeight(0);
  224.         }
  225.         function coloracao(h,numero){
  226.             let brilhoDestaque = [2,3,6,11,17,26,38,52,67];
  227.             let saturacaoDestaque = [51,67,75,75,82,87,90,88,91];
  228.             if (numero<9){
  229.                 let brilho = brilhoDestaque[ponto];
  230.                 let saturacao = saturacaoDestaque[ponto];
  231.                 ponto++;
  232.                 return color(h,saturacao,brilho);
  233.             }
  234.             else{
  235.                 let brilho = brilhoDestaque[ponto];
  236.                 let saturacao = saturacaoDestaque[ponto];
  237.                 ponto--;
  238.                 return color(h,saturacao,brilho);
  239.             }
  240.         }
  241.         function proporcoes(orientacao){
  242.             if (orientacao==1){
  243.             linhaVerticalD = linhaVerticalD - razaoEspessura;
  244.             linhaVerticalE += razaoEspessura;
  245.             xEsquerda += linhaVerticalE+linhaVerticalE-razaoEspessura;
  246.             xDireita -= linhaVerticalD+linhaVerticalD+razaoEspessura;
  247.             }
  248.             else{
  249.                 linhaVerticalD+=razaoEspessura;
  250.                 linhaVerticalE-=razaoEspessura;
  251.                 xEsquerda+=linhaVerticalE+linhaVerticalE+razaoEspessura;
  252.                 xDireita-=linhaVerticalD+linhaVerticalD-razaoEspessura;
  253.             }
  254.         }
  255.         function desenhaInterface(){
  256.             tituloCorDestaque = createSpan("Matiz dos Quadrados Destacados");
  257.             tituloCorDestaque.addClass("tituloDestaque");  
  258.             inputCorDestaque = createInput(200,'color');
  259.             inputCorDestaque.addClass('inputDestaque');
  260.             tituloOrientacao = createSpan("Clique no quadro para mudar a orientação");
  261.             tituloOrientacao.addClass("tituloOrientacao");
  262.             inputCorFundo = createInput(100,'color');
  263.             inputCorFundo.addClass('inputFundo');
  264.             tituloCorFundo = createSpan('Matiz do Fundo');
  265.             tituloCorFundo.addClass('tituloFundo');
  266.             sliderSaturacaoFundo = createSlider(0,100,0);
  267.             sliderSaturacaoFundo.addClass('sliderSaturacao');
  268.             tituloSatFundo = createSpan('Saturação do Fundo');
  269.             tituloSatFundo.addClass('tituloSatFundo');
  270.         }
  271.         function mousePressed(){
  272.             if((mouseX>0 && mouseX<900)&&(mouseY>0 && mouseY<900))
  273.             mudaOrientacao();
  274.         }
  275.         function mudaOrientacao(){
  276.             if(orientacao==1){
  277.                 orientacao=0;
  278.             }
  279.             else{
  280.                 orientacao=1;
  281.             }
  282.         }
  283.     </script>
  284. </body>
  285. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!