LenweSaralonde/code-hacker-1.markdown

## code-hacker-1.markdown

      
    Raw
  

              code-hacker-1.markdown
            
          
    code hacker 1

A Pen by LenweSaralonde on CodePen.
License.

  
## index.html
<link href="https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise" rel="stylesheet" type="text/css"/>


<body>
  <div id="typedtext"></div>
</body>

## script.js
// set up text to print, each item in array is new line
var aText = `local function renderAnimatedNote(noteFrame, position)
	if not(noteFrame:IsVisible()) then return end

	local speed = noteFrame.animationParams[PARAM.SPEED]
	local isPercussion = noteFrame.animationParams[PARAM.IS_PERCUSSION]

	-- Position
	local x, y
	local width = noteFrame:GetParent():GetWidth()
	local height = noteFrame:GetParent():GetHeight()
	if not(isPercussion) then
		local theta, distance
		theta = noteFrame.animationParams[PARAM.X] * (1 - position / 2) * ANIMATION_ANGLE_RANGE / 2
		theta = min(80, max(-80, theta))
		distance = position * speed * height
		x = sin(theta) * (width / 2 + distance)
		y = cos(theta) * (width / 6 + distance)
	else
		x = noteFrame.animationParams[PARAM.X] * width
		y = noteFrame.animationParams[PARAM.Y] * height
	end
	noteFrame:SetPoint("BOTTOM", x, y)

	-- Rotation, scale and fade
	local anglePosition = (position * 2 - 1) * noteFrame.animationParams[PARAM.ORIENTATION]
	local angle = anglePosition * PI / 4
	local alpha = 1 - position
	local scale = 1 + position * .8
	noteFrame:SetScale(scale)
	noteFrame.texture:SetAlpha(alpha)
	noteFrame.texture:SetRotation(angle)
end`.replace(/\t/g, '    ').split("\n");
var iSpeed = 10; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 10; // start scrolling up at this many lines

var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row

function typewriter()
{
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");

 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 100);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}


typewriter();

## style.css
body {
		font-size: 1em;
		margin: 0;
		font-family: "Courier New";
  margin: 10px;
  /*letter-spacing: 6px;*/
  font-weight: normal;
  background-color: #000000;
  color: #FFFFFF;
}
	<link href="https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise" rel="stylesheet" type="text/css"/>


	<body>
	<div id="typedtext"></div>
	</body>
	// set up text to print, each item in array is new line
	var aText = `local function renderAnimatedNote(noteFrame, position)
	if not(noteFrame:IsVisible()) then return end

	local speed = noteFrame.animationParams[PARAM.SPEED]
	local isPercussion = noteFrame.animationParams[PARAM.IS_PERCUSSION]

	-- Position
	local x, y
	local width = noteFrame:GetParent():GetWidth()
	local height = noteFrame:GetParent():GetHeight()
	if not(isPercussion) then
	local theta, distance
	theta = noteFrame.animationParams[PARAM.X] * (1 - position / 2) * ANIMATION_ANGLE_RANGE / 2
	theta = min(80, max(-80, theta))
	distance = position * speed * height
	x = sin(theta) * (width / 2 + distance)
	y = cos(theta) * (width / 6 + distance)
	else
	x = noteFrame.animationParams[PARAM.X] * width
	y = noteFrame.animationParams[PARAM.Y] * height
	end
	noteFrame:SetPoint("BOTTOM", x, y)

	-- Rotation, scale and fade
	local anglePosition = (position * 2 - 1) * noteFrame.animationParams[PARAM.ORIENTATION]
	local angle = anglePosition * PI / 4
	local alpha = 1 - position
	local scale = 1 + position * .8
	noteFrame:SetScale(scale)
	noteFrame.texture:SetAlpha(alpha)
	noteFrame.texture:SetRotation(angle)
	end`.replace(/\t/g, ' ').split("\n");
	var iSpeed = 10; // time delay of print out
	var iIndex = 0; // start printing array at this posision
	var iArrLength = aText[0].length; // the length of the text array
	var iScrollAt = 10; // start scrolling up at this many lines

	var iTextPos = 0; // initialise text position
	var sContents = ''; // initialise contents variable
	var iRow; // initialise current row

	function typewriter()
	{
	sContents = ' ';
	iRow = Math.max(0, iIndex-iScrollAt);
	var destination = document.getElementById("typedtext");

	while ( iRow < iIndex ) {
	sContents += aText[iRow++] + '<br />';
	}
	destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
	if ( iTextPos++ == iArrLength ) {
	iTextPos = 0;
	iIndex++;
	if ( iIndex != aText.length ) {
	iArrLength = aText[iIndex].length;
	setTimeout("typewriter()", 100);
	}
	} else {
	setTimeout("typewriter()", iSpeed);
	}
	}


	typewriter();
	body {
	font-size: 1em;
	margin: 0;
	font-family: "Courier New";
	margin: 10px;
	/letter-spacing: 6px;/
	font-weight: normal;
	background-color: #000000;
	color: #FFFFFF;
	}