NGB LetItSnow [Grease/Tamper]

theSplit

1998
Registriert
3 Aug. 2014
Beiträge
5.857
Let it snow..



Für Greasemonkey und Tampermonkey ein bisschen Weihnachtsstimmung.

Edit: Der Schnee lässt sich mit "^" an (Standard: An) und abschalten.
Hier ein Weg die Schneekanone immer zu zünden oder abzuschalten: NGB LetItSnow [Grease/Tamper]

Javascript:
Expand Collapse Copy
// ==UserScript==
// @name     NGB LetItSnow
// @version  1
// @grant    none
// @include  https://ngb.to/*
// @include  https://www.ngb.to/*
// ==/UserScript==

let canvasElement = document.createElement('canvas')
canvasElement.width = '2000'
canvasElement.height = '1600'
document.body.append(canvasElement)

canvasElement.style['position'] = 'fixed'
canvasElement.style['left'] = '0px'
canvasElement.style['top'] = '0px'
canvasElement.style['z-index'] = '100'
canvasElement.style['background'] = 'transparent'
canvasElement.style['maxwidth'] = '100%'
canvasElement.style['maxheight'] = '100%'
canvasElement.style['user-select'] = 'none'
canvasElement.style['pointer-events'] = 'none'

let ctx = canvasElement.getContext('2d')
let pi2 = 2 * Math.PI
let particles = []
let particleCount = 250
let wind = 0
let doSnow = true

function setup() {
    ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
    for (let i = 0; i < particleCount; i++) {
        particles.push(new particle((Math.random() * canvasElement.width) + 5, (Math.random() * canvasElement.height - 5), Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
    }

    window.requestAnimationFrame(drawSnow)
}


class particle {
    constructor(x, y, size, maxSpeedX, minSpeedX, maxSpeedY, minSpeedY) {
        this.wind = 0
        this.x = x
        this.y = y
        this.size = size
        this.speedX = (Math.random() * maxSpeedX + minSpeedX)
        this.speedY = (Math.random() * maxSpeedY + minSpeedY)
    }

    moveBySpeed() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.x += wind
        //this.size += this.y / (canvasElement.height * 75)
    }
}

function drawSnow() {
    ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
    if (!doSnow) return
    wind = (Math.random() * 1) + (Math.random() * -1)

    let deleted = 0
    for (let i = 0; i < particles.length; ++i) {
        let particle = particles
[I]        particle.moveBySpeed()

        if (particle.x <= 0 || particle.x > canvasElement.width) {
            particles.splice(i, 1)
            --i
            ++deleted
        } else if (particle.y <= 0 || particle.y > canvasElement.height) {
            particles.splice(i, 1)
            --i
            ++deleted
        }
    }

    for (let i = 0; i < deleted; ++i) particles.push(new particle((Math.random() * canvasElement.width) + 1, 1, Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))

    /*
    ctx.fillStyle = '#333'
    ctx.beginPath()

    for (let particle of particles) {
      ctx.moveTo(particle.x, particle.y)
      ctx.arc(particle.x, particle.y, particle.size, 0, pi2)
    }
    */

    ctx.fill()

    ctx.fillStyle = '#fff'
    ctx.beginPath()
    for (let particle of particles) {
        ctx.moveTo(particle.x, particle.y)
        ctx.arc(particle.x - (particle.size * 0.25), particle.y - (particle.size * 0.25), particle.size * 0.75, 0, pi2)
    }

    ctx.fill()

    window.requestAnimationFrame(drawSnow)
}

let cookieData = document.cookie.split('; ')
for (let cookie of cookieData) {
  if (cookie.startsWith('doSnow')) {
    doSnow = cookie.split('=')[1] === 'false' ? false : true
    document.cookie = 'doSnow=; max-age=-1'
  }
}

document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'


setup()


document.addEventListener('keyup', function (evt) {
    if (evt.key === 'Dead') {
        doSnow = !doSnow
          document.cookie = 'doSnow=; max-age=-1';
        document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'

        if (doSnow) window.requestAnimationFrame(drawSnow)
          else ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    }
})

Merry X-Mas!
 
Zuletzt bearbeitet:
Sehr schön. Nachdem der schneiende Header bei mir in Ermangelung einer Alternative zur Stylist-Erweiterung nicht mehr funktioniert, ist das eine gute Alternative. Gleich mal probieren :)

Edit: Ist das normal, das nach jedem Reload bzw. nach jedem Aufruf eines Subforums oder Threads alles erst mal wieder aus ist? Muss dann jedes Mal auf ^ gedrückt werden.
 
  • Thread Starter Thread Starter
  • #3
Wenn du es "immer" schneiend haben willst, einfach das hier auf "Ja" setzen:

