Obfuscator Demos and Source

Text Scrambling Effect Demo

DISCLAIMER: You will see me call these obfuscators. This is not a mistake.

That's what they're actually called. I just don't think as many people would understand what I meant if I said "obfuscator" all the time in the forum post.

My cheat sheet for the values I input for the demos is at the bottom (due to relevance), and the guide to getting an obfuscator into your page is right above that. I hope you find the uses for this as plentiful as I have!

Now, the moment you've all been waiting for…

Regular obfuscator (basic settings, minimal functionality)

Potential uses

Scrambled SCP number

Can be either sped up for less readability or slowed down for more readability.

Hidden text for a digital SCP

This example has been sped up from its regular speed for showcasing purposes.

Redaction that can partially be seen through

Gotta admit, not my best work with this one. It was a sloppy and quick job, but at least it gets the point across.

+ Collapsed cuz I didn't want the others to lag out before you were even looking at this

Hidden text that shows up after a certain amount of time and disappears again

Note: The start-time, end-time and disp-time on this are turned REALLY high, because of the lag it's going to cause when it displays the message I wrote…¹
I regret nothing.

Note 2: You can also make this doubly effective by turning off the looping of the obfuscator.

Footnotes

1. Surprisingly, making it take longer seems to repress the lag by a large margin. My guess is that it's because fewer new characters are being displayed (meaning your browser has to calculate the wrapping again and all) at any given time, so despite animating lots of text for longer, it's better than making it super sudden.

---

