-
I posted to delicious.com
Blog - jQuery Address 1.2 - Ajax Crawling, URL building and more
May 5 2010, 6:32am | Comments »
-
I posted to i-create.org
WebGL TweetTank Built with C3DL Part 2
http://i-create.org/2010/04/26/webgl-tweettank-built-with-c3dl-part-2/
I have added the ability to search twitter and re-populate the fish tank. So now you can place a search in like “Tool” or “Toledo” or whatever you query it will pull results from twitter. I have noticed this experiment is resource intensive. In part three of this experiment I will look for ways to tidy up the code make it more reusable and less resource intensive. I also noticed in c3dl they already have a nice random number function built in I will have to try and use that in the future. I am also curious to see if I can’t use this library to augment the Processing.JS library I noticed the same group at Secena is also working on this library I believe they have ported most of the new functions. I also added two sliders with jQuery to control the camera I am currently using an orbitCamera I think I will change this in the future to utilize a free camera and use the animateAxis function to animate around a vector with an angle. Currently I am using the Yaw and Pitch functions of the orbitCamera of course it looks kind of awkward to spin it. I will try to find ways to speed this experiment up, fix the picking result to be more sensitive, clean up the look and feel of it for part three. If there is a part four it will be about making the fish bound to the sphere and maybe making them so the swim back and forth not in a straight line. I might also be making a similar experiment with away3Dlite and the hype framework with flash this weekend. This has been a fun experiment to play around with. Maybe Adobe should allocate some of their resources to compiling to javascript and using the webGL and DirectX for IE with the canvas tag (Even though It isn’t as fast as flash and doensn’t display the same across browsers). Haxe I believe currently does this to some extent I am not sure how fast the results are but seems to me their are Sandy3D experiments on Google Experiments.
Here is the code for the experiment:
var CANVAS_WIDTH = $(window).width; var CANVAS_HEIGHT = $(window).height()*2; $('#tweetTank').width(CANVAS_WIDTH); $('#tweetTank').height(CANVAS_HEIGHT); $('#tweetTank').css('display','block'); var arrayTwit; var schooloffish; var fishArray = []; var bubblesArray = []; var bubbles; var objectsHit = ""; var objectSelected; var cam; var searchInt = 0; function mRandom(r) { var randomInt = Math.floor(Math.random() * r + 1); return randomInt; } c3dl.addModel("fish.dae"); c3dl.addModel("OceanSphere.dae"); // The program main function canvasMain(canvasName) { // Create new c3dl.Scene object scn = new c3dl.Scene(); scn.setCanvasTag(canvasName); // Create GL context renderer = new c3dl.WebGL(); renderer.addTexture("bubble.jpg"); renderer.createRenderer(this); // Attach renderer to the scene scn.setRenderer(renderer); scn.init(canvasName); //the isReady() function tests whether or not a renderer //is attached to a scene. If the renderer failed to //initialize this will return false but only after you //try to attach it to a scene. if (renderer.isReady()) { // Create a Collado object that // will contain a imported // model of something to put // in the scene. var schooloffish = mRandom(100); var ocean = new c3dl.Collada(); ocean.init("OceanSphere.dae"); ocean.setAngularVel(new Array(0, .00005, 0)); ocean.scale([20.0, 20.0, 20.0]); ocean.setPickable(false); scn.addObjectToScene(ocean); //console.log(arrayTwit.length); for (var i = 0; i < arrayTwit.length; i++) { //console.log(arrayTwit[i]); fishArray[i] = new c3dl.Collada(); fishArray[i].init("fish.dae"); fishArray[i].yaw(45.0); fishArray[i].ID = "Fish" + i; //fish.roll(25.0); fishArray[i].pitch(-86.4); fishArray[i].setLinearVel([0,0,-2]); fishArray[i].url = "http://twitter.com/" + arrayTwit[i].from_user; //fish.setPosition([1200, 100, 700]); fishArray[i].setPosition([mRandom(1200), mRandom(900), mRandom(1500)]); scn.addObjectToScene(fishArray[i]); } for (var i = 0; i < 7; i++) { bubblesArray[i] = new c3dl.ParticleSystem(); bubblesArray[i].setMinVelocity([-2, 0, -2]); bubblesArray[i].setMaxVelocity([2, 25, 2]); bubblesArray[i].setMinLifetime(5.3); bubblesArray[i].setMaxLifetime(10.7); bubblesArray[i].setMinColor([0, 0, 0.3, 0]); bubblesArray[i].setMaxColor([0, 0.3, 0.5, 1]); bubblesArray[i].setSrcBlend(c3dl.ONE); bubblesArray[i].setDstBlend(c3dl.ONE); bubblesArray[i].setMinSize(0.5); bubblesArray[i].setMaxSize(5.0); bubblesArray[i].setTexture("bubble.gif"); bubblesArray[i].setAcceleration([0, 9, 0]); bubblesArray[i].setEmitRate(40); bubblesArray[i].init(150); bubblesArray[i].setPosition([mRandom(1200), mRandom(100), mRandom(700)]); scn.addObjectToScene(bubblesArray[i]); } // Create a camera //var cam = new c3dl.FreeCamera(); // scn.setCamera(cam); cam = new c3dl.OrbitCamera(); cam.setFarthestDistance(2000); //cam.pitch(90); cam.setPosition(new Array(3000.0, 300.0, 200.0)); //cam.setLookAtPoint(new Array(0.0, 0.0, 0.0)); cam.setOrbitPoint(new Array(800.0, 100.0, 200.0)); cam.setClosestDistance(200); cam.setDistance(900); //cam.pitch(1); scn.setCamera(cam); // Start the scene scn.startScene(); scn.setPickingCallback(goLink); //scn.setKeyboardCallback(onKeyUp, onKeyDown); scn.setMouseCallback(mouseWheel); } } function goLink(pickingObj) { var objectsHit = pickingObj.getObjects(); if( objectsHit.length > 0 ) { var sepiaEffect = new c3dl.Effect(); sepiaEffect.init(c3dl.effects.SEPIA); window.open(objectsHit[0].url, '_blank'); objectsHit[0].setEffect(sepiaEffect); for(var i = 0; i < arrayTwit.length; i++){ if(objectsHit[0].url == scn.getObj(i).url) scn.getObject(i).setEffect(sepiaEffect); } } } function mouseWheel(event) { var delta = 0; const ZOOM_SENSITIVITY = 3; // Chromium if (event.wheelDelta) { delta = -event.wheelDelta / 20; } // Minefield else if (event.detail) { delta = event.detail * 4; } else { if (keyD) { cam.yaw(delta * ZOOM_SENSITIVITY / 100); } else { // towards user if (-delta * ZOOM_SENSITIVITY < 0) { cam.goFarther(-1 * -delta * ZOOM_SENSITIVITY); } // towards screen else { cam.goCloser(-delta * ZOOM_SENSITIVITY); } } } } function twitterSearch(searchTag) { //console.log(searchTag); arrayTwit = ""; arrayTwit = new Array(); $.getJSON("http://search.twitter.com/search.json?q=" + searchTag + "&callback=?", function(data) { $.each(data.results, function(i, item) { twitSeach = item; arrayTwit.push(twitSeach); }); if(searchInt >=1){ searchInt++; $('#TweetTankBowl').html(""); $('#TweetTankBowl').html('<canvas style="display: block;" id="tweetTank" width="800" height="800"></canvas>'); $('#tweetTank').width(CANVAS_WIDTH); $('#tweetTank').height(CANVAS_HEIGHT); $('#tweetTank').css('display','block'); canvasMain("tweetTank"); }else{ searchInt++; c3dl.addMainCallBack(canvasMain, "tweetTank"); } }); } $(document).ready(function() { twitterSearch("fishing"); sliderGo(); }); function goTwitter(){ var tweet = $('#tweetSearchTxt').val(); twitterSearch(tweet); } function sliderGo(){ $("#sliderVeritcal").slider({ step: 0.15, min: 0.00, max:360.00, orientation: 'vertical', slide: function(event, ui) {
cam.pitch(ui.value); } }); $("#sliderHorizontal").slider({ step: 0.15, min: 0.00, max:360.00, slide: function(event, ui) {
cam.yaw(ui.value); } }); }Launch Experiment / Download Code
April 26 2010, 9:27pm | Comments »
-
I posted to delicious.com
jQuery, ASP.NET, and Browser History
April 11 2010, 10:19am | Comments »
-
I posted to delicious.com
reallysimplehistory - Project Hosting on Google Code
http://code.google.com/p/reallysimplehistory/
- Tags:
- javascript
- ajax
- browser
March 31 2010, 7:02am | Comments »
-
I posted to delicious.com
Orangoo Labs - GoogieSpell
http://orangoo.com/labs/GoogieSpell/
- Tags:
- javascript
- ajax
- tools
March 31 2010, 6:08am | Comments »
-
I posted to i-create.org
Next Chapter
http://i-create.org/2010/03/28/next-chapter/
Well the good news is I am officially a Rich Internet Application Developer! So I will mainly be focusing on creating reusable controls with JavaScript and ActionScript for the retail store Hayneedle! I will miss working with all the wonderful developers at infoGroup. I was fortunate enough to start their as a Graphical User Interface Developer and end as a Software Engineer. I have learned a tremendous amount from working at infoGroup and will miss all of them. I will also never forget all the knowledge they shared with me. C# is an awesome language and so is Ruby on Rails! I will continue to use both in the future! While working at infoGroup I worked on numerous projects 2 newer versions of Salesgenie.com and one entirely new product SalesDesk a real-time CRM. I utilized jQuery, CSS, ASP.NET 2.0, ASP.NET 3.5 (MVC), and Ruby on Rails. I will continue to learn and use new languages at my new post at Hayneedle I will be using ColdFusion, JavaScript, and ActionScript. I think it will be fun to have a change of pace and I am really excited to be a part of their development / user experience group! I believe this job will enable me to use my creative side a little more; so I think that will be enjoyable and I think I will learn a tremendous amount by working with the new team they are an extremely innovative group. It is always good to challenge yourself and change things, and have new experiences, I will miss infoGroup. This month I have been extremely busy I am currently working with two clients in the Omaha Metro area and I will be teaming up with MinorWhiteStudios on future projects so I am excited to be working with them. I believe they are the best photographers / designers in town. I hadn’t talked to Scott in years and it was nice of him to call me. His whole team is extremely creative and I belive I will also learn a great deal working with them! I have really been sitting around and reading a great deal at home. I don’t get out much anymore. I find myself playing with new technologies on my off time. I have also been working on a game for a client of mine and hopefully I can have a demo of that soon! Lately I have been playing around with ProcessingJS and here is a new experiment. This example uses a font from DaFont. This example also borrows from this example thanks to @F1LT3R for sharing this example. You know it’s fun using Processing with jQuery I will continue to watch and play with this framework because its fun:)
var jData; var objClik = new Array(); var colorPool = new Array("#075997","#079714","#970744","#079792","#970769","#078497", "#970718", "#075197", "#079733","#079707"); function loadFeed(){ jQuery.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=2432dea4d4d6afa353c425dc5e542fb4&_render=json&_callback=?", function(json) { jData = json; jQuery('#YahooPipe').width(jQuery(window).width()); jQuery('#YahooPipe').height(jQuery(window).height()); loadProcessing(); }); } jQuery(document).ready(function() { try{ if(!jQuery.browser.msie){ loadFeed(); }else{ jQuery('#result').text("Sorry you are using Internet Explorer an inferior browser please utilize a next generation browser like FireFox, Chrome, or Safari!"); } }catch(err){ jQuery('#result').text("Sorry Pipe Failed to Load Please refresh and try again:)"); } }); function loadProcessing(){ var script = document.getElementById( 'linkScript' ).text; var canvas = document.getElementById( 'YahooPipe' ); Processing(canvas, script); } void setup() { strokeWeight(0); noStroke(); size(jQuery(window).width(),jQuery(window).height()); background(255); smooth(); } PFont font = loadFont("Champagne_Limousines.svg"); void draw() { for(i = 0; i < jData.value.items.length; i++){ int pointX = random(0,jQuery(window).width()); int pointY = random(0,jQuery(window).height()); int fSize = random(30,65); objClik.push(new alinked(pointX,pointY,fSize,jData.value.items[i].link, jData.value.items[i].title, colorPool[Math.floor(Math.random() * colorPool.length)],colorPool[Math.floor(Math.random() * colorPool.length)])); } forLinks('render'); exit(); } void forLinks(mode){ for(int i=0;i < objClik.length; i++){ t=objClik[i]; switch(mode){ case 'render':objClik[i].render();break; case 'detect': mouseX > objClik[i].x &&
mouseY > objClik[i].y && mouseY < objClik[i].y+t.size && mouseX < objClik[i].x+t.anchorWidth? objClik[i].rollOver(): objClik[i].rollOut(); break; case 'clicks':objClik[i].mouseOver?objClik[i].clicked():0; } } } void mouseMoved(){forLinks('detect');} void mouseClicked(){forLinks('clicks');} class alinked{ boolean mouseOver; color current_col; float anchorWidth; alinked(float x, float y, float size, String href,String anchor, Color text_col, Color hover_col) { href=href;
anchor=anchor;
this.size=size; this.x=x,this.y=y; text_col=text_col; hover_col=hover_col; current_col=text_col; mouseOver=false;
} void render(){ anchorWidth=font.width(anchor)*size;
clear(x,y,anchorWidth,size+4); textFont(font,size); fill(current_col); mouseOver?rect(x,y+size+2,anchorWidth,1):0; text(anchor,x,y);
} void rollOver(){ if(!mouseOver){
mouseOver=true; cursor('pointer'); current_col=hover_col; render(); } } void rollOut(){ if(mouseOver){ mouseOver=false; cursor('auto'); current_col=text_col; render(); } } void clicked(){ link(href, "_blank"); } }Launch Example / Download Example This experiment simply grabs a yahoo pipe parses the JSON and then adds the links to the Canvas tag. It is really amazing to see all the progress of HTML5 and all the cool new JavaScript libraries. Please note internet explorer users will not be able to view this example because IE does not support the Canvas tag:(. Sometimes I have also noticed it fails to capture the JSON but I have a try catch so it should tell you to try again. I am not going to add a JAVA version of this project simply because I don’t have time too right now. I noticed ProcessingJS is now supporting some of the 3D functions of Processing (JAVA) I haven’t had time to play with them lately but I will make a data mashup with it as soon as I can find the time. I am also still working on my new Portfolio the never ending project maybe within the next two weeks I will actually post it! I am looking forward to CS5 and purchasing Flash Builder 4! I have also noticed that with libraries like Scripty2 it might be a fun to port over some Flash Games (AS2) utilize JavaScript so they can be enjoyed with out a plugin! Sandy3D haXe 2 JavaScript Examples Corona SDK SproutCore JavaScript FrameWork Scripty2 Excellent C++ RayCaster Example Ajax RayCaster Example XNA C# RayCaster
March 28 2010, 8:54pm | Comments »
-
I posted to delicious.com
jmaps #jQuery + #Google Maps
http://code.google.com/p/jmaps/
- Tags:
- javascript
- jquery
- ajax
- googlemaps
- maps
March 23 2010, 7:16am | Comments »
-
I posted to delicious.com
scripty2: for a more delicious web
March 10 2010, 7:25pm | Comments »
-
I posted to delicious.com
Douglas Crockford: “Crockford on #JavaScript — Episode IV: The Metamorphosis of #Ajax” (93 min.) #YUI
- Tags:
- RIA
- javascript
- ajax
March 9 2010, 5:56pm | Comments »
-
I posted to delicious.com
#jQuery Get issues with IE Caching
http://www.sitecrafting.com/blog/ajax-ie-caching-issues/
March 9 2010, 9:09am | Comments »
-
I posted to delicious.com
Scott Hanselman's Computer Zen - Hanselminutes Podcast 198 - Reactive Extensions for .NET (Rx) with Erik Meijer
February 4 2010, 8:34am | Comments »
-
I posted to delicious.com
Reactive Extensions for .NET (Rx)
http://msdn.microsoft.com/en-us/devlabs/ee794896.aspx
February 4 2010, 8:34am | Comments »
-
I posted to delicious.com
Solutions to 5 Common Ajax Problems | Webdesigner Depot
http://www.webdesignerdepot.com/2009/12/solutions-to-5-common-ajax-problems/
- Tags:
- tutorial
- javascript
- ajax
- usability
December 18 2009, 1:37pm | Comments »
-
I posted to delicious.com
Ajaxian » JavaScript Liquid Image FX
http://ajaxian.com/archives/javascript-liquid-image-fx
- Tags:
- javascript
- ajax
- scripts
September 24 2009, 2:13pm | Comments »
-
I posted to delicious.com
Using jQuery Ajax methods in ASP.NET MVC: $.get() and $.getJSON() vs. $.post() - Scott's Blog
September 21 2009, 2:46pm | Comments »
-
I posted to delicious.com
120+ Javascript, Ajax, jQuery Mega Toolbox | tripwire magazine
http://www.tripwiremagazine.com/tools/developer-toolbox/javascript-ajax-jquery-mega-toolbox.html
- Tags:
- programming
- javascript
- ajax
August 28 2009, 8:31am | Comments »
-
I posted to delicious.com
ASP.NET AJAX nested updatePanel modalPopup funkiness - Stack Overflow
http://stackoverflow.com/questions/151241/asp-net-ajax-nested-updatepanel-modalpopup-funkiness
Conditional
July 9 2009, 12:53pm | Comments »
-
I posted to delicious.com
Problem with AJAX Modal Popup + Validation Summary - ASP.NET Forums
http://forums.asp.net/p/1082751/1612011.aspx
Modal PopUp Validation Maddness
- Tags:
- ASPNET
- javascript
- ajax
July 8 2009, 2:53pm | Comments »
-
I posted to delicious.com
Matt Berseth: ModalPopup with Multiple Cancel Buttons
http://mattberseth.com/blog/2007/10/modalpopup_with_multiple_cance.html
Working with Modals in Ajax ASP.NET really looking forward to MVC and jQuery!
July 8 2009, 6:21am | Comments »
-
I posted to delicious.com
20+ Ready to Use Auto Completion Scripts | Dzine Blog
http://dzineblog.com/2009/07/20-ready-to-use-auto-completion-scripts.html
- Tags:
- development
- javascript
- jquery
- ajax
July 7 2009, 5:01am | Comments »