boredbutton3

Log | Files | Refs | README

script.js (7177B)

      1 function contact() {
      2     var popup = document.getElementById("pop");
      3     popup.classList.toggle("show");
      4 }
      5 
      6 function showFact() {
      7     moveButton();
      8     console.log("running function");
      9     const xhttp = new XMLHttpRequest();
     10     xhttp.onload = function() {
     11         document.getElementById("fact_text").innerHTML = this.responseText;
     12     }
     13     xhttp.open("GET", "getFact.php");
     14     xhttp.send();
     15 }
     16 
     17 function moveButton() {
     18     document.getElementById("button").style.bottom = "35%";
     19     document.getElementById("fact_text").style.display = "inline";
     20     document.getElementById("fact_text").style.opacity = "100%";
     21 }
     22 
     23 
     24 var canvas = document.getElementById('bang'),
     25    can_w = parseInt(canvas.getAttribute('width')),
     26    can_h = parseInt(canvas.getAttribute('height')),
     27    ctx = canvas.getContext('2d');
     28 
     29 var BALL_NUM = parseInt(((window.innerHeight + window.innerWidth) * 0.02) + 10);
     30 
     31 var ball = {
     32       x: 0,
     33       y: 0,
     34       vx: 0,
     35       vy: 0,
     36       r: 0,
     37       alpha: 1,
     38       phase: 0
     39    },
     40    ball_color = {
     41        r: 207,
     42        g: 255,
     43        b: 4
     44    },
     45    R = 3,
     46    balls = [],
     47    alpha_f = 0.02,
     48    alpha_phase = 0,
     49 
     50 // Line
     51    link_line_width = 0.8,
     52    dis_limit = parseInt(((window.innerHeight + window.innerWidth) * 0.07)+90),
     53    add_mouse_point = true,
     54    mouse_in = false,
     55    mouse_ball = {
     56       x: 0,
     57       y: 0,
     58       vx: 0,
     59       vy: 0,
     60       r: 0,
     61       type: 'mouse'
     62    };
     63 
     64 // Random speed
     65 function getRandomSpeed(pos){
     66     var  min = -1.5,
     67        max = 1.5;
     68     switch(pos){
     69         case 'top':
     70             return [randomNumFrom(min, max), randomNumFrom(0.1, max)];
     71             break;
     72         case 'right':
     73             return [randomNumFrom(min, -0.1), randomNumFrom(min, max)];
     74             break;
     75         case 'bottom':
     76             return [randomNumFrom(min, max), randomNumFrom(min, -0.1)];
     77             break;
     78         case 'left':
     79             return [randomNumFrom(0.1, max), randomNumFrom(min, max)];
     80             break;
     81         default:
     82             return;
     83             break;
     84     }
     85 }
     86 function randomArrayItem(arr){
     87     return arr[Math.floor(Math.random() * arr.length)];
     88 }
     89 function randomNumFrom(min, max){
     90     return Math.random()*(max - min) + min;
     91 }
     92 console.log(randomNumFrom(0, 10));
     93 // Random Ball
     94 function getRandomBall(){
     95     var pos = randomArrayItem(['top', 'right', 'bottom', 'left']);
     96     switch(pos){
     97         case 'top':
     98             return {
     99                 x: randomSidePos(can_w),
    100                 y: -R,
    101                 vx: getRandomSpeed('top')[0],
    102                 vy: getRandomSpeed('top')[1],
    103                 r: R,
    104                 alpha: 1,
    105                 phase: randomNumFrom(0, 10)
    106             }
    107             break;
    108         case 'right':
    109             return {
    110                 x: can_w + R,
    111                 y: randomSidePos(can_h),
    112                 vx: getRandomSpeed('right')[0],
    113                 vy: getRandomSpeed('right')[1],
    114                 r: R,
    115                 alpha: 1,
    116                 phase: randomNumFrom(0, 10)
    117             }
    118             break;
    119         case 'bottom':
    120             return {
    121                 x: randomSidePos(can_w),
    122                 y: can_h + R,
    123                 vx: getRandomSpeed('bottom')[0],
    124                 vy: getRandomSpeed('bottom')[1],
    125                 r: R,
    126                 alpha: 1,
    127                 phase: randomNumFrom(0, 10)
    128             }
    129             break;
    130         case 'left':
    131             return {
    132                 x: -R,
    133                 y: randomSidePos(can_h),
    134                 vx: getRandomSpeed('left')[0],
    135                 vy: getRandomSpeed('left')[1],
    136                 r: R,
    137                 alpha: 1,
    138                 phase: randomNumFrom(0, 10)
    139             }
    140             break;
    141     }
    142 }
    143 function randomSidePos(length){
    144     return Math.ceil(Math.random() * length);
    145 }
    146 
    147 // Draw Ball
    148 function renderBalls(){
    149     Array.prototype.forEach.call(balls, function(b){
    150        if(!b.hasOwnProperty('type')){
    151            ctx.fillStyle = 'rgba(63,97,124,'+b.alpha+')';
    152            ctx.beginPath();
    153            ctx.arc(b.x, b.y, R, 0, Math.PI*2, true);
    154            ctx.closePath();
    155            ctx.fill();
    156        }
    157     });
    158 }
    159 
    160 // Update balls
    161 function updateBalls(){
    162     var new_balls = [];
    163     Array.prototype.forEach.call(balls, function(b){
    164         b.x += b.vx;
    165         b.y += b.vy;
    166 
    167         if(b.x > -(50) && b.x < (can_w+50) && b.y > -(50) && b.y < (can_h+50)){
    168            new_balls.push(b);
    169         }
    170 
    171         // alpha change
    172         b.phase += alpha_f;
    173         b.alpha = Math.abs(Math.cos(b.phase));
    174         // console.log(b.alpha);
    175     });
    176 
    177     balls = new_balls.slice(0);
    178 }
    179 
    180 // loop alpha
    181 function loopAlphaInf(){
    182 
    183 }
    184 
    185 // Draw lines
    186 function renderLines(){
    187     var fraction, alpha;
    188     for (var i = 0; i < balls.length; i++) {
    189         for (var j = i + 1; j < balls.length; j++) {
    190 
    191            fraction = getDisOf(balls[i], balls[j]) / dis_limit;
    192 
    193            if(fraction < 1){
    194                alpha = (1 - fraction).toString();
    195 
    196                ctx.strokeStyle = 'rgba(63,97,124,'+alpha+')';
    197                ctx.lineWidth = link_line_width;
    198 
    199                ctx.beginPath();
    200                ctx.moveTo(balls[i].x, balls[i].y);
    201                ctx.lineTo(balls[j].x, balls[j].y);
    202                ctx.stroke();
    203                ctx.closePath();
    204            }
    205         }
    206     }
    207 }
    208 
    209 // calculate distance between two points
    210 function getDisOf(b1, b2){
    211     var  delta_x = Math.abs(b1.x - b2.x),
    212        delta_y = Math.abs(b1.y - b2.y);
    213 
    214     return Math.sqrt(delta_x*delta_x + delta_y*delta_y);
    215 }
    216 
    217 // add balls if there a little balls
    218 function addBallIfy(){
    219     if(balls.length < BALL_NUM){
    220         balls.push(getRandomBall());
    221     }
    222 }
    223 
    224 // Render
    225 function render(){
    226     ctx.clearRect(0, 0, can_w, can_h);
    227 
    228     renderBalls();
    229 
    230     renderLines();
    231 
    232     updateBalls();
    233 
    234     addBallIfy();
    235 
    236     window.requestAnimationFrame(render);
    237 }
    238 
    239 // Init Balls
    240 function initBalls(num){
    241     for(var i = 1; i <= num; i++){
    242         balls.push({
    243             x: randomSidePos(can_w),
    244             y: randomSidePos(can_h),
    245             vx: getRandomSpeed('top')[0],
    246             vy: getRandomSpeed('top')[1],
    247             r: R,
    248             alpha: 1,
    249             phase: randomNumFrom(0, 10)
    250         });
    251     }
    252 }
    253 // Init Canvas
    254 function initCanvas(){
    255     canvas.setAttribute('width', window.innerWidth);
    256     canvas.setAttribute('height', window.innerHeight);
    257 
    258     can_w = parseInt(canvas.getAttribute('width'));
    259     can_h = parseInt(canvas.getAttribute('height'));
    260 }
    261 window.addEventListener('resize', function(e){
    262     BALL_NUM = parseInt((window.innerHeight + window.innerWidth) * 0.025);
    263     initCanvas();
    264 });
    265 
    266 function goMovie(){
    267     initCanvas();
    268     initBalls(BALL_NUM);
    269     window.requestAnimationFrame(render);
    270 }
    271 goMovie();
    272 
    273 // Mouse effect
    274 canvas.addEventListener('mouseenter', function(){
    275     mouse_in = true;
    276     balls.push(mouse_ball);
    277 });
    278 canvas.addEventListener('mouseleave', function(){
    279     mouse_in = false;
    280     var new_balls = [];
    281     Array.prototype.forEach.call(balls, function(b){
    282         if(!b.hasOwnProperty('type')){
    283             new_balls.push(b);
    284         }
    285     });
    286     balls = new_balls.slice(0);
    287 });
    288 canvas.addEventListener('mousemove', function(e){
    289     var e = e || window.event;
    290     mouse_ball.x = e.pageX;
    291     mouse_ball.y = e.pageY;
    292 });