A fun little Newsletter generator I am working on that uses KnockOut and jQuery in magical and new amazing ways! It is kinda ugly right now, because it is still in process–so shut up.

Knockout: (you only get a sample, you don’t need to see all of the crazy)

// let's list out the images to select
function f_imgBig()
{
	var newArray = Array();
	newArray.push(

	"images/366_A.jpg",
	"images/366_B.jpg",
	"images/366_C.jpg",
	"images/366_D.jpg",
	"images/366_E.jpg",
	"images/366_none.jpg"
	);

	return newArray;
}

function f_imgBigSel()
{
	var newArray = Array();
	newArray = f_imgBig() ;

	return newArray[0];
}
// now let's add in the viewModel and sorting
var viewModel = {}; // always outside of the document load
$(function() {

<!-- drag drop sort -->
	$( "#leftA,#leftB,#leftC" ).sortable({ connectWith: ['#leftA','#leftB','#leftC'] });

<!-- VIEW -->

viewModel = {
	postList_L: ko.observableArray( leftPost() ),
        addPost_L: function () {
	this.postList_L.push({
		img	: f_imgBig(),
		imgSel	: ko.observable(f_imgBigSel())
	});},

ko.applyBindings(viewModel);

});

Here is the html template.
(yes I am using tables, don’t worry about it)

<pre><!-- LEFT -->
    <table data-bind="visible: postList_L().length > 0" bgcolor="#FFFFFF">

        <tr><td id="module_area">

        <ul data-bind='template: { xxxxxxxx id="leftB" ></ul>

        <ul data-bind='template: { name: "postTemplate_L", foreach: postList_L }' id="leftA" ></ul>

        <ul data-bind='template: { xxxxxxxx id="leftC" ></ul>

        </td></tr>

    </table>

    <input name="AddPost" type="image" src="_css/img/20.gif" data-bind="click: addPost_L" id="addPost">

<!-- post -->
	<script type="text/html" id="postTemplate_L">
        <li style="background:#EFE;" id="sel">
        <div id="mov"></div>
		<input name="del" type="image" src="_css/img/20.gif" 
data-bind="click: function(){ viewModel.removePost_L($data); }, 
visible: viewModel.postList_L().length > 1" id="del">

		<input type="image" data-bind="attr: { src: imgSel }" />
		<select data-bind="options: img, value: imgSel" />

        </li>
    </script></pre>

The “how-to” follows:

The drop-down is a standard drop down nav, however the left and right arrows at the top allow you to change pages using your keyboard as well.

the nav:
The array breaks out into [page name,page title]

var arr = Array(
['1a','Immitto reprobo'],
['1b','Eeros enim'],
['1c','Aex inhibeo'],
['1d','Dolore nisl ut'],
['1e','Dloquor volutpat'],

['2a','Vel suscipit'],
['2b','Sin proprius'],
['2c','Natu lucidus'],
['2d','Delenit lobortis'],
['2e','Vel vel'],
['2f','Nisl, dignissim'],
['2g','Piusto elit'],

['3a','Pignissim capto'],
['3b','Ulciscor'],
['3c','Papto odio abdo'],
['3d','Sibidem hos si esse']
); 

// add the links to the navigation
function writeArr( i, length ){
for( i; i < length; i++ )
{
// I added line breaks for easy reading.
document.write( '<li id="verse"><a href="#"
num="'+(i+"s")+'" page="'+arr[i][0]+'"
title="'+arr[i][1]+'" >'+arr[i][1]+'</a></li>' );
}
};

The Drop-Down itself is based off of Vimeo’s design, the tutorial is [ here ].

<li><div id="nav"></div>
<ul>
     <li id="chapter">
        <img class="corner_inset_left"
src="_css/nav/corner_inset_left.png"/>
Chapter One
       <img class="corner_inset_right"
src="_css/nav/corner_inset_right.png"/>
   </li>
       <script>writeArr(0,5);</script>
   <li id="chapter">Chapter Two</li>
       <script>writeArr(5,12);</script>
   <li id="chapter">Chapter Three</li>
      <script>writeArr(12,16);</script>
   <li class="last">
     <img class="corner_left" src="_css/nav/corner_left.png"/>
     <img class="middle" src="_css/nav/dot.gif"/>
     <img class="corner_right"  src="_css/nav/corner_right.png"/>
   </li>
 </ul>
</li>

As you can see the actual content is pulled from our JavaScript Array. (I just wanted to keep it all tidy).

Here is the navigation control:

<script>
var pageNum = 0;

// you can move the array code to here..

// wait for when the doc is ready
$(function(){
	$("#verse a").click(function() {
		pageNumArr = $(this).attr("num").split('s');
		pageNum = pageNumArr[0];
		nextprev();
	});

// always update the title text on the page
	$('#title').html( arr[0][1] );

// next & previous icons at the top
	$('#prev').click(function(){
		goNext();
	});

	$('#next').click(function(){
		goNext();
	});

// keyboard arrow keys
	$('body').keyup(function (event) {

		if (event.keyCode == 37) {
		  goNext();
		} else if (event.keyCode == 39) {
		  goPrev();
		}
	});

// control what page you are going to
	function goNext(){
		pageNum--;
		if( pageNum < 0 ){ pageNum = arr.length-1 };
		nextprev();
	}

	function goPrev(){
		pageNum++;
		if( pageNum >= arr.length ){ pageNum = 0 };
		nextprev();
	}

// make sure all the nav functions go to the same place
	function nextprev(){
		var title= arr[pageNum][1];
		var page= arr[pageNum][0];
// changes page header -->
		$("#title").replaceWith('<span id="title">'+title+'</span>');
// add new page -->
		$("#page").load( "pages/"+page+".html" );

		$("a").removeClass("sel");
		$("a[num^="+pageNum+"s]").addClass("sel");
/* FUN FACT:
	using $("a[num^="+pageNum+"]") will select "1" and "10,11,12,.."
	as well, because they all start with the number "1". Which is
	kinda fucked up, so I added a text character at the end "s" so
	"1s" is now unique.
	"11s" and/or "21s" are not effected, but if I had "1s1" then
	I'd be back to the drawing board.
*/
	}

// this will update the nav for the first use.
	nextprev();
});

</script>

Firstly, let’s add some sliders:
 Next we attach the code:
(This is what I added to the Anchor Point, because the Position was pathed out elsewhere.)

<pre>segMin = .3; //minimum segment duration
segMax = .7; //maximum segment duration
slideMin = effect("MinValS")("Slider");
slideMax = effect("MaxValS")("Slider");
minVal = [slideMin, slideMin];
maxVal = [slideMax, slideMax];

seedRandom(index,true);
segDur = random(segMin, segMax);
seed = Math.floor(time/segDur);
segStart = seed*segDur;
seedRandom(seed,true);
startVal =  random(minVal,maxVal);
seedRandom(seed+1,true);endVal = random(minVal,maxVal);

ease(time,segStart,segStart + segDur, startVal, endVal);

At the end of it I parented all of the objects to a new null, so I can tweak the X/Y to adjust for the offsets of the code.

A while ago, I was talking (probably here somewhere) about increasing the speed of FOR loops in ActionSctipt.

var arr:Array = new Array("kittens","bunnies","puppies","whores dressed like french maids");
// slow:
for( var i:uint = 0; i < arr.length(); i++ )
{
trace( "Things that are cute: " + arr[i] + ". ");
}

// fast:
var i:uint = 0;
var l:uint = arr.length();
for( i; i < l; i++ )
 {
      trace( "Things that are cute: " + arr[i] + ". ");
 }

// personal favorite (although I need to test the speed)
var i:uint = 0;
for( i in arr )
{
trace( "Things that are cute: " + arr[i] + ". ");
}

They both do the same thing, but with the variables pre-defined, the second FOR is faster. It isn’t trying to run a function AND calculate the length of an an array.

For jQuery, the effect is the same — my guess is that is a global coding thing.
Although, it goes counter to conventional thinking (having more code on the page = slower load), the truth is: cleanly defined variables will produce faster (efficient) processing, even if it does mean more lines of code.

// slow
$(".cuteStuff").each( function()
{
    for ( var arr, i = -1; arr = $arr[++i] )
    {
        document.write( "Things that are cute: " + arr[i] + ". ");
    }
});
// faster
var $arr = $("#cuteStuff"); <!-- ID's are faster then CLASSES -->
for ( var arr, i = -1; arr = $arr[++i] )
{
    document.write( "Things that are cute: " + arr[i] + ". ");
}

Here the main difference is that in the “slow” example, you are calling a function every time the page reads a div tag. (Think of it like, each div tag is a glass of beer, you find it drink it, and move on to the next.)
In the “fast” example you are putting all the div tags into a make-shift array and just chugging it. (This time you are pouring each div tag into a beer bong and now chug them all at once.)

The major issue is that creating an ASE file is stupid.
3Ds Max makes .ASE files, and 3Ds Max is for fools.

Thanks to SupaMonke (again) for saving my skin. Harry, found a plugin, it didn’t work, so he rebuilt it. He is insane.

So…

1. Download ND3D
2. Build your file in Modo
3. Use Harry’s plugin
4. Export an ASE file
5. Open the ASE file in TextEdit
1. copy the “*MESH_VERTEX” bit with all the numbers
2. convert the numbers into an array [0,-0.3400 0.6099,0.3464],[1,-0.3400,0.5570,0.5080],[...
6. Duplicate one of the objects in the de/nulldesign/nd3d/objects/ folder.
7. Name it whatever, and remember to name the class and constructor to match...
8. Drop the array in (ok, I'm just getting tired writing this, I'm going to coast along for the rest of this... read my other post [here] to figure this shit out… I’m going to ramble).
9. Oh, hi- you’re the phone guy right?
10. That’s what it says on my van!
11. Great, well, why don’t you just come in and get started… I’ve been having problems with my phone connection.
12. Hmmm, well it looks to me someone put this weird plastic thing where the tin can goes.
13. Ya! You’ve got quite the sense of humor.
14. No, seriously… what is this?
15. You’re kidding right? It’s a phone…
16. pulling wires, and a loud SHOCK
17. HOLLY MOTHER! That thing bit me! What are all these little colored metal things?
18. Those are wires… phone wires- for the phone. And I think it shocked you… with e-lec-tricity
19. E-lect-what now?
20. End Scene.
21. …and you’re done!

…fuck it, here is a picture of a frenchman with a mustache:

After the jump is the AS2 code I’ve been playing with.

It’s pretty rough, but you’ll get the idea.
It attaches to a movie clip named “bg”.

import flash.display.BitmapData;
import flash.display.DisplayObject.blendMode;
import flash.display.BlendMode;
import flash.filters.*;
// NOISE -----------------------------

var bmp3:BitmapData = new BitmapData(Stage.width, Stage.height );
var mc3:MovieClip = bg.createEmptyMovieClip("noise3", bg.getNextHighestDepth() );
mc3.attachBitmap(bmp3, this.getNextHighestDepth());
bmp3.noise( 11, 22, 234, 15, true);
mc3.blendMode = 13;
mc3._alpha = 70;

var bmp:BitmapData = new BitmapData(Stage.width, Stage.height );
var mc:MovieClip = bg.createEmptyMovieClip("noise", bg.getNextHighestDepth() );
mc.attachBitmap(bmp, this.getNextHighestDepth());
var randomNum:Number = Math.floor(Math.random() * 50 ) + 50;
bmp.perlinNoise( 351, 91, 15, randomNum, false, false, 8, true);

mc.blendMode = 14;
mc._alpha = 70;

var bmp2:BitmapData = new BitmapData(Stage.width, Stage.height );
var mc2:MovieClip = bg.createEmptyMovieClip("noise2", bg.getNextHighestDepth() );
mc2.attachBitmap(bmp2, this.getNextHighestDepth());
var randomNum2:Number = Math.floor(Math.random() * 50 ) + 50;
bmp2.perlinNoise( 96, 277, 15, randomNum2, false, true, 8, true);
mc2.blendMode = 13;
mc2._alpha = 70;

var ds:DropShadowFilter = new DropShadowFilter( 3, -45, 0x000000, 100, 2, 2, 3, 3, false, false, false );
mc.filters = [ds];

for help with filters click [here].

On a slightly side note, I’m more and more intregued with Faraday’s lines of force… not because of the science, but because Faraday was “math illiterate” and had to just draw out what he thought was going on. The response from the scientific community was that ART > MATH, being able to diagram what you are thinking apparently trumps equations.