• Hallo liebe Userinnen und User,

    nach bereits längeren Planungen und Vorbereitungen sind wir nun von vBulletin auf Xenforo umgestiegen. Die Umstellung musste leider aufgrund der Serverprobleme der letzten Tage notgedrungen vorverlegt werden. Das neue Forum ist soweit voll funktionsfähig, allerdings sind noch nicht alle der gewohnten Funktionen vorhanden. Nach Möglichkeit werden wir sie in den nächsten Wochen nachrüsten. Dafür sollte es nun einige der Probleme lösen, die wir in den letzten Tagen, Wochen und Monaten hatten. Auch der Server ist nun potenter als bei unserem alten Hoster, wodurch wir nun langfristig den Tank mit Bytes vollgetankt haben.

    Anfangs mag die neue Boardsoftware etwas ungewohnt sein, aber man findet sich recht schnell ein. Wir wissen, dass ihr alle Gewohnheitstiere seid, aber gebt dem neuen Board eine Chance.
    Sollte etwas der neuen oder auch gewohnten Funktionen unklar sein, könnt ihr den "Wo issn da der Button zu"-Thread im Feedback nutzen. Bugs meldet ihr bitte im Bugtracker, es wird sicher welche geben die uns noch nicht aufgefallen sind. Ich werde das dann versuchen, halbwegs im Startbeitrag übersichtlich zu halten, was an Arbeit noch aussteht.

    Neu ist, dass die Boardsoftware deutlich besser für Mobiltelefone und diverse Endgeräte geeignet ist und nun auch im mobilen Style alle Funktionen verfügbar sind. Am Desktop findet ihr oben rechts sowohl den Umschalter zwischen hellem und dunklem Style. Am Handy ist der Hell-/Dunkelschalter am Ende der Seite. Damit sollte zukünftig jeder sein Board so konfigurieren können, wie es ihm am liebsten ist.


    Die restlichen Funktionen sollten eigentlich soweit wie gewohnt funktionieren. Einfach mal ein wenig damit spielen oder bei Unklarheiten im Thread nachfragen. Viel Spaß im ngb 2.0.

NGB LetItSnow [Grease/Tamper]

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
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:
// ==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:

Lokalrunde

Schneehasen-Administrator
Teammitglied

Registriert
13 Juli 2013
Beiträge
66.620
Ort
im Tiefschnee
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.
 

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • 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:

Lokalrunde

Schneehasen-Administrator
Teammitglied

Registriert
13 Juli 2013
Beiträge
66.620
Ort
im Tiefschnee
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.
 

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • 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:

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • Thread Starter Thread Starter
  • #6
Jetzt noch eine neue, winterlichere Version bei der der Schnee liegen bleibt.

Screenshot:


Video:

Und hier das Skript:

Javascript:
// ==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:

Lokalrunde

Schneehasen-Administrator
Teammitglied

Registriert
13 Juli 2013
Beiträge
66.620
Ort
im Tiefschnee
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
 

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • 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.
 

Lokalrunde

Schneehasen-Administrator
Teammitglied

Registriert
13 Juli 2013
Beiträge
66.620
Ort
im Tiefschnee
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.
 

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • 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:
// ==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:

Lokalrunde

Schneehasen-Administrator
Teammitglied

Registriert
13 Juli 2013
Beiträge
66.620
Ort
im Tiefschnee
Ich bin mit der Version, die ich aktuell habe (nicht die aktuellste, die Du gerade gepostet hast), ja zufrieden ;)
 

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • 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:
// ==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:

theSplit

1998
Teammitglied

Registriert
3 Aug. 2014
Beiträge
27.429
  • Thread Starter Thread Starter
  • #13
Hier die neue Version:




Und hier der Code:
Javascript:
// ==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:

Lokalrunde

Schneehasen-Administrator
Teammitglied

Registriert
13 Juli 2013
Beiträge
66.620
Ort
im Tiefschnee
Bei mir läuft nach wie vor die Version, die auch schon unter vBulletin lief. Sehe also keinen Grund, irgendwas zu ändern ;)
 
Oben