Zeile 29:

[src=javascript]let doSnow = false //Standardmäßig aus[/src]

mit dem hier

[src=javascript]let doSnow = true //Standardmäßig an[/src]

abspeichern und den Forentab neu laden!

Edit: Hab es jetzt per Standard aktiviert, weil sich sonst gewundert wird..
 
Zuletzt bearbeitet:
Ist jetzt auf der anderen Seite ebenfalls wieder ein Problem. Wenn ich das Schneien nämlich jetzt mittels ^ abschalte, ist es bei einem Reload bzw. Aufruf eine Subforums/Threads wieder da ;)

Wenn Du da eine Möglichkeit finden könntest, die diese Einstellung quasi übernimmt, wäre das natürlich genial. Hab davon aber keine Ahnung, also weiß auch nicht, ob und, falls ja, wie einfach so was umsetzbar ist.
 
  • Thread Starter Thread Starter
  • #5
Hab dir deinen Wunsch umgesetzt und den Startpost editiert.

Jetzt lässt sich mittels "^" der Schnee, auch bei Seitenwechsel/beim Surfen auf dem NGB, an und ausschalten und merkt sich diese Einstellung.
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #6
Jetzt noch eine neue, winterlichere Version bei der der Schnee liegen bleibt.

Screenshot:


Video:

Und hier das Skript:

Javascript:
Expand Collapse Copy
// ==UserScript==
// @name     NGB LetItSnow
// @version  1
// @grant    none
// @include  https://ngb.to/*
// @include  https://www.ngb.to/*
// ==/UserScript==

let pi2 = 2 * Math.PI
let particles = []
let particleCount = 250
let wind = 0
let baseDecay = 3200
let maxParticles = 1000
let doSnow = true

let canvasElement = document.createElement('canvas')
canvasElement.width = '2000'
canvasElement.height = '1600'
document.body.append(canvasElement)

canvasElement.style['position'] = 'fixed'
canvasElement.style['left'] = '0px'
canvasElement.style['top'] = '0px'
canvasElement.style['z-index'] = '100'
canvasElement.style['background'] = 'transparent'
canvasElement.style['maxwidth'] = '100%'
canvasElement.style['maxheight'] = '100%'
canvasElement.style['user-select'] = 'none'
canvasElement.style['pointer-events'] = 'none'

let ctx = canvasElement.getContext('2d')