• • _
  + How do I get this on a page?- Ohhhh, okay. I think I've got it now.

  The Code

  Separated by programming language for ease of understanding. I've also placed a LOT of comments to help explain everything to do with this.

  If you use this in a page that gets posted to the Foundation site, please list me as a contributor (or something to that effect) in your Author post (and info bar if applicable)! I'm putting this out there so it's available for people to use in their writing of SCP articles or Tales or whatever they want it for, but I'd really appreciate recognition for providing some of the tools used for telling the story.

  That being said, if you'd like my assistance in figuring out some kind of error or want me to add a feature to this/show you how to do something with it, send me a PM on WikiDot. If you want to see other things I can do with code to spruce up your page or text, check out my Demos page for more examples of what I can do!

  The stuff on my Demos page is not an exhaustive list, and I'm fluent in Google, so I can quickly find out how to do something if I don't already know how. I look forward to doing business with you (assuming you haven't already stopped reading out of boredom)!

  Title style

  Centered

  
  [[include :jaonhax:component:obfuscator-title-centered
  |color=#000
  |font-weight=600
  |font-size=22pt
  |delay=0
  |start-time=40
  |end-time=40
  |disp-time=2000
  |loop=true
  |obfu-chars="0123456789█!<>-_\\/[]{}—=+*^?#"
  |phrases=[
  'Obfuscator phrase 1.',
  'Obfuscator phrase 2.',
  'Obfuscator phrase 3.'
  ]
  ]]
  
  

  Normal

  [[include :jaonhax:component:obfuscator-title-normal
  |color=#000
  |font-weight=600
  |font-size=22pt
  |delay=0
  |start-time=40
  |end-time=40
  |disp-time=2000
  |loop=true
  |obfu-chars="0123456789█!<>-_\\/[]{}—=+*^?#"
  |phrases=[
  'Obfuscator phrase 1.',
  'Obfuscator phrase 2.',
  'Obfuscator phrase 3.'
  ]
  ]]
  

  Paragraph Style

  
  [[include :jaonhax:component:obfuscator-paragraph
  |text-before=The start of your paragraph goes here.
  |text-after=And the end of your paragraph goes here.
  |delay=0
  |start-time=40
  |end-time=40
  |disp-time=2000
  |loop=true
  |obfu-chars="0123456789█!<>-_\\/[]{}—=+*^?#"
  |phrases=[
  'Obfuscator phrase 1.',
  'Obfuscator phrase 2.',
  'Obfuscator phrase 3.'
  ]
  ]]
  
  

  ---

  • • _
    + Show Older Versions- Hide Older Versions

    Older Versions

    These are older, larger (in lines) versions of the code, but provide more customizability if you know what you're doing with HTML, CSS, and (for the really old one) Javascript.

    Version 2 (Just HTML and CSS)

    Only pasted Paragraph Style in here, since the HTML is meant to be edited for this version anyways.

    [[html]]
    <body>
    <p>
    <div class="text" style="display: inline"></div>
    </p>
    </body>
    <style>
    <!— Put any CSS code here! —>
    </style>
    <script type="text/javascript">
    obfu_data = {
    "delay":0,
    "start_time":40,
    "end_time":40,
    "disp_time":2000,
    "loop":true,
    "obfu_chars":"0123456789█!<>-_\\/[]{}—=+*^?#",
    "phrases":[
    'Obfuscator phrase 1.',
    'Obfuscator phrase 2.',
    'Obfuscator phrase 3.'
    ]
    }
    </script>
    <script type="text/javascript" src="http://scp-sandbox-3.wikidot.com/local--files/jaonhax/obfuscator.js"></script>
    [[/html]]
    
    

    Version 1 (HTML, CSS, and JavaScript)

    This one's REALLY big. Only use this if you want to add functionality to the JavaScript code that my current code doesn't have. Oh, and if you know what you're doing! JavaScript is a very temperamental programming language that can take several minutes to debug even a simple error (such as accidentally placing an extra curly bracket). This does also not have the convenient separation of all of the variables from the code itself. Proceed with caution unless you're okay with getting your hands dirty. Consider yourself warned.

    {{
    [[html]]
    <div class="container">
    <div class="text"></div>
    </div>
    <style>
    <!— Put any CSS code here! —>
    </style>
    <script>
    class TextScramble {
    constructor(el) {
    this.el = el
    this.chars = '0123456789█!<>-_\\/[]{}—=+*^?#' // This is the obfu_chars variable I normally have.
    this.update = this.update.bind(this)
    }
    setText(newText) {
    const oldText = this.el.innerText
    const length = Math.max(oldText.length, newText.length)
    const promise = new Promise((resolve) => this.resolve = resolve)
    this.queue = []
    for (let i = 0; i < length; i++) {
    const from = oldText[i] || ''
    const to = newText[i] || ''
    const start = Math.floor(Math.random() * 40) // This is where the start_time variable is normally used.
    const end = start + Math.floor(Math.random() * 40) // This is where the end_time variable is normally used.
    this.queue.push({ from, to, start, end })
    }
    cancelAnimationFrame(this.frameRequest)
    this.frame = 0
    this.update()
    return promise
    }
    update() {
    let output = ''
    let complete = 0
    for (let i = 0, n = this.queue.length; i < n; i++) {
    let { from, to, start, end, char } = this.queue[i]
    if (this.frame >= end) {
    complete++
    output += to
    } else if (this.frame >= start) {
    if (!char || Math.random() < 0.28) {
    char = this.randomChar()
    this.queue[i].char = char
    }
    output += `<span class="dud">${char}</span>`
    } else {
    output += from
    }
    }
    this.el.innerHTML = output
    if (complete === this.queue.length) {
    this.resolve()
    } else {
    this.frameRequest = requestAnimationFrame(this.update)
    this.frame++
    }
    }
    randomChar() {
    return this.chars[Math.floor(Math.random() * this.chars.length)]
    }
    }

    const phrases = [ // You can probably guess that this is the phrases variable.
    'Obfuscator phrase 1.',
    'Obfuscator phrase 2.',
    'Obfuscator phrase 3.'
    ]

    const el = document.querySelector('.text')
    const fx = new TextScramble(el)

    let counter = 0

    const next = () => {
    fx.setText(phrases[counter]).then(() => {
    setTimeout(next, 2000) // This is where the disp_time variable is normally used.
    })

    // The loop variable is not programmed into this version. This version automatically loops.
    // If you want it to NOT loop, edit this next line so it does not include the "% phrases.length".
    // This will cause it to not loop your phrases.
    counter = (counter + 1) % phrases.length
    }

    setTimeout(next, 0) // This is where the delay variable is normally used.
    </script>
    [[/html]]
    }}

---

+ Values used for the demos

Here you go, the constant values used for the demo obfuscators! Enjoy!

Regular Obfuscator:

Title style
delay = 3500 // All demos have delays relative to when they appear, since I'm using the flow component for that nice appearing sequence.
start-time = 40
end-time = 40
disp-time = 1400
loop = true // Will be true for all demos, as I wanted them to repeat for visibility purposes.
obfu-chars = '0123456789█!<>-_\\/[]{}—=+*^?#'

Scrambled SCP Number:

Paragraph style
delay = 5000
start-time = 40
end-time = 40
disp-time = 25
loop = true
obfu-chars = '0123456789█!<>-_\\/[]{}—=+*^?#'

Hidden Text for a Digital SCP:

Paragraph style
delay = 6500
start-time = 500
end-time = 500
disp-time = 5000
loop = true
obfu-chars = '0123456789█!<>-_\\/[]{}—=+*^?#'

Redaction That Can Partially be Seen Through:

Paragraph style
delay = 8000
start-time = 40
end-time = 40
disp-time = 0
loop = true
obfu-chars = '█'

Hidden Text that Shows Up…:

Paragraph style // Also set height, max-height, and overflow to keep it from shifting the entire rest of the page offscreen.
delay = 3000 // Under a collapsible because I did bad things with it…
start-time = 1000
end-time = 1000
disp-time = 120000
loop = true
obfu-chars = '0123456789█!<>-_\\/[]{}—=+*^?#'

---