Question

I’m using lettering.js to wrap <span> elements around each letter in a string. I’m getting the string using PHP. In the example below, $bellcurve is not yet defined– the example is the approach I imagine might get me to a solution, but really I’m not sure if this is the right way (but that’s the question).

So given that:

$string = "Hey!! Don't be an apple!"

I want to count the characters in that string, then for each character, create a class declaration as shown below, with each value for “top” resulting in an overall bell shape.

My PHP knowledge gets me this far:

    $string = "Hey!! Don't be an apple!";
    $string = str_split($string);
    $i = 1;
    foreach($string as $char){
        echo '.char' . $i . '{top: ' . $bellcurve * $i . 'px}';
        $i++;
    }

For example, a quick try at this done manually looks like this:

span.char1 {top: 20px}
span.char2 {top: 18px}
span.char3 {top: 16px}
span.char4 {top: 15px}
span.char5 {top: 14px}
span.char6 {top: 13px}
span.char7 {top: 12px}
span.char8 {top: 11px}
span.char9 {top: 10px}
span.char10 {top: 10px}
span.char11 {top: 10px}
span.char12 {top: 9px}
span.char13 {top: 9px}
span.char14 {top: 10px}
span.char15 {top: 10px}
span.char16 {top: 10px}
span.char17 {top: 11px}
span.char18 {top: 12px}
span.char19 {top: 13px}
span.char20 {top: 14px}
span.char21 {top: 15px}
span.char22 {top: 16px}
span.char23 {top: 18px}
span.char24 {top: 20px}

What I need to know how to do is create a coefficient ( $bellcurve ) which, when multiplied by $i (the character index), will create a bell curve when iterated over the total number of characters.

Or if there is a better approach, please let me know!

Thanks!

---

Here is the answer converted to PHP from javascript:

<?php
        $string = get('character_slogan');
        $string = str_split($string);
        $count = count($string);
        $pi = pi();
        $c = 1.0;
        $b = $count / 2;
        $piece = sqrt(2*$pi);
        $a = 1 / ($c*$piece);
?>

    <style type="text/css">

<?php 
    $x = 1;
    foreach($string as $char){
        $E = M_E;
        $bellcurve = ($a*$E)-(pow($x-$b, 2)/pow(2*$c, 2));
        echo '.char' . $x . '{top: ' . -$bellcurve . 'px}
        ';
        $x++;
    }
?>
    </style>

Answer 1

You can use the Gaussian function to create a curve resembling a “bell curve”

I’m setting up a, b, c like so:

a = 1/(1.0*(Math.sqrt(2*Math.PI))) // height of the curve's peak ( 1/(σ√(2π)) )
b = letterCount / 2                // position of the center, b = μ (expected value)
c = 1.0                            // width of the "bell", c = σ (variance)

then iterating over the span elements and getting the top “bellPosition” like so

bellPosition = (a*Math.E)-(Math.pow(x-b, 2)/Math.pow(2*c, 2))

you can play with this (especially c to change the variance in the curve)

this example jsfiddle uses javascript to apply the top styles to the span elements, should be easy enough to translate to PHP.