function setup() {
    ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
    for (let i = 0; i < particleCount; i++) {
        particles.push(new particle((Math.random() * canvasElement.width) + 5, (Math.random() * canvasElement.height - 5), Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
    }

    window.requestAnimationFrame(drawSnow)
}


class particle {
    constructor(x, y, size, maxSpeedX, minSpeedX, maxSpeedY, minSpeedY) {
        this.x = x
        this.y = y
        this.size = size
        this.speedX = (Math.random() * maxSpeedX) + (Math.random() * -maxSpeedX) + (Math.random() * minSpeedX) + (Math.random() * -minSpeedX)
        this.speedY = (Math.random() * maxSpeedY) + minSpeedY
          this.decay = baseDecay + Math.round(Math.random() * 1000 - Math.random() * 1000)
          this.hasDecay = false
    }

    moveBySpeed() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.x += wind
        //this.size += this.y / (canvasElement.height * 75)
    }
}

function drawSnow() {
    if (!doSnow) return
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    wind = (Math.random() * 1) + (Math.random() * -1)

    let deleted = 0
    let sizeParticles = particles.length
    let addParticles = sizeParticles < maxParticles
    for (let i = 0; i < particles.length; ++i) {
        let particle = particles
[I]        if (!particle.hasDecay) {
          particle.moveBySpeed()
     
          if (particle.x <= 0 || particle.x > window.innerWidth) {
              particles.splice(i, 1)
              --i
              ++deleted
          } else if (particle.y < 0 || particle.y >= window.innerHeight - (particle.size * 0.5)) {
                particle.hasDecay = true
                particle.y = window.innerHeight
              /*
              particles.splice(i, 1)
              --i
             
              ++deleted
              */
          }
        } else {
          if (addParticles && particle.decay % 100 === 0 && Math.random() * 1 > 0.95) ++deleted
                   
          if (particle.decay <= 0) {
                     particles.splice(i, 1)
                --i
              ++deleted
          } else if (particle.y != window.innerHeight) {
            particle.y = window.innerHeight
            }
         
          --particle.decay
          particle.size += 0.0075
        }
    }
       
    for (let i = 0; i < deleted; ++i) particles.push(new particle((Math.random() * canvasElement.width) + 1, 1, Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
      let diffParticles = particleCount - particles.length
      if (diffParticles > 0) for (let i = 0; i < diffParticles; ++i) particles.push(new particle((Math.random() * canvasElement.width) + 1, 1, Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
     
     
    ctx.fillStyle = '#fff'
    ctx.beginPath()
    for (let particle of particles) {
        ctx.moveTo(particle.x, particle.y)
        ctx.arc(particle.x - (particle.size * 0.25), particle.y - (particle.size * 0.25), particle.size * 0.75, 0, pi2)
    }

    ctx.fill()

    window.requestAnimationFrame(drawSnow)
}

let cookieData = document.cookie.split('; ')
for (let cookie of cookieData) {
  if (cookie.startsWith('doSnow')) {
    doSnow = cookie.split('=')[1] === 'false' ? false : true
    document.cookie = 'doSnow=; max-age=-1'
  }
}

document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'


setup()


document.addEventListener('keyup', function (evt) {
    if (evt.key === 'Dead') {
        doSnow = !doSnow
          document.cookie = 'doSnow=; max-age=-1';
        document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'

        if (doSnow) window.requestAnimationFrame(drawSnow)
          else ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    }
})
 
Zuletzt bearbeitet:
Sehr schön. Aber bei der neuen Version wird die Einstellung nicht gespeichert, kann das sein?

Edit: Ah! Ich nehme alles zurück und behaupte das Gegenteil ;)
Wie es aussieht werden die Einstellungen individuell pro Subforum gespeichert. Nett :T
 
  • Thread Starter Thread Starter
  • #8
Wie es aussieht werden die Einstellungen individuell pro Subforum gespeichert. Nett :T

Nein, das täuscht. Wenn du mehrere Tabs offen hast und in einem die [kw]^[/kw] drückst, wird es für den Tab an oder ausgeschaltet. Wechselst du dann in den anderen Tab und navigierst, wird der letzte Stand übernommen.
 
Ich habe in der Regel einen Thread fürs Board offen. In Threads oder Subforen, in denen ich es mittels ^ deaktiviert habe, bleibt es auch deaktiviert, in den anderen nicht.
 
  • Thread Starter Thread Starter
  • #10
Irgendwie war das Einstellungsmerken etwas Fehleranfällig, gerade wenn man mehrere Tabs offen gehabt hat.

Hier ist noch ein etwa aktualisierte Version, auch mit "anmutend schmelzendem Scnee". Ich denke diese Version solltest du ausprobieren.

Ich überlege auch ob man nicht den Schnee zwischenspeichert und bei einem Tab wiederherstellt.. dann wäre das ein gängiges Bild auch bei Seitenwechsel. Wäre das gewünscht oder soll das so bleiben wie ist? :unknown:

Javascript:
Expand Collapse Copy
// ==UserScript==
// @name     NGB LetItSnow
// @version  1.1
// @grant    none
// @include  https://ngb.to/*
// @include  https://www.ngb.to/*
// ==/UserScript==

let pi2 = 2 * Math.PI
let particles = []
let particleCount = 300
let wind = 0
let baseDecay = 3200
let maxParticles = 1000
let doSnow = true

let canvasElement = document.createElement('canvas')
canvasElement.width = '2000'
canvasElement.height = '1600'
document.body.append(canvasElement)

canvasElement.style['position'] = 'fixed'
canvasElement.style['left'] = '0px'
canvasElement.style['top'] = '0px'
canvasElement.style['z-index'] = '100'
canvasElement.style['background'] = 'transparent'
canvasElement.style['maxwidth'] = '100%'
canvasElement.style['maxheight'] = '100%'
canvasElement.style['user-select'] = 'none'
canvasElement.style['pointer-events'] = 'none'

let ctx = canvasElement.getContext('2d')

function setup() {
    ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
    for (let i = 0; i < particleCount; i++) {
        particles.push(new particle(Math.random() * canvasElement.width + 5, Math.random() * canvasElement.height - 5, Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
    }

    window.requestAnimationFrame(drawSnow)
}


class particle {
    constructor(x, y, size, maxSpeedX, minSpeedX, maxSpeedY, minSpeedY) {
        this.x = x
        this.y = y
        this.size = size
        this.speedX = Math.random() * maxSpeedX + Math.random() * -maxSpeedX + Math.random() * minSpeedX + Math.random() * -minSpeedX
        this.speedY = Math.random() * maxSpeedY + minSpeedY
          this.decay = baseDecay + Math.round(Math.random() * 1000 - Math.random() * 1000)
          this.hasDecay = false
    }

    moveBySpeed() {
        this.x += this.speedX;
        this.y += this.speedY;
        this.x += wind
        //this.size += this.y / (canvasElement.height * 75)
    }
}

function drawSnow() {
    if (!doSnow) return
      ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    wind = (Math.random() * 1) + (Math.random() * -1)

    let deleted = 0
    let sizeParticles = particles.length
    let addParticles = sizeParticles < maxParticles
    for (let i = 0; i < particles.length; ++i) {
        let particle = particles
[I]        if (!particle.hasDecay) {
          particle.moveBySpeed()
     
          if (particle.x < 0 || particle.x > canvasElement.width) {
              particles.splice(i, 1)
              --i
              ++deleted
          } else if (particle.y < 0 || particle.y >= window.innerHeight) {
                particle.hasDecay = true
                particle.y = window.innerHeight
          }
        } else {
          if (addParticles && particle.decay % 100 === 0 && Math.random() * 1 > 0.95) ++deleted
                   
            if (particle.decay <= 0) {
                     particles.splice(i, 1)
                --i
              ++deleted
          } else {
            --particle.decay
            particle.size += 0.0075
          }
         
          if (particle.y != window.innerHeight) particle.y = window.innerHeight
        }
    }
       
    for (let i = 0; i < deleted; ++i) particles.push(new particle(Math.random() * canvasElement.width + 1, 1, Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
      let diffParticles = particleCount - particles.length
      if (diffParticles > 0) for (let i = 0; i < diffParticles; ++i) particles.push(new particle(Math.random() * canvasElement.width + 1, 1, Math.random() * 4 + 1, 1, 0.125, 1, 1.125, 0.15))
     
      ctx.fillStyle = '#fff'
     
      ctx.beginPath()
    for (let particle of particles) {
          if (particle.hasDecay) continue
        ctx.moveTo(particle.x, particle.y)
        ctx.arc(particle.x, particle.y, particle.size, 0, pi2)
    }
      ctx.fill()     
 
      for (let particle of particles) {
          if (!particle.hasDecay) continue
           ctx.fillStyle = 'rgba(255,255,255, ' + (particle.decay * 0.01) + ')'
          ctx.beginPath()
        ctx.arc(particle.x, particle.y - (particle.size * 0.5), particle.size, 0, pi2)
          ctx.fill()
    }
 


   

    window.requestAnimationFrame(drawSnow)
}

let cookieData = document.cookie.split('; ')
for (let cookie of cookieData) {
  if (cookie.startsWith('doSnow')) {
    doSnow = cookie.split('=')[1] === 'false' ? false : true
    document.cookie = 'doSnow=; max-age=-1'
  }
}

document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'


setup()


document.addEventListener('keyup', function (evt) {
    if (evt.key === 'Dead') {
        doSnow = !doSnow
          document.cookie = 'doSnow=; max-age=-1';
        document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'

        if (doSnow) window.requestAnimationFrame(drawSnow)
          else ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
    }
})
 
Zuletzt bearbeitet:
Ich bin mit der Version, die ich aktuell habe (nicht die aktuellste, die Du gerade gepostet hast), ja zufrieden ;)
 
  • Thread Starter Thread Starter
  • #12
Hier nochmal eine Version die sich den letzten Stand merkt.

Ihr könnt das einfach ausschalten wenn ihr [kw]useSave = false[/kw] setzt.

Javascript:
Expand Collapse Copy
// ==UserScript==
// @name     NGB LetItSnow
// @version  1.1
// @grant    GM.setValue
// @grant    GM.getValue
// @include  https://ngb.to/*
// @include  https://www.ngb.to/*
// ==/UserScript==

let useSave = true
let doSnow = true

let saveInProgress = false
let pi2 = 2 * Math.PI
let particles = []
let particleCount = 300
let wind = 0
let baseDecay = 3200
let maxParticles = 750

let canvasElement = document.createElement('canvas')
canvasElement.width = '2200'
canvasElement.height = '1600'
document.body.append(canvasElement)

canvasElement.style['position'] = 'fixed'
canvasElement.style['left'] = '0px'
canvasElement.style['top'] = '0px'
canvasElement.style['z-index'] = '100'
canvasElement.style['background'] = 'transparent'
canvasElement.style['maxwidth'] = '100%'
canvasElement.style['maxheight'] = '100%'
canvasElement.style['user-select'] = 'none'
canvasElement.style['pointer-events'] = 'none'

let ctx = canvasElement.getContext('2d')


function setup() {
  ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
  if (useSave) {
    GM.getValue('doSnowParticles', '').then(function (data) {
      if (data !== '') {
        let rows = data.split('|')

        for (let entries of rows) {
          let entry = entries.split('_', 7)
          particles.push(new resumeParticle(parseFloat(entry[0]), parseFloat(entry[1]), parseFloat(entry[2]), parseFloat(entry[3]), parseFloat(entry[4]), parseInt(entry[5]), entry[6] === "true" ? true : false))
        }

        console.log('doSnow: restored particles..')
      } else if (particles.length === 0) {
        for (let i = 0; i < particleCount; i++) {
          particles.push(new particle(Math.random() * canvasElement.width + 5, Math.random() * canvasElement.height - 5, Math.random() * 3 + 1, 1, 0.125, 1, 1.125, 0.15))
        }
      }
    
      window.requestAnimationFrame(drawSnow)
    })
  } else if (particles.length === 0) {
    for (let i = 0; i < particleCount; i++) {
      particles.push(new particle(Math.random() * canvasElement.width + 5, Math.random() * canvasElement.height - 5, Math.random() * 3 + 1, 1, 0.125, 1, 1.125, 0.15))
    }

    window.requestAnimationFrame(drawSnow)
  }
}


class resumeParticle {
  constructor(x, y, size, speedX, speedY, decay, hasDecay) {
    this.x = x
    this.y = y
    this.size = size
    this.speedX = speedX
    this.speedY = speedY
    this.decay = decay
    this.hasDecay = hasDecay
  }

  moveBySpeed() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.x += wind
    //this.size += this.y / (canvasElement.height * 75)
  }
}

class particle {
  constructor(x, y, size, maxSpeedX, minSpeedX, maxSpeedY, minSpeedY) {
    this.x = x
    this.y = y
    this.size = size
    this.speedX = Math.random() * maxSpeedX + Math.random() * -maxSpeedX + Math.random() * minSpeedX + Math.random() * -minSpeedX
    this.speedY = Math.random() * maxSpeedY + minSpeedY
    this.decay = baseDecay + Math.round(Math.random() * 1000 - Math.random() * 1000)
    this.hasDecay = false
  }

  moveBySpeed() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.x += wind
    //this.size += this.y / (canvasElement.height * 75)
  }
}

function drawSnow() {
  if (!doSnow || saveInProgress) return
  ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
  wind = (Math.random() * 1) + (Math.random() * -1)

  let deleted = 0
  let sizeParticles = particles.length
  let addParticles = sizeParticles < maxParticles
  for (let i = 0; i < particles.length; ++i) {
    let particle = particles
[I]    if (!particle.hasDecay) {
      particle.moveBySpeed()

      if (particle.x < 0 || particle.x > canvasElement.width) {
        particles.splice(i, 1)
        --i
        ++deleted
      } else if (particle.y < 0 || particle.y >= window.innerHeight + (particle.size * 0.5)) {
        particle.hasDecay = true
        particle.y = window.innerHeight
      }
    } else {
      if (addParticles && particle.decay % 100 === 0 && Math.random() * 1 > 0.95) ++deleted
      if (particle.y != window.innerHeight + (particle.size * 0.5)) particle.y = window.innerHeight + (particle.size * 0.5)

      if (particle.decay <= 0) {
        particles.splice(i, 1)
        --i
        ++deleted
      } else {
        --particle.decay
        particle.size += 0.005
      }

     
    }
  }

  for (let i = 0; i < deleted; ++i) particles.push(new particle(Math.random() * canvasElement.width + 1, 1, Math.random() * 3 + 1, 1, 0.125, 1, 1.125, 0.15))
  let diffParticles = particleCount - particles.length
  if (diffParticles > 0) for (let i = 0; i < diffParticles; ++i) particles.push(new particle(Math.random() * canvasElement.width + 1, 1, Math.random() * 3 + 1, 1, 0.125, 1, 1.125, 0.15))

  ctx.fillStyle = '#fff'

  ctx.beginPath()
  for (let particle of particles) {
    if (particle.hasDecay) continue
    ctx.moveTo(particle.x, particle.y)
    ctx.arc(particle.x, particle.y, particle.size, 0, pi2)
  }
  ctx.fill()

  for (let particle of particles) {
    if (!particle.hasDecay) continue
    ctx.fillStyle = 'rgba(255,255,255, ' + (particle.decay * 0.01) + ')'
    ctx.beginPath()
    ctx.arc(particle.x, particle.y - (particle.size * 0.5), particle.size, 0, pi2)
    ctx.fill()
  }





  window.requestAnimationFrame(drawSnow)
}

document.addEventListener('keyup', function (evt) {
  if (evt.key === 'Dead') {
    doSnow = !doSnow
    document.cookie = 'doSnow=; max-age=-1';
    document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'

    if (doSnow) window.requestAnimationFrame(drawSnow)
    elsectx.clearRect(0, 0, canvasElement.width, canvasElement.height)
  }
})



window.addEventListener('beforeunload', function (evt) {
  if (!useSave) {
    GM.setValue('doSnowParticles', '')
    return true
  }
 
  saveInProgress = true

  let particleList = []
  for (let particle of particles) {
    particleList.push([particle.x, particle.y, particle.size, particle.speedX, particle.speedY, particle.decay, particle.hasDecay].join('_'))
  }

  GM.setValue('doSnowParticles', particleList.join('|')).then(function () { console.log('doSnow: saved particles..') })
})

let cookieData = document.cookie.split('; ')
for (let cookie of cookieData) {
  if (cookie.startsWith('doSnow')) {
    doSnow = cookie.split('=')[1] === 'false' ? false : true
    document.cookie = 'doSnow=; max-age=-1'
  }
}

document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/'
setup()
 
Zuletzt bearbeitet:
  • Thread Starter Thread Starter
  • #13
Hier die neue Version:




Und hier der Code:
Javascript:
Expand Collapse Copy
// ==UserScript==
// @name     NGB LetItSnow
// @version  2.01
// @grant    GM.setValue
// @grant    GM.getValue
// @include  https://ngb.to/*
// @include  https://www.ngb.to/*
// ==/UserScript==

let useSave = true
let doSnow = true

let saveInProgress = false
let pi2 = 2 * Math.PI
let particles = []
let particleCount = 60
let wind = 0
let maxParticles = 90

let w_height = 0
let w_width = 0

let canvasElement = document.createElement('canvas')
canvasElement.width = '4000'
canvasElement.height = '2200'
document.body.append(canvasElement)

canvasElement.style['position'] = 'fixed'
canvasElement.style['left'] = '0px'
canvasElement.style['top'] = '0px'
canvasElement.style['z-index'] = '100'
canvasElement.style['background'] = 'transparent'
canvasElement.style['maxwidth'] = '100%'
canvasElement.style['maxheight'] = '100%'
canvasElement.style['user-select'] = 'none'
canvasElement.style['pointer-events'] = 'none'

let ctx = canvasElement.getContext('2d')
let snowflake = new Image()

function initSnowFlake() {
    let snowflakeSVG = new Blob(['<svg width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" id="svg148" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs145" /><g id="layer1"><g id="g8" transform="matrix(0.26458333,0,0,0.26458333,-8.1526323,6.0439836)"><path d="m 423.69,258.04 h -55.374 l -27.687,47.955 27.687,47.955 h 55.374 l 27.687,-47.955 z m -9.238,79.91 h -36.898 l -18.45,-31.955 18.45,-31.955 h 36.898 l 18.449,31.955 z" id="path2" style="fill:#ffffff" /><path id="polygon4" d="M 413.6,295.84 V 275.52 L 396,285.68 378.4,275.52 v 20.32 l -17.6,10.16 17.6,10.16 v 20.32 l 17.6,-10.16 17.6,10.16 V 316.16 L 431.2,306 Z" style="fill:#ffffff" /><path d="m 632.2,216.72048 -20.434,-11.797 -20.432,11.797 v -15.513 l -27.956,16.141 52.063,13.949 -3.623,13.523 -65.586,-17.573 -30.543,17.634 52.061,13.951 -3.624,13.522 -60.773,-16.285 -4.809,-1.289 -40.603,23.442 11.36,19.676 0.577,1 h 26.525 l 8.309,-4.797 v -23.594 l 20.434,11.797 20.434,-11.797 v 23.594 l 20.434,11.796 -20.434,11.799 v 23.595 l -20.434,-11.797 -20.436,11.798 0.002,-23.596 -8.311,-4.798 h -26.523 l -0.577,1 -11.36,19.677 41.68,24.063 3.112,-0.834 60.771,-16.283 3.623,13.523 -50.36,13.493 30.545,17.635 63.881,-17.118 3.624,13.523 -50.358,13.494 26.876,15.517 -0.001,-15.513 20.436,11.799 20.434,-11.797 v 23.592 l 20.434,11.797 -20.434,11.8 -0.002,23.593 -20.432,-11.796 -20.436,11.796 v -23.594 l -20.432,-11.796 13.435,-7.756 -27.957,-16.141 13.951,52.063 -13.522,3.624 -17.575,-65.585 -30.542,-17.634 13.948,52.061 -13.523,3.624 -16.283,-60.774 -1.289,-4.81 -40.603,-23.442 -11.359,19.675 -0.577,1 13.264,22.974 8.308,4.796 20.434,-11.797 v 23.595 l 20.434,11.797 -20.434,11.797 0.002,23.594 -20.436,-11.797 -20.434,11.797 v -23.594 l -20.436,-11.799 20.436,-11.796 v -9.596 l -13.262,-22.971 h -23.877 v 48.128 l 2.277,2.277 44.488,44.488 -9.899,9.899 -36.866,-36.864 v 35.27 l 2.277,2.277 44.488,44.488 -9.899,9.899 -36.866,-36.865 v 31.032 l 13.435,-7.756 -10e-4,23.596 20.433,11.797 -20.433,11.797 v 23.595 l -20.434,-11.797 -20.434,11.796 v -23.593 l -20.434,-11.798 20.434,-11.798 v -23.593 l 13.434,7.755 v -32.279 l -38.111,38.111 -9.899,-9.899 48.01,-48.01 v -35.27 l -38.111,38.111 -9.899,-9.899 48.01,-48.011 v -46.884 H 365.13 l -13.263,22.972 v 9.594 l 20.434,11.797 -20.434,11.798 -0.001,23.594 -20.433,-11.797 -20.434,11.798 v -23.596 l -20.434,-11.796 20.434,-11.798 v -23.597 l 20.434,11.799 8.31,-4.797 13.263,-22.971 -0.578,-1 -11.359,-19.675 -41.681,24.064 -17.118,63.883 -13.523,-3.624 13.494,-50.36 -30.544,17.635 -17.118,63.883 -13.523,-3.624 13.494,-50.36 -26.875,15.517 13.434,7.757 -20.436,11.797 v 23.594 l -20.432,-11.797 -20.435,11.798 -0.001,-23.595 -20.43,-11.799 20.433,-11.797 v -23.595 l 20.435,11.797 20.433,-11.796 v 15.513 l 27.955,-16.14 -52.062,-13.95 3.624,-13.523 60.773,16.284 4.812,1.289 30.544,-17.634 -52.061,-13.95 3.624,-13.523 60.772,16.284 4.812,1.289 40.603,-23.441 -11.363,-19.677 -0.577,-0.999 h -26.527 l -8.308,4.797 v 23.595 l -20.434,-11.797 -20.434,11.796 v -23.594 l -20.435,-11.797 20.435,-11.798 -0.001,-23.595 20.435,11.798 20.436,-11.799 -0.002,23.596 8.31,4.798 h 26.524 l 0.578,-1.001 11.359,-19.675 -41.68,-24.063 -63.883,17.116 -3.624,-13.523 50.359,-13.493 -30.544,-17.635 -3.109,0.833 -60.772,16.284 -3.624,-13.523 50.358,-13.493 -26.874,-15.516 v 15.512 l -20.435,-11.8 -20.433,11.797 v -23.592 l -20.435,-11.799 20.434,-11.798 0.002,-23.595 20.433,11.797 20.434,-11.797 10e-4,23.595 20.432,11.797 -13.434,7.757 27.956,16.14 -13.95,-52.063 13.523,-3.623 16.284,60.773 1.29,4.812 30.544,17.635 -13.949,-52.062 13.523,-3.623 17.572,65.584 40.603,23.441 11.36,-19.677 0.577,-0.999 -13.263,-22.972 -8.309,-4.797 -20.434,11.798 v -23.595 l -20.433,-11.798 20.433,-11.797 -10e-4,-23.595 20.435,11.797 20.434,-11.798 v 23.596 l 20.436,11.798 -20.436,11.797 v 9.595 l 13.261,22.97 h 23.875 v -48.127 l -2.277,-2.277 -44.488,-44.488 9.899,-9.899 36.866,36.865 v -35.27 l -46.765,-46.765003 9.899,-9.899 36.866,36.864003 V 84.394477 l -13.434,7.756 10e-4,-23.597 -20.433,-11.797 20.432,-11.796 10e-4,-23.596 20.433,11.798 20.434,-11.796 v 23.593 l 20.434,11.799 -20.434,11.798 v 23.592 l -13.436,-7.757 0.001,32.282003 38.112,-38.113003 9.899,9.899 -44.488,44.489003 -3.523,3.523 v 35.269 l 38.112,-38.111 9.899,9.899 -44.489,44.488 -3.522,3.521 10e-4,46.884 h 23.873 l 13.264,-22.973 v -9.592 l -20.434,-11.797 20.434,-11.798 v -23.595 l 20.434,11.797 20.432,-11.798 0.002,23.595 20.434,11.798 -20.434,11.798 v 23.597 l -20.434,-11.8 -8.31,4.798 -13.262,22.97 0.577,1 11.36,19.677 41.679,-24.063 17.119,-63.884 13.522,3.624 -13.495,50.36 30.545,-17.636 0.833,-3.109 16.283,-60.772 13.523,3.623 -13.493,50.358 26.875,-15.516 -13.434,-7.756 20.436,-11.798 v -23.594 l 20.432,11.796 20.434,-11.797 0.002,23.596 20.432,11.798 -20.432,11.796 z m -206.48,37.701 h -59.44 l -29.719,51.477 29.72,51.476 h 59.439 l 29.719,-51.476 z" id="path6" style="fill:#ffffff" /></g></g></svg>'], { type: 'image/svg+xml' })
    snowflake.addEventListener('load', setup)
    snowflake.src = window.URL.createObjectURL(snowflakeSVG)

}


function setup() {
    ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
    w_width = window.innerWidth
    w_height = window.innerHeight
    if (useSave) {
        GM.getValue('doSnowParticles', '').then(function (data) {
            if (data !== '') {
                let rows = data.split('|')

                for (let entries of rows) {
                    let entry = entries.split('_', 5)
                    particles.push(new resumeParticle(parseFloat(entry[0]), parseFloat(entry[1]), parseFloat(entry[2]), parseFloat(entry[3]), parseFloat(entry[4])))
                    if (particles.length === maxParticles) break
                }

                console.log('doSnow: restored particles..')
            } else if (particles.length === 0) {
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new particle(Math.random() * canvasElement.width + 5, Math.random() * canvasElement.height - 5, Math.random() * 30 + 10, 1, 0.125, 0.45, 1.125, 0.15))
                }
            }
        })
    }

    window.requestAnimationFrame(drawSnow)
}


class resumeParticle {
    constructor(x, y, size, speedX, speedY) {
        this.x = x
        this.y = y
        this.size = size
        this.sX = speedX
        this.sY = speedY
    }

    moveBySpeed() {
        this.x += this.sX;
        this.y += this.sY;
        this.x += wind
    }
}

class particle {
    constructor(x, y, size, maxSpeedX, minSpeedX, maxSpeedY, minSpeedY) {
        this.x = x
        this.y = y
        this.size = size
        this.sX = Math.random() * maxSpeedX + Math.random() * -maxSpeedX + Math.random() * minSpeedX + Math.random() * -minSpeedX
        this.sY = Math.random() * maxSpeedY + minSpeedY
    }

    moveBySpeed() {
        this.x += this.sX;
        this.y += this.sY;
        this.x += wind
    }
}

function drawSnow() {
    if (!doSnow || saveInProgress) return
    ctx.clearRect(0, 0, w_width, w_height)
    wind = (Math.random() * 1) + (Math.random() * -1)

    let deleted = 0
    for (let i = 0; i < particles.length; ++i) {
        let particle = particles[i]
        particle.moveBySpeed()

        if (particle.x + particle.size < 0 || particle.x + particle.size > w_width) {
            particles.splice(i, 1)
            --i
            ++deleted
            continue
        }

        if (particle.y - particle.size > w_height) {
            particles.splice(i, 1)
            --i
            ++deleted
        }
    }

    if (deleted > maxParticles) deleted = maxParticles
    for (let i = 0; i < deleted; ++i) particles.push(new particle(Math.random() * canvasElement.width + 1, 1, Math.random() * 30 + 10, 1, 0.125, 0.45, 1.125, 0.15))

    for (let particle of particles) ctx.drawImage(snowflake, particle.x, particle.y, particle.size, particle.size)
    window.requestAnimationFrame(drawSnow)
}

document.addEventListener('keyup', function (evt) {
    if (evt.key === 'Dead') {
        doSnow = !doSnow
        document.cookie = 'doSnow=; max-age=-1; samesite=strict; secure';
        document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/; samesite=strict; secure'

        if (doSnow) window.requestAnimationFrame(drawSnow)
        else ctx.clearRect(0, 0, canvasElement.width, canvasElement.height)
    }
})

window.addEventListener('resize', function (evt) {
    w_width = evt.target.innerWidth
    w_height = evt.target.innerHeight
})

window.addEventListener('beforeunload', function (evt) {
    if (!useSave) {
        GM.setValue('doSnowParticles', '')
        return true
    }

    saveInProgress = true

    let particleList = []
    for (let particle of particles) {
        particleList.push([particle.x, particle.y, particle.size, particle.sX, particle.sY].join('_'))
    }

    GM.setValue('doSnowParticles', particleList.join('|')).then(function () { console.log('doSnow: saved particles..') })
})

let cookieData = document.cookie.split('; ')
for (let cookie of cookieData) {
    if (cookie.startsWith('doSnow')) {
        doSnow = cookie.split('=')[1] === 'false' ? false : true
        document.cookie = 'doSnow=; max-age=-1; samesite=strict; secure'
    }
}

document.cookie = 'doSnow=' + doSnow.toString() + '; domain=ngb.to; path=/; samesite=strict; secure'
initSnowFlake()
 
Grund: Update, letzte Version mit Cookie und anderen Optimierungen
Zuletzt bearbeitet:
Bei mir läuft nach wie vor die Version, die auch schon unter vBulletin lief. Sehe also keinen Grund, irgendwas zu ändern ;)
 
Zurück
Oben