p5.js Web Editor

xxxxxxxxxx
​
​
<!DOCTYPE html>
<html lang="en" dir="ltr">
​
<html>
<head>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-4320147014939935",
    enable_page_level_ads: true
  });
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-139123367-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'UA-139123367-1');
</script>
<!-- Get Social Share buttons -->
<script type="text/javascript" async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5cdb2f6ea16ccd5e"></script> 
​
​
​
<title>Eyes Only!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<body ontouchstart="showCoordinates(event)" ontouchmove="showCoordinates(event)">
​
<style>
​
body {margin: 0;
  padding: 0;
  background: #5B1D7F;
  height: ;
  
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
}
.eyes{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}
.eye{
  width: 12em;
  height: 12em;
  background: #fff;
  display: inline-block;
  margin: 40px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
}
​
.ball{
  width: 4em;
  height: 4em;
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%; 
}
​
#active-area{
height: 750px;
}
​
​
​
@media only screen and (max-width: 600px) {
    .eye {
        width: 6em;
        height: 6em;
        }
    .ball{
        width: 2em;
        height: 2em;
        }
        
        
button {outline: none;}
​
.buttonsContainer {visibility : hidden; }
​
​
      .scrollTarget {
        /*position: absolute; */
        /* border: 2px solid #ff1a35; */
        /* height: 200px; */
        /* left: 35px; */
        /* right: 35px; */
       /* overflow: scroll; */
        /* -webkit-overflow-scrolling: touch; */
      }
​
      
}
​
@keyframes topFadeOut {
​
  0%  {opacity:  1;}
 70% {opacity:  .5;}
 100% {opacity:  0;}
}
  
.fade-animate-text {
  opacity: 0;
  font-size: 3.4rem;
  color: white;
  animation-name: topFadeOut;
  animation-duration: 5s;
  z-index:0;
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  }
  
  .hidden{visibility:hidden;}
​
</style>
​
<!-- ------------------------------------------------------------------------------------------------------------------------------ -->
​
<div id="fadetext" class="fade-animate-text">
<p>Click anywhere to add more eyes!</p>
</div>
<!-- ------------------------------------------------------------------------------------------------------------------------------ -->
​
<script> document.body.addEventListener('touchmove', function(event) {event.preventDefault();}, false); </script>
<div class="main">
 <div class="scrollTarget">
<div id="active_area" >
​
<div class="eyes">
    <div class="eye">
      <div class="ball"></div>
    </div>
​
    <div class="eye">
      <div class="ball"></div>
    </div>
  </div>
</div>
<div class="addthis_inline_share_toolbox"></div>
</div>
</div>
  
<!-- ------------------------------------------------------------------------------------------------------------------------------ -->
​
​
​
<script>
// mobile detection
var touchdevice=false;
function detectmob() { 
​
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}
​
if (detectmob()!==false) {
//alert("mobile!");
var touchdevice = true;
}
</script>
​
​
<script>
  var balls = document.getElementsByClassName("ball");
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    //event.clientX => get the horizontal coordinate of the mouse
    //event.clientY => get the Vertical coordinate of the mouse
    //window.innerWidth => get the browser width
    //window.innerHeight => get the browser height
​
    for(var i=0;i<2;i++){
      balls[i].style.left = x;
      balls[i].style.top = y;
      balls[i].style.transform = "translate(-"+x+",-"+y+")";
    }
  }
</script>
​
<script>
// touch features
var balls = document.getElementsByClassName("ball");
function showCoordinates(event) {
touchdevice=true; // set here because we only get here by detecting touch activity
  var xx = event.touches[0].clientX * 100 / window.innerWidth + "%";
  var yy = event.touches[0].clientY * 100 / window.innerHeight + "%";
  //document.getElementById("demo").innerHTML = xx + ", " + yy;
  
  for(var ii=0;ii<2;ii++){
      balls[ii].style.left = xx;
      balls[ii].style.top = yy;
      balls[ii].style.transform = "translate(-"+xx+",-"+yy+")";
    }
  
}
</script>
​
​
​
​
<!-- ------------------------------------------------------------------------------------------------------------------------------ -->
​
 
​
   <div id="buttons" class="buttonsContainer" style="visibility:hidden">
      <button id="buttonid" class="disableBodyScroll" ontouchstart="" >Disable Body Scroll</button>
      <button class="enableBodyScroll" ontouchstart="" >Enable Body Scroll</button>
    </div>
​
    <script src="bundle.js"></script>
    <script>
document.getElementById("buttonid").click();
    </script>
<script>
if (touchdevice===true) {
//alert("touch device!");
// if mobile, hide instructions to add eyes
var elem = document.getElementById("fadetext");
elem.style.visibility = "hidden";
}
else {
//alert(navigator.userAgent);
//alert("Click anywhere to add more eyes!\nReload the page to clear the eyes.");
​
​
//Click Anywhere To Add More Eyes!!!    
document.addEventListener("click", function(event) {
  eyes(event.clientX, event.clientY, 20 + 1 * 50, event);
 
});
​
​
function eyes(x, y, size, event) {
  var canvas = document.createElement("canvas"),
      context = canvas.getContext("2d");
  document.body.appendChild(canvas);
  canvas.style.position = "absolute";
  canvas.style.left = (x - size - 5) + "px";
  canvas.style.top = (y - size  / 2 - 5) + "px";
  
  
  var rect = canvas.getBoundingClientRect();
  canvas.width = size * 2 + 10;
  canvas.height = size + 10;
​
  onMouseMove(event);
  
  document.addEventListener("mousemove", onMouseMove);
​
  function onMouseMove(event) {
    var x = event.clientX - rect.left,
        y = event.clientY - rect.top;
    context.clearRect(0, 0, size * 2 + 10, size + 10);
    drawEye(x, y, size / 2 + 5, size / 2 + 5);
    drawEye(x, y, size * 1.5 + 5, size / 2 + 5);
  }
  
  function drawEye(x, y, cx, cy) {
    var dx = x - cx,
        dy = y - cy,
        angle = Math.atan2(dy, dx);
    context.save();
    context.translate(cx, cy);
    context.rotate(angle);
    context.beginPath();
    context.arc(0, 0, size / 2, 0, Math.PI * 2);
    context.fillStyle = "white";
    context.fill();
    context.stroke();
    context.beginPath();
    context.arc(size * 0.4, 0, size * 0.1, 0, Math.PI * 2);
    context.fillStyle = "black";
    
    context.fill();
    context.restore();
    
  }
}}
​
</script>
​
</body>
</html>
​
Cookies

Sketch Files

Console

Preview
