├── AppleScript └── mute │ ├── README.txt │ ├── bin │ └── mute.app │ │ └── Contents │ │ ├── Info.plist │ │ ├── MacOS │ │ └── applet │ │ ├── PkgInfo │ │ └── Resources │ │ ├── Scripts │ │ └── main.scpt │ │ ├── applet.icns │ │ ├── applet.rsrc │ │ └── description.rtfd │ │ └── TXT.rtf │ └── src │ └── mute.scpt ├── Arduino ├── FlashArduinoGettingStarted │ ├── arduino │ │ └── FlashBlink │ │ │ └── FlashBlink.pde │ └── flash │ │ ├── FlashBlink.as │ │ ├── FlashBlink.fla │ │ └── FlashBlink_CS3.fla ├── MultibyteIntFromFlash │ ├── flex │ │ ├── MultiByteIntFromFlash.mxml │ │ └── MultiByteIntFromFlashClass.as │ └── sketch │ │ └── MultibyteIntFromFlash │ │ └── MultibyteIntFromFlash.pde └── MultibyteNumbersFromFlash │ ├── flex │ ├── MultiByteFromFlash.mxml │ └── MultiByteFromFlashClass.as │ └── sketch │ └── MultiByteFromFlash │ └── MultiByteFromFlash.pde ├── CSS ├── CSS3TransitionsAnimation │ ├── README.txt │ ├── index.html │ ├── scripts │ │ ├── main.js │ │ └── modernizr-custom.js │ └── styles │ │ └── styles.css ├── CSS3TransitionsTiming │ ├── README.txt │ ├── index.html │ ├── index_b.html │ ├── scripts │ │ ├── Pool.js │ │ ├── main.js │ │ ├── main_b.js │ │ └── modernizr-custom.js │ └── styles │ │ └── styles.css └── CSS3TransitionsWriter │ ├── README.txt │ ├── data │ ├── mesh.json │ └── outside.json │ ├── index.html │ ├── scripts │ ├── Pool.js │ ├── main.js │ └── modernizr-custom.js │ └── styles │ └── styles.css ├── Flash └── VectorHWAExample │ ├── Square.as │ ├── VectorHWAExample-app.xml │ ├── VectorHWAExample.as │ └── VectorHWAExample.fla ├── HTML5 ├── EaselJS │ ├── HelloWorld │ │ ├── README │ │ ├── index.html │ │ └── scripts │ │ │ └── easel.js │ ├── PixelFlow │ │ ├── README │ │ ├── images │ │ │ ├── image1.jpg │ │ │ ├── image2.jpg │ │ │ ├── image3.jpg │ │ │ ├── image4.jpg │ │ │ ├── image5.jpg │ │ │ ├── image6.jpg │ │ │ ├── image7.jpg │ │ │ └── image8.jpg │ │ ├── index.html │ │ ├── scripts │ │ │ ├── Drone.js │ │ │ ├── MathUtil.js │ │ │ ├── PixelData.js │ │ │ ├── Target.js │ │ │ ├── easel.js │ │ │ ├── main.js │ │ │ ├── modernizr-1.6.min.js │ │ │ └── xui-2.0.0.min.js │ │ └── styles │ │ │ ├── small.css │ │ │ └── styles.css │ ├── Spirals │ │ ├── index.html │ │ ├── scripts │ │ │ ├── Drone.js │ │ │ ├── MathUtil.js │ │ │ ├── easel.js │ │ │ ├── main.js │ │ │ ├── modernizr-1.6.min.js │ │ │ └── xui-2.0.0.min.js │ │ └── styles │ │ │ └── styles.css │ ├── Voronoi │ │ ├── README.txt │ │ ├── index.html │ │ ├── scripts │ │ │ ├── easel.js │ │ │ └── main.js │ │ └── styles │ │ │ └── styles.css │ └── follow │ │ ├── README │ │ ├── index.html │ │ ├── scripts │ │ ├── Drone.js │ │ ├── MathUtil.js │ │ ├── Target.js │ │ ├── easeljs.js │ │ └── main.js │ │ └── styles │ │ └── styles.css ├── SlideView │ ├── images │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ └── 4.png │ ├── index.html │ ├── scripts │ │ └── main.js │ └── styles │ │ └── styles.css └── canvas │ └── exportWithBackgroundColor │ ├── README │ ├── images │ └── transparent_graphic.png │ ├── index.html │ ├── scripts │ └── main.js │ └── styles │ └── styles.css ├── JavaScript └── QuadTree │ ├── README.txt │ ├── examples │ ├── collision.html │ ├── draw.html │ ├── insert.html │ ├── insert_bounds.html │ ├── retrieve.html │ ├── retrieve_bounds.html │ ├── scripts │ │ ├── Circle.js │ │ ├── Circle2.js │ │ ├── collision.js │ │ ├── draw.js │ │ ├── easel.js │ │ ├── insert.js │ │ ├── insert_bounds.js │ │ ├── retrieve.js │ │ └── retrieve_bounds.js │ └── styles │ │ └── styles.css │ └── src │ └── QuadTree.js ├── NoMoreCopies └── NoMoreCopies.zip ├── Phidgets └── PhidgetsHelloWorld │ ├── PhidgetsHelloWorld-app.xml │ ├── PhidgetsHelloWorld.as │ └── PhidgetsHelloWorld.fla └── README.txt /AppleScript/mute/README.txt: -------------------------------------------------------------------------------- 1 | mute 2 | http://www.mikechambers.com/blog/2011/05/23/toggling-mute-on-mac-os-x-with-non-mac-keyboards-and-alfred/ 3 | 4 | Simple AppleScript Script / Application that toggles whether the system audio is muted. 5 | 6 | Useful for using with Alfred / Quicksilver to quickly mute / un-mute system Audio. 7 | 8 | -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleAllowMixedLocalizations 6 | 7 | CFBundleDevelopmentRegion 8 | English 9 | CFBundleExecutable 10 | applet 11 | CFBundleIconFile 12 | applet 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | mute 17 | CFBundlePackageType 18 | APPL 19 | CFBundleSignature 20 | aplt 21 | LSMinimumSystemVersionByArchitecture 22 | 23 | x86_64 24 | 10.6 25 | 26 | LSRequiresCarbon 27 | 28 | WindowState 29 | 30 | dividerCollapsed 31 | 32 | eventLogLevel 33 | -1 34 | name 35 | ScriptWindowState 36 | positionOfDivider 37 | 333 38 | savedFrame 39 | 185 157 602 597 0 0 1920 1178 40 | selectedTabView 41 | result 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/MacOS/applet: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/AppleScript/mute/bin/mute.app/Contents/MacOS/applet -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/PkgInfo: -------------------------------------------------------------------------------- 1 | APPLaplt -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/Resources/Scripts/main.scpt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/AppleScript/mute/bin/mute.app/Contents/Resources/Scripts/main.scpt -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/Resources/applet.icns: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/AppleScript/mute/bin/mute.app/Contents/Resources/applet.icns -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/Resources/applet.rsrc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/AppleScript/mute/bin/mute.app/Contents/Resources/applet.rsrc -------------------------------------------------------------------------------- /AppleScript/mute/bin/mute.app/Contents/Resources/description.rtfd/TXT.rtf: -------------------------------------------------------------------------------- 1 | {\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350 2 | {\fonttbl} 3 | {\colortbl;\red255\green255\blue255;} 4 | } -------------------------------------------------------------------------------- /AppleScript/mute/src/mute.scpt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/AppleScript/mute/src/mute.scpt -------------------------------------------------------------------------------- /Arduino/FlashArduinoGettingStarted/arduino/FlashBlink/FlashBlink.pde: -------------------------------------------------------------------------------- 1 | /* 2 | Simple example that controls the blinking of the LED 3 | connected to digital PIN 13. 4 | 5 | Created by Mike Chambers 6 | http://www.mikechambers.com 7 | 8 | You can hook up an external LED by connecting an LED 9 | to PIN 13 and GND (make sure that the anode (long leg) is 10 | connected to PING 13 and the cathode (short leg) is connected 11 | to GND. 12 | 13 | The on board LED is also connected to PIN 13, and will 14 | be controlled by this program. 15 | 16 | Example is released under the following license: 17 | 18 | The MIT License 19 | 20 | Copyright (c) 2010 Mike Chambers 21 | 22 | Permission is hereby granted, free of charge, to any person obtaining a copy 23 | of this software and associated documentation files (the "Software"), to deal 24 | in the Software without restriction, including without limitation the rights 25 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 26 | copies of the Software, and to permit persons to whom the Software is 27 | furnished to do so, subject to the following conditions: 28 | 29 | The above copyright notice and this permission notice shall be included in 30 | all copies or substantial portions of the Software. 31 | 32 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 33 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 34 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 35 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 36 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 37 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 38 | THE SOFTWARE. 39 | */ 40 | 41 | 42 | //The digital pin that the LED is connected to 43 | #define LED_PIN 13 44 | 45 | //incoming command to toggle LED blinking state 46 | #define TOGGLE_LED_STATE 't' 47 | 48 | #define EOL_DELIMITER "\n" 49 | 50 | //int to hold incoming byte when we read it 51 | int incoming = 0; 52 | 53 | //whether the led should blink 54 | boolean shouldBlinkLED = false; 55 | 56 | //setup function. called when the program first runs 57 | void setup() 58 | { 59 | //start listening for incoming messages on the serial port 60 | //at 9600 baud 61 | Serial.begin(9600); 62 | 63 | //Send a message out that the program is initializing 64 | Serial.print("INITIALIZING"); 65 | 66 | //Flash looks for this to know when the message is done 67 | //See the comments in the Flash file for more info. 68 | Serial.print(EOL_DELIMITER); 69 | 70 | //set the pin more for the digital ping that 71 | //the LED is connected to (can be INPUT or OUTPUT) 72 | pinMode(LED_PIN, OUTPUT); 73 | 74 | //blink the LED 5 times so we can visually see that the 75 | //program is running 76 | blinkLED(5); 77 | 78 | //Send out a message that initialization is complete. 79 | Serial.print("READY"); 80 | Serial.print(EOL_DELIMITER); 81 | } 82 | 83 | //program loop. Called each timer tick (really fast) 84 | void loop() 85 | { 86 | //check if we should blink the LED 87 | if(shouldBlinkLED) 88 | { 89 | //if so, blink the LED 90 | blinkLED(1); 91 | } 92 | 93 | //check if there are any bytes available 94 | //on the Serial port 95 | if(Serial.available() > 0) 96 | { 97 | //read a single byte. 98 | incoming = Serial.read(); 99 | 100 | 101 | //Calling Serial.read() remove the byte from the Serial 102 | //buffer. In this case, if there are multiple bytes that 103 | //were sent, the next one will be handled on the next loop. 104 | //You could also grab it by calling Serial.read() again 105 | 106 | //check if the incoming byte was a command to toggle 107 | //the state of the LED blinking 108 | if(incoming == TOGGLE_LED_STATE) 109 | { 110 | //it was a command 111 | 112 | //toggle the state of the LED Blinking 113 | shouldBlinkLED = !shouldBlinkLED; 114 | 115 | //send a message to the Serial port with the 116 | //new LED Blink state 117 | 118 | Serial.print("LED BLINK STATE: "); 119 | if(shouldBlinkLED) 120 | { 121 | Serial.print("ON"); 122 | } 123 | else 124 | { 125 | Serial.print("OFF"); 126 | } 127 | 128 | Serial.print(EOL_DELIMITER); 129 | 130 | //note, if you are using XMLSocket in Flash to read 131 | //the string data over the socket then we also have to send 132 | //a null byte with the following command: 133 | // 134 | //Serial.print(0, BYTE); 135 | // 136 | //However, in general, it is going to be easier, and more flexible 137 | //to use the Socket class (and not the XMLSocket class). 138 | } 139 | } 140 | } 141 | 142 | //function to blink the LED 143 | void blinkLED(int count) 144 | { 145 | //loop through 146 | for(int i = 0; i < count; i++) 147 | { 148 | //turn LED on 149 | digitalWrite(LED_PIN, HIGH); 150 | 151 | //wait 500 ms 152 | delay(500); 153 | 154 | //turn LED off 155 | digitalWrite(LED_PIN, LOW); 156 | 157 | //wait 500 ms 158 | delay(500); 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /Arduino/FlashArduinoGettingStarted/flash/FlashBlink.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/Arduino/FlashArduinoGettingStarted/flash/FlashBlink.fla -------------------------------------------------------------------------------- /Arduino/FlashArduinoGettingStarted/flash/FlashBlink_CS3.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/Arduino/FlashArduinoGettingStarted/flash/FlashBlink_CS3.fla -------------------------------------------------------------------------------- /Arduino/MultibyteIntFromFlash/flex/MultiByteIntFromFlash.mxml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Arduino/MultibyteIntFromFlash/flex/MultiByteIntFromFlashClass.as: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2010 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | import flash.events.Event; 26 | import flash.events.IOErrorEvent; 27 | import flash.events.ProgressEvent; 28 | import flash.events.SecurityErrorEvent; 29 | import flash.net.Socket; 30 | import flash.utils.Endian; 31 | 32 | private static const PORT:uint = 5331; 33 | private static const SERVER_ADDRESS:String = "127.0.0.1"; 34 | 35 | private var socket:Socket; 36 | 37 | private function onApplicationComplete():void 38 | { 39 | //only allow numbers, period and minus sign 40 | numberInput.restrict = ".0-9\\-"; 41 | 42 | socket = new Socket() 43 | socket.addEventListener(Event.CONNECT, onConnect); 44 | socket.addEventListener(Event.CLOSE, onClose); 45 | socket.addEventListener( IOErrorEvent.IO_ERROR, onIOError ); 46 | socket.addEventListener( SecurityErrorEvent.SECURITY_ERROR, onSecurityError ); 47 | socket.addEventListener( ProgressEvent.SOCKET_DATA, onSocketData ); 48 | 49 | //disable until we connect 50 | this.enabled = false; 51 | 52 | //this is important! If you dont set this to 53 | //little endian, then arduino wont understand 54 | //the bytes 55 | socket.endian = Endian.LITTLE_ENDIAN; 56 | 57 | socket.connect(SERVER_ADDRESS, PORT); 58 | } 59 | 60 | private function onSendClick():void 61 | { 62 | //get the number that the user input 63 | var out:Number = Number(numberInput.text); 64 | 65 | //write it as a Short to the server. 66 | //this is important as the arduino int is 2 bytes 67 | //not 4 68 | socket.writeShort(out); 69 | 70 | //if number is too big, then it will overflow on 71 | //the arduino, and probably come back as 0 72 | } 73 | 74 | private function onSocketData(e:ProgressEvent):void 75 | { 76 | //note, you need to watch that the entire message from the server is here 77 | //it might not have all arrived. 78 | //We should be fine here since we are only receiving 4 bytes 79 | var data:String = socket.readUTFBytes( socket.bytesAvailable ); 80 | log("onSocketData : " + data); 81 | } 82 | 83 | 84 | /***** socket handlers *******/ 85 | 86 | private function onConnect(e:Event):void 87 | { 88 | log("Connected"); 89 | this.enabled = true; 90 | } 91 | 92 | private function onClose(e:Event):void 93 | { 94 | log("Socket Closed"); 95 | this.enabled = false; 96 | } 97 | 98 | private function onIOError(e:IOErrorEvent):void 99 | { 100 | log("onIOError : " + e.text); 101 | this.enabled = false; 102 | } 103 | 104 | private function onSecurityError(e:SecurityErrorEvent):void 105 | { 106 | log("onSecurityError : " + e.text); 107 | this.enabled = false; 108 | } 109 | 110 | private function log(msg:String):void 111 | { 112 | outputField.text += msg + "\n"; 113 | } 114 | -------------------------------------------------------------------------------- /Arduino/MultibyteIntFromFlash/sketch/MultibyteIntFromFlash/MultibyteIntFromFlash.pde: -------------------------------------------------------------------------------- 1 | /* 2 | Example Created by Mike Chambers 3 | http://www.mikechambers.com 4 | 5 | with info from Arduino Forums: 6 | http://www.arduino.cc/cgi-bin/yabb2/YaBB.pl?num=1207242838 7 | 8 | The MIT License 9 | 10 | Copyright (c) 2010 Mike Chambers 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy 13 | of this software and associated documentation files (the "Software"), to deal 14 | in the Software without restriction, including without limitation the rights 15 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 16 | copies of the Software, and to permit persons to whom the Software is 17 | furnished to do so, subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in 20 | all copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 24 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 25 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 26 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 27 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 28 | THE SOFTWARE. 29 | */ 30 | 31 | //union that we will use a union 32 | //to construct the int 33 | //from the individual bytes 34 | //sent from Flash / ActionScript 35 | union u_tag { 36 | byte b[2]; 37 | int ival; 38 | } u; 39 | 40 | int value; 41 | 42 | void setup() 43 | { 44 | Serial.begin(9600); 45 | } 46 | 47 | void loop() 48 | { 49 | 50 | //this example assumes only int / short 51 | //are being sent. So we just look for data in 2 byte 52 | //increments 53 | if(Serial.available() > 1) 54 | { 55 | //read the 4 bytes into the union 56 | u.b[0] = Serial.read(); 57 | u.b[1] = Serial.read(); 58 | 59 | //retrieve the int value of the union 60 | //(based on the bytes passed in) 61 | value = u.ival; 62 | 63 | //send the reconstructed int back to the Serial 64 | //flash 65 | Serial.print(value, DEC); 66 | 67 | //write out a null byte, (the Flash Socket 68 | //class looks for this) 69 | Serial.print(0, BYTE); 70 | } 71 | 72 | } 73 | -------------------------------------------------------------------------------- /Arduino/MultibyteNumbersFromFlash/flex/MultiByteFromFlash.mxml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Arduino/MultibyteNumbersFromFlash/flex/MultiByteFromFlashClass.as: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2010 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | import flash.events.Event; 26 | import flash.events.IOErrorEvent; 27 | import flash.events.ProgressEvent; 28 | import flash.events.SecurityErrorEvent; 29 | import flash.net.Socket; 30 | import flash.utils.Endian; 31 | 32 | private static const PORT:uint = 5331; 33 | private static const SERVER_ADDRESS:String = "127.0.0.1"; 34 | 35 | private var socket:Socket; 36 | 37 | private function onApplicationComplete():void 38 | { 39 | //only allow numbers, period and minus sign 40 | numberInput.restrict = ".0-9\\-"; 41 | 42 | socket = new Socket() 43 | socket.addEventListener(Event.CONNECT, onConnect); 44 | socket.addEventListener(Event.CLOSE, onClose); 45 | socket.addEventListener( IOErrorEvent.IO_ERROR, onIOError ); 46 | socket.addEventListener( SecurityErrorEvent.SECURITY_ERROR, onSecurityError ); 47 | socket.addEventListener( ProgressEvent.SOCKET_DATA, onSocketData ); 48 | 49 | //disable until we connect 50 | this.enabled = false; 51 | 52 | //this is important! If you dont set this to 53 | //little endian, then arduino wont understand 54 | //the bytes 55 | socket.endian = Endian.LITTLE_ENDIAN; 56 | 57 | socket.connect(SERVER_ADDRESS, PORT); 58 | } 59 | 60 | private function onSendClick():void 61 | { 62 | //get the number that the user input 63 | var out:Number = Number(numberInput.text); 64 | 65 | //write it as a float to the server. 66 | //this is important. 67 | socket.writeFloat(out); 68 | 69 | //if number is too big, then it will overflow on 70 | //the arduino, and probably come back as 0.00000 71 | } 72 | 73 | private function onSocketData(e:ProgressEvent):void 74 | { 75 | //note, you need to watch that the entire message from the server is here 76 | //it might not have all arrived. 77 | //We should be fine here since we are only receiving 4 bytes 78 | var data:String = socket.readUTFBytes( socket.bytesAvailable ); 79 | log("onSocketData : " + data); 80 | } 81 | 82 | 83 | /***** socket handlers *******/ 84 | 85 | private function onConnect(e:Event):void 86 | { 87 | log("Connected"); 88 | this.enabled = true; 89 | } 90 | 91 | private function onClose(e:Event):void 92 | { 93 | log("Socket Closed"); 94 | this.enabled = false; 95 | } 96 | 97 | private function onIOError(e:IOErrorEvent):void 98 | { 99 | log("onIOError : " + e.text); 100 | this.enabled = false; 101 | } 102 | 103 | private function onSecurityError(e:SecurityErrorEvent):void 104 | { 105 | log("onSecurityError : " + e.text); 106 | this.enabled = false; 107 | } 108 | 109 | private function log(msg:String):void 110 | { 111 | outputField.text += msg + "\n"; 112 | } 113 | -------------------------------------------------------------------------------- /Arduino/MultibyteNumbersFromFlash/sketch/MultiByteFromFlash/MultiByteFromFlash.pde: -------------------------------------------------------------------------------- 1 | /* 2 | Example Created by Mike Chambers 3 | http://www.mikechambers.com 4 | 5 | with info from Arduio Forums: 6 | http://www.arduino.cc/cgi-bin/yabb2/YaBB.pl?num=1207242838 7 | 8 | The MIT License 9 | 10 | Copyright (c) 2010 Mike Chambers 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining a copy 13 | of this software and associated documentation files (the "Software"), to deal 14 | in the Software without restriction, including without limitation the rights 15 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 16 | copies of the Software, and to permit persons to whom the Software is 17 | furnished to do so, subject to the following conditions: 18 | 19 | The above copyright notice and this permission notice shall be included in 20 | all copies or substantial portions of the Software. 21 | 22 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 23 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 24 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 25 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 26 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 27 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 28 | THE SOFTWARE. 29 | */ 30 | 31 | //union that we will use 32 | //the construct the floast 33 | //from the individual bytes 34 | //sent from Flash / ActionScript 35 | union u_tag { 36 | byte b[4]; 37 | float ival; 38 | } u; 39 | 40 | float value; 41 | 42 | void setup() 43 | { 44 | Serial.begin(9600); 45 | } 46 | 47 | void loop() 48 | { 49 | 50 | //this example assumes only floats / Numbers 51 | //are being sent. So we just look for data in 4 byte 52 | //increments 53 | if(Serial.available() > 3) 54 | { 55 | 56 | //read the 4 bytes into the union 57 | u.b[0] = Serial.read(); 58 | u.b[1] = Serial.read(); 59 | u.b[2] = Serial.read(); 60 | u.b[3] = Serial.read(); 61 | 62 | //retrieve the float value of the union 63 | //(based on the bytes passed in) 64 | value = u.ival; 65 | 66 | //send the reconstructed float back to the Serial 67 | //flash 68 | Serial.print(value, DEC); 69 | 70 | //write out a null byte, (the Flash Socket 71 | //class looks for this) 72 | Serial.print(0, BYTE); 73 | } 74 | 75 | } 76 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsAnimation/README.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | Animation example using CSS3 Transitions and JavaScript 24 | 25 | Created by Mike Chambers 26 | http://www.mikechambers.com 27 | mikechambers@gmail.com -------------------------------------------------------------------------------- /CSS/CSS3TransitionsAnimation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Animation with CSS3 Transitions and JavaScript 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
Press mouse button down and move mouse.
54 | 55 | 56 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsAnimation/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var mousePos = {x:0, y:0}; 26 | var intervalId = 0; 27 | function init() 28 | { 29 | var info = document.getElementById("info"); 30 | 31 | //check for support for CSS Transitions 32 | if(!Modernizr.csstransitions) 33 | { 34 | info.innerHTML = "The page requires support for CSS Transitions in order to run correctly. "+ 35 | "Unfortunately, it appears that your browser does not support this features"; 36 | 37 | return; 38 | 39 | } 40 | 41 | //figure out if we are on a touch device 42 | if(Modernizr.touch) 43 | { 44 | //touch so use touch events 45 | document.ontouchstart = onTouchStart; 46 | document.ontouchend = onTouchEnd; 47 | 48 | info.innerHTML = "Touch screen and move finger."; 49 | } 50 | else 51 | { 52 | //not touch, so use mouse events 53 | document.onmousedown = onMouseDown; 54 | document.onmouseup = onMouseUp; 55 | } 56 | } 57 | 58 | //timer for creating new divs. Probably should use requestAnimationFrame here 59 | function onTick() 60 | { 61 | var box = createBox(); 62 | 63 | //note, if we try to animate the box right after we create it, it wont animate 64 | //that is why we have to wait 1 ms to try to animate it. 65 | setTimeout(animatePosition, 20, box, mousePos.x, mousePos.y); 66 | } 67 | 68 | //called when a touch point moves 69 | function onTouchMove(e) 70 | { 71 | //prevent default so we dont move / scroll the screen 72 | e.preventDefault(); 73 | 74 | //we only support single touch. Get the touch point 75 | var touch = e.changedTouches[0]; 76 | 77 | //update the mouse / point position 78 | updateMousePos(touch.pageX, touch.pageY); 79 | } 80 | 81 | //called when a touch point starts 82 | function onTouchStart(e) 83 | { 84 | //prevent default so page doesnt move / scroll 85 | e.preventDefault(); 86 | 87 | //we only support single touch. Get the touch point 88 | var touch = e.changedTouches[0]; 89 | 90 | //update the mouse position 91 | updateMousePos(touch.pageX, touch.pageY); 92 | 93 | //start listening for touch move events 94 | document.ontouchmove = onTouchMove; 95 | 96 | //start the timer to create new boxes 97 | startTimer(); 98 | } 99 | 100 | //called when a touch point ends 101 | function onTouchEnd(e) 102 | { 103 | //prevent default so page doesnt move / scroll 104 | e.preventDefault(); 105 | 106 | //stop listening for touch move events 107 | document.onTouchMove = null; 108 | 109 | //stop the timer / creating divs 110 | stopTimer(); 111 | } 112 | 113 | 114 | //called when the mouse button is pressed 115 | function onMouseDown(e) 116 | { 117 | //update mouse position 118 | updateMousePos(e.pageX, e.pageY); 119 | 120 | //listen for mouse move event 121 | document.onmousemove = onMouseMove; 122 | 123 | //start the timer to create the dics 124 | startTimer(); 125 | } 126 | 127 | //called when the mouse moves 128 | function onMouseMove(e) 129 | { 130 | //update mouse position 131 | updateMousePos(e.pageX, e.pageY); 132 | } 133 | 134 | //starts the timer (to create divs) 135 | function startTimer() 136 | { 137 | intervalId = setInterval(onTick, 10); 138 | } 139 | 140 | //stop the timer 141 | function stopTimer() 142 | { 143 | clearInterval(intervalId); 144 | } 145 | 146 | //called when the mouse button is released 147 | function onMouseUp(e) 148 | { 149 | //stop listening for mousemove event 150 | document.onmousemove = null; 151 | 152 | //stop timer / creating divs 153 | stopTimer(); 154 | } 155 | 156 | //updates / stores mouse position 157 | function updateMousePos(x, y) 158 | { 159 | mousePos.x = x; 160 | mousePos.y = y; 161 | } 162 | 163 | //animates the specified div 164 | function animatePosition(box, x, y) 165 | { 166 | //make sure the mouse has moved from starting coords 167 | if(mousePos.x == 0 && mousePos.y == 0) 168 | { 169 | return; 170 | } 171 | 172 | 173 | //these are the properties the div will animate to 174 | box.style.opacity = "0.1"; 175 | box.style.left = x + "px"; 176 | box.style.top = y + "px"; 177 | 178 | //The actual animation is controlled by the CSS 179 | //-webkit-transition: all 0.7s ease; 180 | } 181 | 182 | //creates a div (actually a circle) 183 | function createBox() 184 | { 185 | var box = document.createElement("div"); 186 | box.className = "box"; 187 | document.body.appendChild(box); 188 | 189 | //position in middle of screen 190 | box.style.left = (window.innerWidth / 2) + "px"; 191 | box.style.top = (window.innerHeight / 2) + "px"; 192 | 193 | return box; 194 | } 195 | 196 | window.onload = init; -------------------------------------------------------------------------------- /CSS/CSS3TransitionsAnimation/scripts/modernizr-custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.0.4 (Custom Build) | MIT & BSD 2 | * Contains: opacity | csstransforms | csstransforms3d | csstransitions | touch | teststyles | testprop | testallprops | prefixes | domprefixes 3 | */ 4 | ;window.Modernizr=function(a,b,c){function B(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return A(d,b)}function A(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function z(a,b){return!!~(""+a).indexOf(b)}function y(a,b){return typeof a===b}function x(a,b){return w(m.join(a+";")+(b||""))}function w(a){j.cssText=a}var d="2.0.4",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["­",""].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},t,u={}.hasOwnProperty,v;!y(u,c)&&!y(u.call,c)?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],c)};var C=function(c,d){var f=c.join(""),g=d.length;s(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9,e.csstransforms3d=j.csstransforms3d.offsetLeft===9},g,d)}([,["@media (",m.join("touch-enabled),("),h,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"touch","csstransforms3d"]);o.touch=function(){return e.touch},o.opacity=function(){x("opacity:.55");return/^0.55$/.test(j.opacity)},o.csstransforms=function(){return!!A(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},o.csstransforms3d=function(){var a=!!A(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in f.style&&(a=e.csstransforms3d);return a},o.csstransitions=function(){return B("transitionProperty")};for(var D in o)v(o,D)&&(t=D.toLowerCase(),e[t]=o[D](),r.push((e[t]?"":"no-")+t));w(""),i=k=null,e._version=d,e._prefixes=m,e._domPrefixes=n,e.testProp=function(a){return A([a])},e.testAllProps=B,e.testStyles=s;return e}(this,this.document); -------------------------------------------------------------------------------- /CSS/CSS3TransitionsAnimation/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | body 26 | { 27 | background-color:#333333; 28 | 29 | font-family: sans-serif; 30 | font-size: 12px; 31 | color: #CCCCCC; 32 | 33 | -moz-user-select: -moz-none; 34 | -khtml-user-select: none; 35 | -webkit-user-select: none; 36 | -o-user-select: none; 37 | user-select: none; 38 | } 39 | 40 | .box 41 | { 42 | width:50px; 43 | height:50px; 44 | background-color:#FFFFFF; 45 | position:absolute; 46 | left:0px; 47 | top:0px; 48 | opacity:0.0; 49 | /*-webkit-transform:translateZ(0);*/ 50 | -webkit-border-radius: 100px; 51 | -moz-border-radius: 100px; 52 | border-radius: 100px; 53 | 54 | -webkit-transition: all 0.7s ease; 55 | -moz-transition: all 0.7s ease; 56 | -o-transition: all 0.7s ease; 57 | transition: all 0.7s ease; 58 | } -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/README.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | Examples Showing Timing Issues when using CSS Transitions 24 | 25 | Created by Mike Chambers 26 | http://www.mikechambers.com 27 | mikechambers@gmail.com -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Animation with CSS3 Transitions and JavaScript 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
Click to create and animate a shape.
54 | 55 | 56 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/index_b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Animation with CSS3 Transitions and JavaScript 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
Click to create and animate a shape.
54 | 55 | 56 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/scripts/Pool.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | function Pool() 26 | { 27 | 28 | } 29 | 30 | Pool.prototype._objs = []; 31 | 32 | Pool.prototype.return = function(obj) 33 | { 34 | //todo: make sure it is not already in pool 35 | 36 | if(!obj) 37 | { 38 | return; 39 | } 40 | 41 | this._objs.push(obj); 42 | } 43 | 44 | Pool.prototype.get = function(obj) 45 | { 46 | if(this._objs.length == 0) 47 | { 48 | if(this.creationFunction == null) 49 | { 50 | return null; 51 | } 52 | 53 | return this.creationFunction(); 54 | } 55 | 56 | return this._objs.pop(); 57 | } 58 | 59 | Pool.prototype.creationFunction = null; 60 | 61 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | var box; 25 | function init() 26 | { 27 | var info = document.getElementById("info"); 28 | //check for support for CSS Transitions 29 | if(!Modernizr.csstransitions) 30 | { 31 | info.innerHTML = "The page requires support for CSS Transitions in order to run correctly. "+ 32 | "Unfortunately, it appears that your browser does not support this features"; 33 | 34 | return; 35 | 36 | } 37 | 38 | //figure out if we are on a touch device 39 | if(Modernizr.touch) 40 | { 41 | //touch so use touch events 42 | document.ontouchend = onMouseClick; 43 | 44 | //replace Click with Touch 45 | info.innerHTML = info.innerHTML.replace("Click", "Foo"); 46 | } 47 | else 48 | { 49 | //not touch, so use mouse events 50 | document.onclick = onMouseClick; 51 | } 52 | } 53 | 54 | function onMouseClick() 55 | { 56 | if(box) 57 | { 58 | //remove existing box from dom 59 | document.body.removeChild(box); 60 | } 61 | 62 | //create the div 63 | box = document.createElement("div"); 64 | box.className = "box"; 65 | 66 | //add to dom 67 | document.body.appendChild(box); 68 | 69 | //position in middle / left of screen 70 | box.style.left = "10px"; 71 | box.style.top = (window.innerHeight / 2) + "px"; 72 | 73 | //set position we want div to animate to (using the CSS Transition) 74 | //NOTE : This will not animate, but will instead just be moved / drawn in the final position 75 | //need to delay this call by 20 ms 76 | box.style.left = (window.innerWidth - 100) + "px"; 77 | } 78 | 79 | window.onload = init; -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/scripts/main_b.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var box; 26 | function init() 27 | { 28 | var info = document.getElementById("info"); 29 | //check for support for CSS Transitions 30 | if(!Modernizr.csstransitions) 31 | { 32 | info.innerHTML = "The page requires support for CSS Transitions in order to run correctly. "+ 33 | "Unfortunately, it appears that your browser does not support this features"; 34 | 35 | return; 36 | 37 | } 38 | 39 | //figure out if we are on a touch device 40 | if(Modernizr.touch) 41 | { 42 | //touch so use touch events 43 | document.ontouchend = onMouseClick; 44 | 45 | //replace Click with Touch 46 | info.innerHTML = info.innerHTML.replace("Click", "Foo"); 47 | } 48 | else 49 | { 50 | //not touch, so use mouse events 51 | document.onclick = onMouseClick; 52 | } 53 | } 54 | 55 | function onMouseClick() 56 | { 57 | if(box) 58 | { 59 | //remove existing div from dom 60 | document.body.removeChild(box); 61 | } 62 | 63 | //create the div 64 | box = document.createElement("div"); 65 | box.className = "box"; 66 | 67 | //add to dom 68 | document.body.appendChild(box); 69 | 70 | //position in middle / left of screen 71 | box.style.left = "10px"; 72 | box.style.top = (window.innerHeight / 2) + "px"; 73 | 74 | //delay updating position so it will animate correctly 75 | setTimeout(moveBox, 20, box); 76 | } 77 | 78 | function moveBox(box) 79 | { 80 | box.style.left = (window.innerWidth - 100) + "px"; 81 | } 82 | 83 | window.onload = init; -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/scripts/modernizr-custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.0.4 (Custom Build) | MIT & BSD 2 | * Contains: opacity | csstransforms | csstransforms3d | csstransitions | touch | teststyles | testprop | testallprops | prefixes | domprefixes 3 | */ 4 | ;window.Modernizr=function(a,b,c){function B(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return A(d,b)}function A(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function z(a,b){return!!~(""+a).indexOf(b)}function y(a,b){return typeof a===b}function x(a,b){return w(m.join(a+";")+(b||""))}function w(a){j.cssText=a}var d="2.0.4",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["­",""].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},t,u={}.hasOwnProperty,v;!y(u,c)&&!y(u.call,c)?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],c)};var C=function(c,d){var f=c.join(""),g=d.length;s(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9,e.csstransforms3d=j.csstransforms3d.offsetLeft===9},g,d)}([,["@media (",m.join("touch-enabled),("),h,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"touch","csstransforms3d"]);o.touch=function(){return e.touch},o.opacity=function(){x("opacity:.55");return/^0.55$/.test(j.opacity)},o.csstransforms=function(){return!!A(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},o.csstransforms3d=function(){var a=!!A(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in f.style&&(a=e.csstransforms3d);return a},o.csstransitions=function(){return B("transitionProperty")};for(var D in o)v(o,D)&&(t=D.toLowerCase(),e[t]=o[D](),r.push((e[t]?"":"no-")+t));w(""),i=k=null,e._version=d,e._prefixes=m,e._domPrefixes=n,e.testProp=function(a){return A([a])},e.testAllProps=B,e.testStyles=s;return e}(this,this.document); -------------------------------------------------------------------------------- /CSS/CSS3TransitionsTiming/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | body 26 | { 27 | background-color:#333333; 28 | 29 | font-family: sans-serif; 30 | font-size: 12px; 31 | color: #CCCCCC; 32 | 33 | -moz-user-select: -moz-none; 34 | -khtml-user-select: none; 35 | -webkit-user-select: none; 36 | -o-user-select: none; 37 | user-select: none; 38 | } 39 | 40 | .box 41 | { 42 | width:50px; 43 | height:50px; 44 | background-color:#FFFFFF; 45 | position:absolute; 46 | /*-webkit-transform:translateZ(0);*/ 47 | -webkit-border-radius: 100px; 48 | -moz-border-radius: 100px; 49 | border-radius: 100px; 50 | 51 | -webkit-transition: all 0.7s ease; 52 | -moz-transition: all 0.7s ease; 53 | -o-transition: all 0.7s ease; 54 | transition: all 0.7s ease; 55 | } -------------------------------------------------------------------------------- /CSS/CSS3TransitionsWriter/README.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | Animation example using CSS3 Transitions and JavaScript 24 | 25 | Created by Mike Chambers 26 | http://www.mikechambers.com 27 | mikechambers@gmail.com -------------------------------------------------------------------------------- /CSS/CSS3TransitionsWriter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | Animation with CSS3 Transitions and JavaScript 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
Press any key to begin.
55 | 56 | 57 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsWriter/scripts/Pool.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | function Pool() 26 | { 27 | 28 | } 29 | 30 | Pool.prototype._objs = []; 31 | 32 | Pool.prototype.return = function(obj) 33 | { 34 | //todo: make sure it is not already in pool 35 | 36 | if(!obj) 37 | { 38 | return; 39 | } 40 | 41 | this._objs.push(obj); 42 | } 43 | 44 | Pool.prototype.get = function(obj) 45 | { 46 | if(this._objs.length == 0) 47 | { 48 | if(this.creationFunction == null) 49 | { 50 | return null; 51 | } 52 | 53 | return this.creationFunction(); 54 | } 55 | 56 | return this._objs.pop(); 57 | } 58 | 59 | Pool.prototype.creationFunction = null; 60 | 61 | -------------------------------------------------------------------------------- /CSS/CSS3TransitionsWriter/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var drawingSurface; 26 | var mousePos = {x:0, y:0}; 27 | var intervalId = 0; 28 | 29 | var points = []; 30 | 31 | function init() 32 | { 33 | drawingSurface = document.getElementById("drawingSurface"); 34 | 35 | 36 | if(Modernizr.touch) 37 | { 38 | document.ontouchstart = onTouchStart; 39 | document.ontouchend = onTouchEnd; 40 | } 41 | else 42 | { 43 | document.onmousedown = onMouseDown; 44 | document.onmouseup = onMouseUp; 45 | } 46 | 47 | 48 | document.onkeydown = onKeyDown; 49 | } 50 | 51 | function onTick() 52 | { 53 | var box = createBox(); 54 | 55 | setTimeout(animatePosition, 1, box, mousePos.x, mousePos.y); 56 | } 57 | 58 | function onTouchMove(e) 59 | { 60 | e.preventDefault(); 61 | 62 | var touch = e.changedTouches[0]; 63 | updateMousePos(touch.pageX, touch.pageY); 64 | } 65 | 66 | function onTouchStart(e) 67 | { 68 | e.preventDefault(); 69 | 70 | var touch = e.changedTouches[0]; 71 | updateMousePos(touch.pageX, touch.pageY); 72 | 73 | document.ontouchmove = onTouchMove; 74 | startTimer(); 75 | } 76 | 77 | function onTouchEnd(e) 78 | { 79 | e.preventDefault(); 80 | document.onTouchMove = null; 81 | stopTimer(); 82 | } 83 | 84 | function onMouseDown(e) 85 | { 86 | updateMousePos(e.pageX, e.pageY); 87 | document.onmousemove = onMouseMove; 88 | startTimer(); 89 | } 90 | 91 | function onMouseMove(e) 92 | { 93 | updateMousePos(e.pageX, e.pageY); 94 | } 95 | 96 | function startTimer() 97 | { 98 | intervalId = setInterval(onTick, 10); 99 | } 100 | 101 | function stopTimer() 102 | { 103 | clearInterval(intervalId); 104 | } 105 | 106 | function onMouseUp(e) 107 | { 108 | document.onmousemove = null; 109 | stopTimer(); 110 | } 111 | 112 | function updateMousePos(x, y) 113 | { 114 | mousePos.x = x; 115 | mousePos.y = y; 116 | } 117 | 118 | function animatePosition(box, x, y) 119 | { 120 | 121 | if(x == 0 && y == 0) 122 | { 123 | return; 124 | } 125 | 126 | points.push({x:x, y:y}); 127 | 128 | box.style.opacity = "0.1"; 129 | box.style.left = x + "px"; 130 | box.style.top = y + "px"; 131 | } 132 | 133 | function onKeyDown(e) 134 | { 135 | outputPoints(); 136 | 137 | intervalId = setInterval(drawingTimer, 10); 138 | } 139 | 140 | var dataIndex = 0; 141 | function drawingTimer() 142 | { 143 | if(dataIndex >= data.length) 144 | { 145 | clearInterval(intervalId); 146 | return; 147 | } 148 | 149 | var point = data[dataIndex++]; 150 | var box = createBox(); 151 | 152 | setTimeout(animatePosition, 1, box, point.x, point.y); 153 | 154 | //clearInterval(intervalId); 155 | } 156 | 157 | function outputPoints() 158 | { 159 | console.log(JSON.stringify(points)); 160 | } 161 | 162 | function createBox() 163 | { 164 | var box = document.createElement("div"); 165 | box.className = "box"; 166 | document.body.appendChild(box); 167 | 168 | box.style.left = (window.innerWidth / 2) + "px"; 169 | box.style.top = window.innerHeight + "px"; 170 | 171 | return box; 172 | } 173 | 174 | window.onload = init; -------------------------------------------------------------------------------- /CSS/CSS3TransitionsWriter/scripts/modernizr-custom.js: -------------------------------------------------------------------------------- 1 | /* Modernizr 2.0.4 (Custom Build) | MIT & BSD 2 | * Contains: opacity | csstransforms | csstransforms3d | csstransitions | touch | teststyles | testprop | testallprops | prefixes | domprefixes 3 | */ 4 | ;window.Modernizr=function(a,b,c){function B(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return A(d,b)}function A(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function z(a,b){return!!~(""+a).indexOf(b)}function y(a,b){return typeof a===b}function x(a,b){return w(m.join(a+";")+(b||""))}function w(a){j.cssText=a}var d="2.0.4",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m=" -webkit- -moz- -o- -ms- -khtml- ".split(" "),n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s=function(a,c,d,e){var g,i,j,k=b.createElement("div");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);g=["­",""].join(""),k.id=h,k.innerHTML+=g,f.appendChild(k),i=c(k,a),k.parentNode.removeChild(k);return!!i},t,u={}.hasOwnProperty,v;!y(u,c)&&!y(u.call,c)?v=function(a,b){return u.call(a,b)}:v=function(a,b){return b in a&&y(a.constructor.prototype[b],c)};var C=function(c,d){var f=c.join(""),g=d.length;s(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||j.touch.offsetTop===9,e.csstransforms3d=j.csstransforms3d.offsetLeft===9},g,d)}([,["@media (",m.join("touch-enabled),("),h,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",m.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute}}"].join("")],[,"touch","csstransforms3d"]);o.touch=function(){return e.touch},o.opacity=function(){x("opacity:.55");return/^0.55$/.test(j.opacity)},o.csstransforms=function(){return!!A(["transformProperty","WebkitTransform","MozTransform","OTransform","msTransform"])},o.csstransforms3d=function(){var a=!!A(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);a&&"webkitPerspective"in f.style&&(a=e.csstransforms3d);return a},o.csstransitions=function(){return B("transitionProperty")};for(var D in o)v(o,D)&&(t=D.toLowerCase(),e[t]=o[D](),r.push((e[t]?"":"no-")+t));w(""),i=k=null,e._version=d,e._prefixes=m,e._domPrefixes=n,e.testProp=function(a){return A([a])},e.testAllProps=B,e.testStyles=s;return e}(this,this.document); -------------------------------------------------------------------------------- /CSS/CSS3TransitionsWriter/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | body 26 | { 27 | background-color:#333333; 28 | /*-webkit-perspective: 600;*/ 29 | 30 | font-family: sans-serif; 31 | font-size: 12px; 32 | color: #CCCCCC; 33 | 34 | -moz-user-select: -moz-none; 35 | -khtml-user-select: none; 36 | -webkit-user-select: none; 37 | -o-user-select: none; 38 | user-select: none; 39 | } 40 | 41 | #drawingSurface 42 | { 43 | border-style:solid; 44 | border-width:1px; 45 | border-color:#FFFFFF; 46 | height:300px; 47 | width:300px; 48 | } 49 | 50 | .box 51 | { 52 | width:15px; 53 | height:15px; 54 | background-color:#FFFFFF; 55 | position:absolute; 56 | left:0px; 57 | top:0px; 58 | opacity:0.0; 59 | /*-webkit-transform:translateZ(0);*/ 60 | /*-webkit-transform-style: preserve-3d;*/ 61 | /*-webkit-transform:rotateY(0deg);*/ 62 | /*-webkit-border-radius: 100px; 63 | -moz-border-radius: 100px; 64 | border-radius: 100px;*/ 65 | -webkit-transition: all 0.7s ease; 66 | } -------------------------------------------------------------------------------- /Flash/VectorHWAExample/Square.as: -------------------------------------------------------------------------------- 1 | package 2 | { 3 | import flash.display.LineScaleMode; 4 | import flash.display.Sprite; 5 | import flash.events.Event; 6 | import flash.geom.Matrix; 7 | 8 | public class Square extends Sprite 9 | { 10 | public function Square() 11 | { 12 | draw(); 13 | cacheAsBitmap = true; 14 | cacheAsBitmapMatrix = new Matrix(); 15 | addEventListener(Event.ENTER_FRAME, onEnterFrame); 16 | } 17 | 18 | private function draw():void 19 | { 20 | graphics.lineStyle(1, 0x000000); 21 | graphics.beginFill(0x000000, .25); 22 | graphics.drawRect(0,0, 25, 10); 23 | graphics.drawRect(0,0, 10, 25); 24 | graphics.endFill(); 25 | } 26 | 27 | private function onEnterFrame(e:Event):void 28 | { 29 | rotation += 10; 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /Flash/VectorHWAExample/VectorHWAExample-app.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | VectorHWAExample 4 | VectorHWAExample 5 | 6 | 13 | VectorHWAExample 14 | 21 | 22 | 23 | VectorHWAExample.swf 24 | standard 25 | false 26 | true 27 | true 28 | false 29 | portrait 30 | gpu 31 | 32 | false 33 | false 34 | 35 | 36 | ]]> 37 | 38 | 1.0 39 | 40 | -------------------------------------------------------------------------------- /Flash/VectorHWAExample/VectorHWAExample.as: -------------------------------------------------------------------------------- 1 | package 2 | { 3 | import flash.desktop.NativeApplication; 4 | import flash.display.MovieClip; 5 | import flash.events.Event; 6 | import flash.events.MouseEvent; 7 | 8 | 9 | public class VectorHWAExample extends MovieClip 10 | { 11 | 12 | public function VectorHWAExample() 13 | { 14 | //listens for when the application looses focus 15 | NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, onDeactivate); 16 | addEventListener(Event.ADDED, onAddedToStage); 17 | } 18 | 19 | private function onAddedToStage(e:Event):void 20 | { 21 | removeEventListener(Event.ADDED, onAddedToStage); 22 | addEventListener(Event.ENTER_FRAME, onEnterFrame); 23 | stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); 24 | stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); 25 | } 26 | 27 | //called when application looses focus 28 | private function onDeactivate(e:Event):void 29 | { 30 | //close the application 31 | //we could put some code on here to no close if running on the desktop 32 | NativeApplication.nativeApplication.exit(); 33 | } 34 | 35 | private var mouseIsDown:Boolean = false; 36 | private function onMouseDown(e:MouseEvent):void 37 | { 38 | mouseIsDown = true; 39 | } 40 | 41 | private function onMouseUp(e:MouseEvent):void 42 | { 43 | mouseIsDown = false; 44 | } 45 | 46 | private function onEnterFrame(e:Event):void 47 | { 48 | if(!mouseIsDown) 49 | { 50 | return; 51 | } 52 | 53 | var s:Square = new Square(); 54 | s.x = stage.mouseX; 55 | s.y = stage.mouseY; 56 | 57 | addChild(s); 58 | } 59 | 60 | 61 | } 62 | 63 | } 64 | -------------------------------------------------------------------------------- /Flash/VectorHWAExample/VectorHWAExample.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/Flash/VectorHWAExample/VectorHWAExample.fla -------------------------------------------------------------------------------- /HTML5/EaselJS/HelloWorld/README: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | Simple Example from 24 | 25 | http://www.mikechambers.com/blog/2011/01/19/getting-started-with-the-canvas-element-and-easeljs/ 26 | 27 | That shows how to get started with the EaselJS JavaScript library. -------------------------------------------------------------------------------- /HTML5/EaselJS/HelloWorld/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | TITLE 44 | 45 | 51 | 52 | 55 | 56 | 57 | 170 | 171 | 172 | 173 | 174 |
175 | 176 |
177 | 178 | -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/README: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | ----------- 24 | 25 | Photographs are copyright Mike Chambers, and may not be redistributed or re-used 26 | without express permission from Mike Chambers. 27 | 28 | ----------- 29 | 30 | EaselJS example that shows a couple of techniques: 31 | 32 | -creating persistent designs, by setting stage.autoClear to false 33 | -How to subclass DisplayObjects and have them move / draw themselves 34 | -How to save an restore canvas graphics when a canvas is resized 35 | -Managing multiple canvas / stages with EaselJS 36 | -Using touch events in JavaScript 37 | -Using CSS3 Transitions and Transformations 38 | -Using CSS3 Media Queries to deliver different designs to different screen sizes 39 | 40 | More info at: 41 | http://www.mikechambers.com/blog/2011/02/02/pixelflow-easeljs-canvas-dynamic-graphics-example/ -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image1.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image2.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image3.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image4.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image5.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image6.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image7.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/images/image8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/EaselJS/PixelFlow/images/image8.jpg -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | PixelFlow EaselJS Example 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 | 55 |
56 |
Select an Image to Begin
57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 |
65 |
66 | 67 | 68 | 69 | 70 |
71 |
72 |
73 |
74 | 75 |
76 |
77 |

Created by Mike Chambers using EaselJS, Canvas, and CSS3.

78 |

Design by Ben Griffith.

79 |

Code is available on GitHub. Photographs by Mike Chambers.

80 |
81 |
82 |

Created by Mike Chambers.

83 |
84 |
85 | 86 | 87 | 88 |
89 | Save as PNG | Clear Canvas 90 |
91 | 92 |
93 | 94 |
95 |
96 |
97 | | Close 98 |
99 |
100 | 101 |
102 |
It appears that you are using a browser that does not support some, or all of the HTML5 and CSS3 features required for this example.
103 |
The features required for this example include: 104 | 109 |
110 |
111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/scripts/Drone.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | //class which draws itself on the canvas and follows the coordinates from 26 | //the specified target 27 | function Drone(target) 28 | { 29 | //if no target is specified, just use a default one 30 | this.target = (target)?target:{x:0,y:0}; 31 | 32 | //set the radius to the default radius 33 | this.radius = Drone.DEFAULT_RADIUS; 34 | 35 | //set stroke color 36 | this.strokeColor = Graphics.getRGB(0, 0, 0, .3); 37 | } 38 | 39 | //extends EaselJS Shape (this will have to be updated in EaselJS to 40 | //use new inheritance syntax) 41 | Drone.prototype = new Shape(); 42 | 43 | //How fast the drone moves 44 | Drone.prototype.speed = 5; 45 | 46 | Drone.prototype.target = null; 47 | 48 | //not used right now 49 | Drone.prototype.count = 0; 50 | 51 | //temp object we use to pass around point data 52 | //so we can reuse and dont have to keep reinstantiating 53 | Drone.prototype.p2 = new Point(0,0); 54 | 55 | //tracks whether the radius is growing or getting smaller 56 | Drone.prototype.reverse = false; 57 | 58 | //current radius 59 | Drone.prototype.radius = 5; 60 | 61 | //default radius 62 | Drone.DEFAULT_RADIUS = 5; 63 | 64 | //max radius 65 | Drone.MAX_RADIUS = 50; 66 | 67 | //determines whether radius increases (1) or 68 | //decreases(-1) 69 | Drone.prototype.mod = 1; 70 | 71 | //graphics stroke color 72 | Drone.prototype.strokeColor = null; 73 | 74 | Drone.prototype._clone = function() 75 | { 76 | var d = new Drone(); 77 | this.cloneProps(d); 78 | 79 | d.target = {x:this.target.x, y:this.target.y}; 80 | d.radius = this.radius; 81 | d.reverse = this.reverse; 82 | d.count = this.count; 83 | d.mod = this.mod; 84 | 85 | return d; 86 | } 87 | 88 | //draw function 89 | Drone.prototype.$draw = function() 90 | { 91 | //check to see if radius is over 50, or smaller 92 | //than the default radius, if it is, change the 93 | //direction of the size tween. 94 | if(this.radius > Drone.MAX_RADIUS || this.radius < Drone.DEFAULT_RADIUS) 95 | { 96 | this.reverse = !this.reverse; 97 | 98 | //determine whether we should increase or 99 | //decrease radius size 100 | this.mod = (this.reverse)?-1:1; 101 | } 102 | 103 | //update the radius 104 | this.radius += this.mod; 105 | 106 | //create a new Graphics to draw our shape 107 | var g = new Graphics(); 108 | 109 | //set the stroke to 1 px 110 | g.setStrokeStyle(1); 111 | 112 | //g.beginFill(this.fillColor); 113 | g.beginStroke(this.strokeColor); 114 | 115 | //some code to tween between colors (from Grant Skinner) 116 | //60 narrows the range, 180 determine where the color is 117 | /* 118 | g.beginFill( 119 | Graphics.getHSL( 120 | Math.cos((this.count++)*0.1) * 60 + 180, 121 | 100, 122 | 50, 123 | 1.0)); 124 | */ 125 | 126 | //get the pixel color information from the image for the drone's 127 | //current position 128 | var rgba = PD.getRBGA(Math.floor(this.x), Math.floor(this.y)); 129 | 130 | //use the color from the pixel 131 | g.beginFill(Graphics.getRGB(rgba.r, rgba.g, rgba.b, .5)); 132 | 133 | //draw the circle 134 | g.drawCircle(0,0,this.radius); 135 | 136 | g.endFill(); 137 | 138 | //set the graphics property to our Graphics. This 139 | //will be used by the Shape baseclass to render 140 | //our graphics 141 | this.graphics = g; 142 | } 143 | 144 | //called automatically since we subclass Shape. 145 | //called at each time interval 146 | Drone.prototype.tick = function() 147 | { 148 | this.update(); 149 | } 150 | 151 | Drone.prototype.update = function() 152 | { 153 | //copy our current coordinates into the Point instance 154 | //technically, we could pass the drone instance to the methods 155 | //below 156 | this.p2.x = this.x; 157 | this.p2.y = this.y; 158 | 159 | //get angle from enemy to target / ship 160 | var radians = MathUtil.getAngleBetweenPoints(this.target, this.p2); 161 | 162 | //determine velocity on x and y axis 163 | var vx = Math.cos(radians) * this.speed; 164 | var vy = Math.sin(radians) * this.speed; 165 | 166 | //update position 167 | this.x += vx; 168 | this.y += vy; 169 | 170 | //redraw 171 | this.$draw(); 172 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/scripts/MathUtil.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | MathUtil = {}; 26 | 27 | 28 | //returns the angle in radians between two points 29 | MathUtil.getAngleBetweenPoints = function(p1, p2) 30 | { 31 | var dx = p1.x - p2.x; 32 | var dy = p1.y - p2.y; 33 | var radians = Math.atan2(dy, dx); 34 | 35 | return radians; 36 | } 37 | 38 | //returns the distance between two points 39 | MathUtil.distanceBetweenPoints = function(p1, p2) 40 | { 41 | var dx = p1.x - p2.x; 42 | var dy = p1.y - p2.y; 43 | 44 | //we might be able to optimize this to not use Math.sqrt 45 | //need to profile and benchmark 46 | var dist = Math.sqrt(dx * dx + dy * dy); 47 | 48 | return dist; 49 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/scripts/PixelData.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | //simple class that exposes an api to make it easy to get 26 | //data about individual pixels in an ImageData instance 27 | function PixelData(imageData) 28 | { 29 | this.imageData = imageData; 30 | } 31 | 32 | PixelData.prototype.imageData = null; 33 | 34 | //returns an object with r,g,b,a properties with values 35 | //with color information about the pixel as the specified coordinate. 36 | PixelData.prototype.getRBGA = function(xPos, yPos) 37 | { 38 | //copy imageData to a local variable to speed up access 39 | var imageData = this.imageData; 40 | 41 | if(!imageData) 42 | { 43 | //if there is no image data specified, just return an empty 44 | //object (black with 0 transparency) 45 | return {r:0,g:0,b:0,a:0}; 46 | } 47 | 48 | //figure out the starting offset for the specified pixel 49 | var offset = (yPos * (imageData.width * 4)) + (xPos * 4); 50 | 51 | //red:0, green:1, blue:2, alhpa:3 52 | 53 | //copy the data into an object 54 | var out = { 55 | r:imageData.data[(offset)], 56 | g:imageData.data[(offset + 1)], 57 | b:imageData.data[(offset + 2)], 58 | a:imageData.data[(offset + 3)] 59 | }; 60 | 61 | return out; 62 | } 63 | 64 | -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/scripts/Target.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | //This is poorly named, since Drone takes a "target" object. 26 | //this class is used to track the mouse and display a simple graphic to 27 | //show its position 28 | function Target(color) 29 | { 30 | this.color = color; 31 | 32 | //draw ourselves 33 | this.$draw(); 34 | } 35 | 36 | //we extend the EaselJS Shape 37 | Target.prototype = new Shape(); 38 | 39 | Target.prototype.color = null; 40 | Target.RADIUS = 4; 41 | 42 | //renders the shape 43 | Target.prototype.$draw = function() 44 | { 45 | var radius = Target.RADIUS; 46 | var g = new Graphics(); 47 | g.setStrokeStyle(1); 48 | g.beginFill(this.color); 49 | g.beginStroke(this.color); 50 | 51 | //make sure circle is drawn within the Shapes bounds 52 | g.drawCircle(0, 0, radius); 53 | 54 | this.graphics = g; 55 | 56 | //since the graphic wont change any, cache it so it wont 57 | //have to be redrawn each time the canvas is rendered. 58 | this.cache(-radius, -radius, radius * 2, radius * 2); 59 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/styles/small.css: -------------------------------------------------------------------------------- 1 | 2 | #body 3 | { 4 | background-color:#FF0000; 5 | } 6 | 7 | #creditsLarge 8 | { 9 | display:none; 10 | } 11 | 12 | #imageSelectDiv 13 | { 14 | padding-top:2px; 15 | } 16 | 17 | #imagesRow2 18 | { 19 | display:none; 20 | } 21 | 22 | .imageButton 23 | { 24 | width:100px; 25 | height:66px; 26 | } 27 | 28 | #selectContainer 29 | { 30 | padding:5px; 31 | width: 470px; 32 | } 33 | 34 | #selectTitle 35 | { 36 | text-align:center; 37 | font-size:12px; 38 | margin-bottom:2px; 39 | } 40 | 41 | #credits 42 | { 43 | left:2px; 44 | bottom:2px; 45 | } 46 | 47 | #creditsSmall 48 | { 49 | display:block; 50 | font-size:12px; 51 | } 52 | 53 | 54 | #credits p 55 | { 56 | font-size:12px; 57 | margin:2px; 58 | } 59 | 60 | .text 61 | { 62 | padding:2px; 63 | color:#222222; 64 | } 65 | 66 | #thumbImage 67 | { 68 | width:40px; 69 | height:27px; 70 | } 71 | 72 | #bottomBar 73 | { 74 | position:fixed; 75 | 76 | right:10px; 77 | padding-left:2px; 78 | padding-right:2px; 79 | 80 | text-align:center; 81 | font-size:18px; 82 | 83 | } 84 | 85 | .bottomButton 86 | { 87 | margin-left:6px; 88 | margin-right:6px; 89 | text-decoration: none; 90 | 91 | color:#363636; 92 | } 93 | 94 | #savePanel 95 | { 96 | position:absolute; 97 | 98 | top:5px; 99 | right:-340px; 100 | 101 | text-align:center; 102 | 103 | -webkit-transition:all .5s ease-out; 104 | -moz-transition:all .5s ease-out; 105 | -o-transition:all .5s ease-out; 106 | transition:all .5s ease-out; 107 | 108 | padding:4px; 109 | 110 | background-color:#FFFFFF; 111 | border-style:solid; 112 | border-color:#000000; 113 | border-width:1px; 114 | } 115 | -------------------------------------------------------------------------------- /HTML5/EaselJS/PixelFlow/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | 26 | html 27 | { 28 | height:100%; 29 | } 30 | 31 | 32 | body 33 | { 34 | background-color: #FFFFFF; 35 | 36 | overflow: hidden; 37 | margin:0em; 38 | padding:0em; 39 | height:100%; 40 | 41 | font: 15px 'Lucida Grande', Arial, sans-serif; 42 | } 43 | 44 | .text 45 | { 46 | padding:5px; 47 | color:#222222; 48 | } 49 | 50 | #selectTitle 51 | { 52 | text-align:center; 53 | font-size:24px; 54 | margin-bottom:10px; 55 | } 56 | 57 | #credits, #creditsSmall 58 | { 59 | font-size:12px; 60 | 61 | position:absolute; 62 | left:10px; 63 | 64 | bottom:10px; 65 | text-align:left; 66 | 67 | width:100%; 68 | 69 | -webkit-transition:all .5s ease-out; 70 | -moz-transition:all .5s ease-out; 71 | -o-transition:all .5s ease-out; 72 | transition:all .5s ease-out; 73 | } 74 | 75 | #credits p 76 | { 77 | margin:6px; 78 | font-size:14px; 79 | } 80 | #credits a:link, #credits a:visited, #credits a:active 81 | { 82 | color:#272727; 83 | } 84 | 85 | #credits a:hover 86 | { 87 | text-decoration:none; 88 | } 89 | 90 | #creditsSmall 91 | { 92 | display:none; 93 | } 94 | 95 | #imageSelectDiv 96 | { 97 | position:absolute; 98 | top:0px; 99 | 100 | width:100%; 101 | height:100%; 102 | min-height: 100%; 103 | 104 | color: #393939; 105 | background-color:#FFFFFF; 106 | 107 | /* 108 | Note there is code in main.js:onImageMouseDown which has the value hardcoded 109 | (yes, I know this is bad) 110 | */ 111 | padding-top:100px; 112 | 113 | -webkit-transition:all .5s ease; 114 | -moz-transition:all .5s ease; 115 | -o-transition:all .5s ease; 116 | transition:all .5s ease; 117 | } 118 | 119 | #modalDiv 120 | { 121 | position:absolute; 122 | top:0; 123 | left:0; 124 | background-color:rgba(0,0,0,0.5); 125 | width:100%; 126 | height:100%; 127 | min-height: 100%; 128 | 129 | display:none; 130 | opacity:0.0; 131 | 132 | -webkit-transition:opacity .5s ease-out; 133 | -moz-transition:opacity .5s ease-out; 134 | -o-transition:opacity .5s ease-out; 135 | transition:opacity .5s ease-out; 136 | } 137 | 138 | img 139 | { 140 | padding: 5px; 141 | background-color:#FFFFFF; 142 | } 143 | 144 | #selectContainer 145 | { 146 | background: #FFFFFF; 147 | border: 1px solid #BABABA; 148 | 149 | padding:5px; 150 | width: 956px; 151 | text-align: center; 152 | 153 | -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); 154 | -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3); 155 | -box-shadow: 0px 0px 6px rgba(0,0,0,0.3); 156 | 157 | margin:0px auto; 158 | } 159 | 160 | #overlayCanvas 161 | { 162 | position:absolute; 163 | left:0; 164 | top:0; 165 | } 166 | 167 | #thumbImage 168 | { 169 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 170 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 171 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 172 | } 173 | 174 | 175 | #bottomBar 176 | { 177 | position:fixed; 178 | 179 | bottom:-200px; 180 | right:20px; 181 | 182 | padding:10px; 183 | 184 | text-align:center; 185 | text-transform:uppercase; 186 | font-size:18px; 187 | } 188 | 189 | .bottomButton 190 | { 191 | margin-left:6px; 192 | margin-right:6px; 193 | text-decoration: none; 194 | 195 | 196 | color:#363636; 197 | } 198 | 199 | #topBar 200 | { 201 | position:fixed; 202 | 203 | top:-200px; 204 | right:20px; 205 | 206 | text-align:right; 207 | } 208 | 209 | .drawingAnimatable 210 | { 211 | -webkit-transition:all .2s ease-out; 212 | -moz-transition:all .2s ease-out; 213 | -o-transition:all .2s ease-out; 214 | transition:all .2s ease-out; 215 | } 216 | 217 | #savePanel 218 | { 219 | position:absolute; 220 | 221 | top:30%; 222 | right:-340px; 223 | 224 | text-align:center; 225 | 226 | -webkit-transition:all .5s ease-out; 227 | -moz-transition:all .5s ease-out; 228 | -o-transition:all .5s ease-out; 229 | transition:all .5s ease-out; 230 | 231 | padding:8px; 232 | 233 | background-color:#FFFFFF; 234 | border-style:solid; 235 | border-color:#000000; 236 | border-width:1px; 237 | } 238 | 239 | #saveBar 240 | { 241 | width:100%; 242 | text-align:left; 243 | padding-top:2px; 244 | padding-bottom:2px; 245 | font-size:14px; 246 | } 247 | 248 | #savePanelCloseSpan 249 | { 250 | position:absolute; 251 | right:14px; 252 | text-align:right; 253 | } 254 | 255 | #saveInstructionsSpan 256 | { 257 | padding-left:5px; 258 | color:#363636; 259 | font-style:italic; 260 | } 261 | 262 | #savePanelCloseLink 263 | { 264 | text-decoration:none; 265 | color:#363636; 266 | padding-left:8px; 267 | } 268 | 269 | #saveImage 270 | { 271 | border-style:solid; 272 | border-color:#A6A6A6; 273 | border-width:1px; 274 | } 275 | 276 | .bar 277 | { 278 | background: #D9D9D9; /* old browsers */ 279 | background: -moz-linear-gradient(top, #D9D9D9 0%, #ADADAD 100%); /* firefox */ 280 | 281 | background: -webkit-gradient(linear, left top, left bottom, 282 | color-stop(0%,#D9D9D9), color-stop(100%,#ADADAD)); /* webkit */ 283 | 284 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D9D9D9', 285 | endColorstr='#ADADAD',GradientType=0 ); /* ie */ 286 | 287 | -webkit-border-radius: 5px; 288 | -moz-border-radius: 5px; 289 | border-radius: 5px; 290 | 291 | border-color:#A6A6A6; 292 | border-style:solid; 293 | border-width:1px; 294 | 295 | -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 296 | -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 297 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 298 | 299 | text-decoration:none; 300 | } 301 | 302 | #noSupport 303 | { 304 | width:100%; 305 | height:100%; 306 | min-height: 100%; 307 | background-color:rgba(0,0,0,0.8); 308 | 309 | position:absolute; 310 | top:0px; 311 | left:0px; 312 | 313 | border-style:solid; 314 | border-color:#000000; 315 | border-width:1px; 316 | 317 | display:none; 318 | } 319 | 320 | #noSupport div 321 | { 322 | position:relative; 323 | top:100px; 324 | width:350px; 325 | background-color:#FFFFFF; 326 | text-align:left; 327 | padding:10px; 328 | margin-left: auto ; 329 | margin-right: auto ; 330 | } 331 | 332 | #canvasSupport, #transitionSupport, #transformSupport 333 | { 334 | color:#228B22; 335 | } 336 | -------------------------------------------------------------------------------- /HTML5/EaselJS/Spirals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | EaselJS Spiral Example 44 | 45 | 46 | 47 | 48 | 49 |
Created by Mike Chambers
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /HTML5/EaselJS/Spirals/scripts/Drone.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | /* 26 | Draws the graphics for the spiral 27 | */ 28 | function Drone(minRadius, maxRadius, strokeAlpha, spread) 29 | { 30 | this.maxRadius = maxRadius; 31 | this.minRadius = minRadius; 32 | this.strokeAlpha = strokeAlpha; 33 | this.spread = spread; 34 | 35 | this.radius = this.minRadius; 36 | this.$draw(); 37 | } 38 | 39 | Drone.prototype = new Shape(); 40 | 41 | Drone.prototype.reverse = false; 42 | Drone.prototype.maxRadius = 50; 43 | Drone.prototype.minRadius = 5; 44 | Drone.prototype.radius = 5; 45 | Drone.prototype.strokeAlpha = .2; 46 | Drone.prototype.angle = 0; 47 | Drone.prototype.spread = 0.5; 48 | 49 | Drone.prototype.$draw = function() 50 | { 51 | if(this.maxRadius != this.minRadius) 52 | { 53 | if(this.radius > this.maxRadius || this.radius < this.minRadius) 54 | { 55 | this.reverse = !this.reverse; 56 | } 57 | 58 | var mod = (this.reverse)?-1:1; 59 | 60 | this.radius += mod; 61 | } 62 | 63 | var g = new Graphics(); 64 | g.setStrokeStyle(1); 65 | //g.beginFill(Graphics.getRGB(0,0,0, 0.1)); 66 | g.beginStroke(Graphics.getRGB(0, 0, 0, this.strokeAlpha)); 67 | 68 | 69 | g.drawCircle(0,0,this.radius); 70 | 71 | //g.moveTo(0,0); 72 | //g.drawCircle(0,0,2); 73 | g.endFill(); 74 | 75 | this.graphics = g; 76 | } 77 | 78 | Drone.prototype.tick = function() 79 | { 80 | this.update(); 81 | } 82 | 83 | Drone.prototype.update = function() 84 | { 85 | this.angle += .1; 86 | 87 | this.x += this.spread * this.angle * Math.cos(this.angle); 88 | this.y += this.spread * this.angle * Math.sin(this.angle); 89 | 90 | this.$draw(); 91 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/Spirals/scripts/MathUtil.js: -------------------------------------------------------------------------------- 1 | MathUtil = {}; 2 | 3 | MathUtil.getAngleBetweenPoints = function(p1, p2) 4 | { 5 | var dx = p1.x - p2.x; 6 | var dy = p1.y - p2.y; 7 | var radians = Math.atan2(dy, dx); 8 | return radians; 9 | } 10 | 11 | MathUtil.distanceBetweenPoints = function(p1, p2) 12 | { 13 | var dx = p1.x - p2.x; 14 | var dy = p1.y - p2.y; 15 | var dist = Math.sqrt(dx * dx + dy * dy); 16 | 17 | return dist; 18 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/Spirals/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | //listen for when the window finishes loaded. 26 | x$(window).load(init); 27 | 28 | var stage; 29 | var canvasWrapper; 30 | var canvasOffset = {}; 31 | 32 | var drone; 33 | var bounds; 34 | 35 | var maxRadius = 5; 36 | var minRadius = 50; 37 | var strokeAlpha = .2; 38 | var spread = 0.5; 39 | 40 | //viewport dimensions for container / browser 41 | var viewport = {height:0, width:0}; 42 | 43 | function init() 44 | { 45 | //get a reference to the canvas element 46 | canvasWrapper = x$("#mainCanvas"); 47 | 48 | if(!Modernizr.canvas) 49 | { 50 | canvasWrapper.outer("
It appears you are using a " + 51 | "browser which does not support the HTML5 Canvas element
"); 52 | return; 53 | } 54 | 55 | //update the dimensions of the canvas 56 | updateCanvasDimensions(); 57 | 58 | bounds = new Rectangle(); 59 | bounds.w = viewport.width; 60 | bounds.h = viewport.height; 61 | 62 | stage = new Stage(canvasWrapper[0]); 63 | stage.autoClear = false; 64 | 65 | //listen for when the window resizes 66 | x$(window).on("resize", onWindowResize); 67 | x$(window).on("blur", onWindowBlur); 68 | 69 | canvasWrapper.on("click", onMouseClick); 70 | 71 | //this block of code gets the params from the URL 72 | var params = parseGetParams(); 73 | 74 | var maxRadiusParam = params.maxradius; 75 | if(maxRadiusParam) 76 | { 77 | maxRadius = parseInt(maxRadiusParam); 78 | } 79 | 80 | var minRadiusParam = params.minradius; 81 | if(minRadiusParam) 82 | { 83 | minRadius = parseInt(minRadiusParam); 84 | } 85 | 86 | var strokeAlphaParam = params.strokealpha; 87 | if(strokeAlphaParam) 88 | { 89 | strokeAlpha = parseFloat(strokeAlphaParam); 90 | } 91 | 92 | var spreadParam = params.spread; 93 | if(spreadParam) 94 | { 95 | spread = spreadParam; 96 | } 97 | 98 | drone = new Drone(minRadius, maxRadius, strokeAlpha, spread); 99 | drone.x = bounds.w / 2; 100 | drone.y = bounds.h / 2; 101 | 102 | stage.addChild(drone); 103 | 104 | stage.update(); 105 | 106 | Ticker.setFPS(30); 107 | Ticker.addListener(window, true); 108 | Ticker.setPaused(true); 109 | } 110 | 111 | function onMouseClick(e) 112 | { 113 | Ticker.setPaused(!Ticker.getPaused()); 114 | } 115 | 116 | function onWindowBlur(e) 117 | { 118 | Ticker.setPaused(true); 119 | } 120 | 121 | function tick() 122 | { 123 | //render the stage 124 | stage.update(); 125 | } 126 | 127 | //called when the browser window is resized 128 | function onWindowResize(e) 129 | { 130 | //update the canvas dimensions 131 | updateCanvasDimensions(); 132 | 133 | //re-render the stage, since updating canvas size 134 | //clears the canvas 135 | stage.update(); 136 | } 137 | 138 | //function that updates the size of the canvas based on the window size 139 | function updateCanvasDimensions() 140 | { 141 | //only run if height / width has changed 142 | if(viewport.height == window.innerHeight && 143 | viewport.width == window.innerWidth) 144 | { 145 | return 146 | } 147 | 148 | viewport.height = window.innerHeight; 149 | viewport.width = window.innerWidth; 150 | 151 | //set the new canvas dimensions 152 | //note that changing the canvas dimensions clears the canvas. 153 | canvasWrapper.attr("height", viewport.height); 154 | canvasWrapper.attr("width", viewport.width); 155 | 156 | //save the canvas offset 157 | canvasOffset.left = canvasWrapper.attr("offsetLeft"); 158 | canvasOffset.top = canvasWrapper.attr("offsetTop"); 159 | } 160 | 161 | function parseGetParams() 162 | { 163 | var getData = new Array(); 164 | var sGet = window.location.search; 165 | if (sGet) 166 | { 167 | sGet = sGet.substr(1); 168 | 169 | var sNVPairs = sGet.split("&"); 170 | 171 | for (var i = 0; i < sNVPairs.length; i++) 172 | { 173 | 174 | var sNV = sNVPairs[i].split("="); 175 | 176 | var sName = sNV[0]; 177 | var sValue = sNV[1]; 178 | getData[sName] = sValue; 179 | } 180 | } 181 | 182 | return getData; 183 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/Spirals/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | body, canvas 26 | { 27 | /*background-color: #333333;*/ 28 | 29 | overflow: hidden; 30 | margin:0em; 31 | padding:0em; 32 | 33 | font: 12px 'Lucida Grande', Arial, sans-serif; 34 | } 35 | 36 | #credits 37 | { 38 | position:fixed; 39 | left:5px; 40 | bottom:5px; 41 | color:#272727; 42 | 43 | display:none; 44 | } 45 | 46 | a:link, a:visited, a:active 47 | { 48 | color:#272727; 49 | } 50 | 51 | a:hover 52 | { 53 | text-decoration:none; 54 | } 55 | -------------------------------------------------------------------------------- /HTML5/EaselJS/Voronoi/README.txt: -------------------------------------------------------------------------------- 1 | Voronoi JavaScript / EaselJS Example 2 | 3 | Ported by to JavaScript / EaselJS by Mike Chambers 4 | http://www.mikechambers.com/blog/2011/03/24/javascript-voronoi-port/ 5 | 6 | Original ActionScript 1 code by 7 | Mario Klingemann 8 | http://www.quasimondo.com/archives/000110.php -------------------------------------------------------------------------------- /HTML5/EaselJS/Voronoi/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | EaselJS Voronoi Example 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 |
Click to add a point. 24 | 25 |
26 |
27 | 28 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /HTML5/EaselJS/Voronoi/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | Ported by to JavaScript / EaselJS by Mike Chambers 3 | http://www.mikechambers.com 4 | 5 | Original ActionScript 1 code by 6 | Mario Klingemann 7 | http://www.quasimondo.com/archives/000110.php 8 | */ 9 | 10 | var stage; 11 | var dots = []; 12 | var PI = Math.PI; 13 | var PI2 = 2 * PI; 14 | var NUM_MAX = Number.MAX_VALUE; 15 | var maxSpeed = 5; 16 | var dotNum = 0; 17 | var distance = []; 18 | var sx = []; 19 | var sy = []; 20 | var ex = []; 21 | var ey = []; 22 | var INITIAL_DOT_COUNT = 20; 23 | var fpsText; 24 | var storageSize; 25 | 26 | var drawColor = Graphics.getRGB(0,0,0,.7); 27 | var dotRadius = 2; 28 | 29 | function init() 30 | { 31 | canvas = document.getElementById("canvas"); 32 | 33 | //so text on page isnt selected when canvas is doubleclicked 34 | canvas.onmousedown = function(e){ 35 | e.preventDefault(); 36 | }; 37 | 38 | stage = new Stage(canvas); 39 | 40 | appW = canvas.width - 1; 41 | appH = canvas.height - 1; 42 | 43 | gOff = new Shape(); 44 | stage.addChild(gOff); 45 | 46 | stage.onMouseUp = onMouseUp; 47 | 48 | fpsText = new Text(); 49 | fpsText.color = drawColor; 50 | fpsText.x = 5; 51 | fpsText.y = 12; 52 | stage.addChild(fpsText); 53 | 54 | initDots(); 55 | 56 | Ticker.setFPS(24); 57 | Ticker.addListener(window); 58 | } 59 | 60 | function tick() { 61 | movedot(); 62 | setVoronoi(); 63 | drawVoronoi(); 64 | 65 | fpsText.text = (Math.round(Ticker.getMeasuredFPS())) + " fps"; 66 | stage.update(); 67 | } 68 | 69 | function onMouseUp(e) 70 | { 71 | addDot(e.stageX, e.stageY); 72 | storageSize++; 73 | } 74 | 75 | function initDots() { 76 | 77 | storageSize = INITIAL_DOT_COUNT + 4; 78 | 79 | for (var i=0; i=appW-3 || y<3 || y>=appH-3) { 122 | if (x<3) { 123 | x = 3; 124 | vx *= -1; 125 | } 126 | if (x>appW-4) { 127 | x = appW-4; 128 | vx *= -1; 129 | } 130 | if (y<3) { 131 | y = 3; 132 | vy *= -1; 133 | } 134 | if (y>appH-4) { 135 | y = appH-4; 136 | vy *= -1; 137 | } 138 | d.angle = Math.atan2(vy, vx); 139 | } 140 | d.m.x = d.x=x; 141 | d.m.y = d.y=y; 142 | if (Math.random()<.1) { 143 | d.angle += Math.random()-.5; 144 | } 145 | if (Math.random()<.1) { 146 | d.v += Math.random()-.5; 147 | d.v = Math.max(0, Math.min(maxSpeed, Math.abs(d.v))); 148 | } 149 | } 150 | } 151 | function setVoronoi() { 152 | var i, j, k, m, n; 153 | var a, b, a0, b0, a1, b1, x, y, x0, y0, x1, y1; 154 | 155 | var dot; 156 | 157 | for (i=0; i-1 && a<=1) { 174 | sx[n] = 0; 175 | sy[n] = a*sx[n]+b; 176 | ex[n] = appW-1; 177 | ey[n] = a*ex[n]+b; 178 | } else { 179 | sy[n] = 0; 180 | sx[n] = (sy[n]-b)/a; 181 | ey[n] = appH-1; 182 | ex[n] = (ey[n]-b)/a; 183 | } 184 | n++; 185 | } 186 | sx[n] = 0; 187 | sy[n] = 0; 188 | ex[n] = appW; 189 | ey[n] = 0; 190 | n++; 191 | sx[n] = .1; 192 | sy[n] = 0; 193 | ex[n] = 0; 194 | ey[n] = appH; 195 | n++; 196 | sx[n] = appW; 197 | sy[n] = 0; 198 | ex[n] = appW-.1; 199 | ey[n] = appH; 200 | n++; 201 | sx[n] = 0; 202 | sy[n] = appH; 203 | ex[n] = appW; 204 | ey[n] = appH; 205 | } 206 | 207 | var sxn, sxm, sym, exm, eym; 208 | 209 | for (i=0; ii) { 217 | n = i*storage+j; 218 | } else { 219 | n = j*storage+i; 220 | } 221 | 222 | sxn = sx[n]; 223 | if (sxn>-NUM_MAX) { 224 | a0 = (ey[n]-sy[n])/(ex[n]-sxn); 225 | b0 = sy[n]-a0*sxn; 226 | for (k=i+1; k-NUM_MAX) { 236 | a1 = (eym-sym)/(exm-sxm); 237 | b1 = sym-a1*sxm; 238 | x = -(b1-b0)/(a1-a0); 239 | y = a0*x+b0; 240 | if ((a0*x0+b0-y0)*(a0*sxm+b0-sym)<0) { 241 | sx[m] = x; 242 | sy[m] = y; 243 | } 244 | if ((a0*x0+b0-y0)*(a0*exm+b0-eym)<0) { 245 | if (sx[m] == x) { 246 | sx[m] = -NUM_MAX; 247 | } else { 248 | ex[m] = x; 249 | ey[m] = y; 250 | } 251 | } 252 | } 253 | } 254 | } 255 | } 256 | } 257 | } 258 | } 259 | } 260 | function drawVoronoi2(c) { 261 | var i, j, n; 262 | 263 | var g = gOff.graphics; 264 | g.clear(); 265 | g.beginStroke(drawColor); 266 | var sxn; 267 | 268 | for (i=0; i -NUM_MAX) { 274 | g.moveTo(sxn, sy[n]); 275 | g.lineTo(ex[n], ey[n]); 276 | } 277 | n++; 278 | } 279 | } 280 | } 281 | 282 | function drawVoronoi(c) { 283 | var i, j, n; 284 | 285 | var g = gOff.graphics; 286 | g.clear(); 287 | g.beginStroke(drawColor); 288 | 289 | var sxn; 290 | 291 | for (i=0; i-NUM_MAX) { 297 | g.moveTo(sxn, sy[n]); 298 | g.lineTo(ex[n], ey[n]); 299 | } 300 | n++; 301 | } 302 | } 303 | } 304 | 305 | window.onload = init; 306 | -------------------------------------------------------------------------------- /HTML5/EaselJS/Voronoi/styles/styles.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | background-color:#333333; 4 | text-align:center; 5 | font-family: sans-serif; 6 | font-size: 12px; 7 | color: #CCCCCC; 8 | } 9 | 10 | a 11 | { 12 | color: #CCCCCC; 13 | } 14 | 15 | a:hover 16 | { 17 | text-decoration:none; 18 | } 19 | 20 | canvas 21 | { 22 | border-style:solid; 23 | border-width:1px; 24 | border-color:#000000; 25 | 26 | position:absolute; 27 | left:0px; 28 | top:0px; 29 | } 30 | 31 | #countLinks 32 | { 33 | position:absolute; 34 | right:0px; 35 | } 36 | 37 | #copyContainer 38 | { 39 | position:absolute; 40 | width:100%; 41 | left:0px; 42 | top:505px; 43 | text-align:left; 44 | } 45 | 46 | #canvasContainer 47 | { 48 | margin:0px auto; 49 | width:500px; 50 | margin-left: auto; 51 | margin-right: auto; 52 | position:relative; 53 | 54 | } 55 | 56 | #footer 57 | { 58 | position:fixed; 59 | bottom:5px; 60 | 61 | width:100%; 62 | margin-left: auto; 63 | margin-right: auto; 64 | text-align:center; 65 | } 66 | 67 | #canvas 68 | { 69 | -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 70 | -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 71 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 72 | 73 | background-color:#FFFFFF; 74 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/follow/README: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | ----------- 24 | 25 | EaselJS example that shows a couple of techniques: 26 | 27 | -creating persistent designs, by setting stage.autoClear to false 28 | -How to subclass DisplayObjects and have them move / draw themselves 29 | -How to save an restore canvas graphics when a canvas is resized 30 | -Managing multiple canvas / stages with EaselJS 31 | -Using touch events in JavaScript 32 | 33 | More info at: 34 | http://www.mikechambers.com/blog/2011/01/24/easeljs-example-follow-drone/ -------------------------------------------------------------------------------- /HTML5/EaselJS/follow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 50 | 51 | Follow EaselJS Example 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /HTML5/EaselJS/follow/scripts/Drone.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | //constructor for Drone 26 | function Drone() 27 | { 28 | //set the radius to the default radius 29 | this.radius = Drone.DEFAULT_RADIUS; 30 | 31 | //set fill color 32 | this.fillColor = Graphics.getRGB(255,255,255); 33 | 34 | //set stroke color 35 | this.strokeColor = Graphics.getRGB(0, 0, 0, .75); 36 | 37 | //draw ourselves 38 | this.$draw(); 39 | } 40 | 41 | //extends EaselJS Shape 42 | Drone.prototype = new Shape(); 43 | 44 | //How fast the drone moves 45 | Drone.prototype.speed = 5; 46 | 47 | //temp object we use to pass around point data 48 | //so we can reuse and dont have to keep reinstantiating 49 | Drone.prototype.p2 = new Point(0,0); 50 | 51 | //direction the radius tween is moving in 52 | Drone.prototype.reverse = false; 53 | 54 | //current radius 55 | Drone.prototype.radius = 5; 56 | 57 | //default radius 58 | Drone.DEFAULT_RADIUS = 5; 59 | 60 | //max radius 61 | Drone.MAX_RADIUS = 50; 62 | 63 | //determines whether radius increases (1) or 64 | //decreases(-1) 65 | Drone.prototype.mod = 1; 66 | 67 | //graphics fill color 68 | Drone.prototype.fillColor = null; 69 | 70 | //graphics stroke color 71 | Drone.prototype.strokeColor = null; 72 | 73 | //draw function 74 | Drone.prototype.$draw = function() 75 | { 76 | //check to see if radius is over 50, or smaller 77 | //than the default radius, if it is, change the 78 | //direction of the size tween. 79 | if(this.radius > Drone.MAX_RADIUS || this.radius < Drone.DEFAULT_RADIUS) 80 | { 81 | this.reverse = !this.reverse; 82 | 83 | //determine whether we should increase or 84 | //decrease radius size 85 | this.mod = (this.reverse)?-1:1; 86 | } 87 | 88 | //update the radius 89 | this.radius += this.mod; 90 | 91 | //create a new Graphics to draw our shape 92 | var g = new Graphics(); 93 | 94 | //set the stroke to 1 px 95 | g.setStrokeStyle(1); 96 | 97 | g.beginFill(this.fillColor); 98 | g.beginStroke(this.strokeColor); 99 | 100 | //some code to tween between colors (from Grant Skinner) 101 | //60 narrows the range, 180 determine where the color is 102 | //g.beginFill(Graphics.getHSL(Math.cos((this.count++)*0.1)*60 + 180, 100, 50)); 103 | 104 | //draw the circle 105 | g.drawCircle(0,0,this.radius); 106 | 107 | //move drawing point to center 108 | g.moveTo(0,0); 109 | 110 | //draw another smaller circle 111 | g.drawCircle(0,0,2); 112 | g.endFill(); 113 | 114 | //set the graphics property to our Graphics. This 115 | //will be used the the Shape baseclass to render 116 | //our graphics 117 | this.graphics = g; 118 | } 119 | 120 | //called automatically since we subclass Shape. 121 | //called at each time interval 122 | Drone.prototype.tick = function() 123 | { 124 | this.update(); 125 | } 126 | 127 | Drone.prototype.update = function() 128 | { 129 | //copy our coordinates into the Point instance 130 | this.p2.x = this.x; 131 | this.p2.y = this.y; 132 | 133 | //get angle from enemy to target / ship 134 | var radians = MathUtil.getAngleBetweenPoints(Mouse, this.p2); 135 | 136 | //determine velocity on x and y axis 137 | var vx = Math.cos(radians) * this.speed; 138 | var vy = Math.sin(radians) * this.speed; 139 | 140 | //update position 141 | this.x += vx; 142 | this.y += vy; 143 | 144 | //redraw 145 | this.$draw(); 146 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/follow/scripts/MathUtil.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | MathUtil = {}; 26 | 27 | 28 | //returns the angle in radians between two points 29 | MathUtil.getAngleBetweenPoints = function(p1, p2) 30 | { 31 | var dx = p1.x - p2.x; 32 | var dy = p1.y - p2.y; 33 | var radians = Math.atan2(dy, dx); 34 | return radians; 35 | } 36 | 37 | //returns the distance between two points 38 | MathUtil.distanceBetweenPoints = function(p1, p2) 39 | { 40 | var dx = p1.x - p2.x; 41 | var dy = p1.y - p2.y; 42 | var dist = Math.sqrt(dx * dx + dy * dy); 43 | 44 | return dist; 45 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/follow/scripts/Target.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | function Target(color) 26 | { 27 | this.color = color; 28 | this.$draw(); 29 | } 30 | 31 | Target.prototype = new Shape(); 32 | Target.prototype.color = null; 33 | Target.RADIUS = 4; 34 | 35 | Target.prototype.$draw = function() 36 | { 37 | var radius = Target.RADIUS; 38 | var g = new Graphics(); 39 | g.setStrokeStyle(1); 40 | g.beginFill(this.color); 41 | g.beginStroke(this.color); 42 | 43 | //make sure circle is drawn within the Shapes bounds 44 | g.drawCircle(0, 0, radius); 45 | 46 | this.graphics = g; 47 | 48 | //since the graphic wont change any, cache it so it wont 49 | //have to be redrawn each time the canvas is rendered. 50 | this.cache(-radius, -radius, radius * 2, radius * 2); 51 | } 52 | 53 | Target.prototype.tick = function() 54 | { 55 | this.x = Mouse.x; 56 | this.y = Mouse.y; 57 | } -------------------------------------------------------------------------------- /HTML5/EaselJS/follow/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | body 26 | { 27 | background-color: #FFFFFF; 28 | 29 | overflow: hidden; 30 | margin:0em; 31 | padding:0em; 32 | } 33 | 34 | /* 35 | canvas 36 | { 37 | webkit-user-select:none; 38 | } 39 | */ 40 | 41 | #overlayCanvas 42 | { 43 | position:absolute; 44 | left:0; 45 | top:0; 46 | } 47 | -------------------------------------------------------------------------------- /HTML5/SlideView/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/SlideView/images/1.png -------------------------------------------------------------------------------- /HTML5/SlideView/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/SlideView/images/2.png -------------------------------------------------------------------------------- /HTML5/SlideView/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/SlideView/images/3.png -------------------------------------------------------------------------------- /HTML5/SlideView/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/SlideView/images/4.png -------------------------------------------------------------------------------- /HTML5/SlideView/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 16 | 17 | TITLE 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /HTML5/SlideView/scripts/main.js: -------------------------------------------------------------------------------- 1 | var images = []; 2 | var slideView; 3 | 4 | var leftPos; 5 | var centerPos; 6 | var rightPos; 7 | var currentIndex = 0; 8 | 9 | 10 | function init() 11 | { 12 | document.onclick = onClick; 13 | 14 | sliderView = document.getElementById("slider-view"); 15 | 16 | var img = new Image(); 17 | img.src= "images/1.png"; 18 | img.className += " centerPos"; 19 | 20 | centerPos = img; 21 | images[0] = img; 22 | 23 | var img2 = new Image(); 24 | img2.src= "images/2.png"; 25 | img2.className += " rightPos"; 26 | rightPos = img2; 27 | images[1] = img2; 28 | 29 | var img3 = new Image(); 30 | img3.src= "images/3.png"; 31 | img3.className += " leftPos"; 32 | leftPos = img3; 33 | images[2] = img3; 34 | 35 | var img4 = new Image(); 36 | img4.src= "images/4.png"; 37 | images[3] = img4; 38 | 39 | sliderView.appendChild(images[0]); 40 | sliderView.appendChild(images[1]); 41 | sliderView.appendChild(images[2]); 42 | } 43 | 44 | function onClick(e) 45 | { 46 | centerPos.className = centerPos.className.replace(/(?:^|\s)centerPos(?!\S)/,''); 47 | centerPos.className += " leftPos"; 48 | 49 | currentIndex++; 50 | if(currentIndex == images.length) 51 | { 52 | currentIndex = 0; 53 | } 54 | 55 | rightPos.className = rightPos.className.replace(/(?:^|\s)rightPos(?!\S)/,''); 56 | 57 | if(leftPos) 58 | { 59 | 60 | /* 61 | leftPos.addEventListener("webkitTransitionEnd", function(e) 62 | { 63 | var img = e.target; 64 | //need to make sure this is being removed 65 | img.removeEventListener("webkitTransitionEnd", arguments.caller); 66 | }); 67 | */ 68 | 69 | 70 | //should i remove this? 71 | //or just make it invisible? 72 | 73 | //this is what is cuasing the issue 74 | 75 | sliderView.removeChild(leftPos); 76 | 77 | /* 78 | leftPos.addEventListener("webkitTransitionEnd", function(e) 79 | { 80 | var img = e.target; 81 | //need to make sure this is being removed 82 | img.removeEventListener("webkitTransitionEnd", arguments.caller); 83 | }); 84 | */ 85 | 86 | leftPos.className = leftPos.className.replace(/(?:^|\s)leftPos(?!\S)/,''); 87 | } 88 | 89 | leftPos = centerPos; 90 | 91 | /* 92 | leftPos.addEventListener("webkitTransitionEnd", function(e) 93 | { 94 | var img = e.target; 95 | //need to make sure this is being removed 96 | img.removeEventListener("webkitTransitionEnd", arguments.caller); 97 | }); 98 | */ 99 | 100 | centerPos = rightPos; 101 | centerPos.className += " centerPos"; 102 | 103 | var nextIndex = currentIndex + 1; 104 | if(nextIndex == images.length) 105 | { 106 | nextIndex = 0; 107 | } 108 | 109 | //need to check to see if it is on the dom yet 110 | //need to position it correctly. 111 | rightPos = images[nextIndex]; 112 | rightPos.className += " rightPos"; 113 | sliderView.appendChild(rightPos); 114 | } 115 | 116 | 117 | window.onload = init; -------------------------------------------------------------------------------- /HTML5/SlideView/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | overflow-x:hidden 3 | overflow-y:hidden 4 | */ 5 | 6 | #slider-view 7 | { 8 | /*background-color:#FF0000;*/ 9 | height:250px; 10 | width:400px; 11 | position:absolute; 12 | overflow-x:hidden; 13 | overflow-y:hidden; 14 | } 15 | 16 | /*make this a class not element*/ 17 | img 18 | { 19 | position:absolute; 20 | -webkit-transition:all .4s ease-in-out; 21 | -moz-transition:all .4s ease-in-out; 22 | -o-transition:all .4s ease-in-out; 23 | transition:all .4s ease-in-out; 24 | } 25 | 26 | .leftPos 27 | { 28 | left:-400px; 29 | } 30 | 31 | .centerPos 32 | { 33 | left:0px; 34 | } 35 | 36 | .rightPos 37 | { 38 | left:400px; 39 | } -------------------------------------------------------------------------------- /HTML5/canvas/exportWithBackgroundColor/README: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | ----------- 24 | 25 | Canvas example that shows how to set the background color when exporting image data from canvas using toDataURL. 26 | 27 | You can find more info on this example at: 28 | http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/ -------------------------------------------------------------------------------- /HTML5/canvas/exportWithBackgroundColor/images/transparent_graphic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/HTML5/canvas/exportWithBackgroundColor/images/transparent_graphic.png -------------------------------------------------------------------------------- /HTML5/canvas/exportWithBackgroundColor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | Canvas Export with Background Color 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 |
52 | 53 | 54 | 55 | 56 |
57 |
58 | Create Image :
59 | Transparent Background | 60 | Red Background (Solid) | 61 | Red Background (50% Alpha) 62 |
63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /HTML5/canvas/exportWithBackgroundColor/scripts/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | //canvas element 26 | var canvas; 27 | 28 | //canvas context 29 | var context; 30 | 31 | //img element we will copy canvas png to 32 | var canvasImage; 33 | 34 | var offsetLeft; 35 | var offsetTop; 36 | 37 | window.onload = function(e) 38 | { 39 | var container = document.getElementById("container"); 40 | 41 | //check is canvas is supported 42 | if(!hasCanvasSupport()) 43 | { 44 | container.innerHTML = "It appears you are using a browser that does not " + 45 | "support the HTML5 Canvas element."; 46 | 47 | return; 48 | } 49 | 50 | 51 | canvas = document.getElementById("canvas"); 52 | 53 | //listen for when the user clicks on the canvas 54 | canvas.onclick = onCanvasClick; 55 | context = canvas.getContext("2d"); 56 | 57 | offsetLeft = container.offsetLeft; 58 | offsetTop = container.offsetTop; 59 | 60 | //add a click event to all of the backgroundLink 61 | var bgLinks = document.querySelectorAll(".backgroundLink"); 62 | var len = bgLinks.length; 63 | 64 | for(var i = 0; i < len; i++) 65 | { 66 | bgLinks[i].onclick = onLinksClick; 67 | } 68 | 69 | canvasImage = document.getElementById("canvasImage"); 70 | } 71 | 72 | //called when the create image links are clicked 73 | function onLinksClick(e) 74 | { 75 | //get the background color specified in the element 76 | var backgroundColor = e.target.getAttribute("data-color"); 77 | 78 | //check if it is null, or an empty string 79 | if(!backgroundColor) 80 | { 81 | color = null; 82 | } 83 | 84 | //create a png dataurl from the canvas contents, and display in the 85 | //image element on the page 86 | canvasImage.src = canvasToImage(backgroundColor); 87 | 88 | return false; 89 | } 90 | 91 | //Returns contents of a canvas as a png based data url, with the specified 92 | //background color 93 | function canvasToImage(backgroundColor) 94 | { 95 | //cache height and width 96 | var w = canvas.width; 97 | var h = canvas.height; 98 | 99 | var data; 100 | 101 | if(backgroundColor) 102 | { 103 | //get the current ImageData for the canvas. 104 | data = context.getImageData(0, 0, w, h); 105 | 106 | //store the current globalCompositeOperation 107 | var compositeOperation = context.globalCompositeOperation; 108 | 109 | //set to draw behind current content 110 | context.globalCompositeOperation = "destination-over"; 111 | 112 | //set background color 113 | context.fillStyle = backgroundColor; 114 | 115 | //draw background / rect on entire canvas 116 | context.fillRect(0,0,w,h); 117 | } 118 | 119 | //get the image data from the canvas 120 | var imageData = this.canvas.toDataURL("image/png"); 121 | 122 | if(backgroundColor) 123 | { 124 | //clear the canvas 125 | context.clearRect (0,0,w,h); 126 | 127 | //restore it with original / cached ImageData 128 | context.putImageData(data, 0,0); 129 | 130 | //reset the globalCompositeOperation to what it was 131 | context.globalCompositeOperation = compositeOperation; 132 | } 133 | 134 | //return the Base64 encoded data url string 135 | return imageData; 136 | } 137 | 138 | 139 | //called when the user clicks the mouse on the canvas 140 | function onCanvasClick(e) 141 | { 142 | 143 | var x = e.pageX - offsetTop; 144 | var y = e.pageY - offsetLeft; 145 | 146 | context.fillStyle = getColor(); 147 | 148 | context.beginPath(); 149 | context.fillRect(x, y, 20, 20); 150 | context.closePath(); 151 | } 152 | 153 | //array of colors to use when draw rects on canvas 154 | var colors = [ 155 | "rgba(255,0,0,0.5)", 156 | "rgba(0,255,0,0.5)", 157 | "rgba(0,0,255,0.5)", 158 | "rgba(0,0,0,0.5)", 159 | "rgba(255,255,255,0.5)", 160 | ]; 161 | 162 | //color array index 163 | var colorIndex = 0; 164 | function getColor() 165 | { 166 | //check if we have passed the last color 167 | if(colorIndex == colors.length) 168 | { 169 | //if so, go to beginning 170 | colorIndex = 0; 171 | } 172 | 173 | //get the color 174 | var color = colors[colorIndex]; 175 | 176 | //increment the color index 177 | colorIndex++; 178 | 179 | return color; 180 | } 181 | 182 | function hasCanvasSupport() 183 | { 184 | return !!document.createElement('canvas').getContext; 185 | } -------------------------------------------------------------------------------- /HTML5/canvas/exportWithBackgroundColor/styles/styles.css: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | body, a:link, a:active, a:visited 26 | { 27 | font: 12px 'Lucida Grande', Arial, sans-serif; 28 | text-decoration:none; 29 | color:#333333; 30 | } 31 | 32 | a:hover 33 | { 34 | text-decoration:underline; 35 | } 36 | 37 | #drawingContainer 38 | { 39 | width:450px; 40 | position:relative; 41 | } 42 | 43 | #canvas 44 | { 45 | border-style:solid; 46 | border-color:"#000000"; 47 | border-width:1px; 48 | } 49 | 50 | #canvasImage 51 | { 52 | position:absolute; 53 | right:0px; 54 | } 55 | 56 | #transparentGraphic 57 | { 58 | position:absolute; 59 | right:0px; 60 | top:0px; 61 | } -------------------------------------------------------------------------------- /JavaScript/QuadTree/README.txt: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2011 Mike Chambers 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | 23 | 24 | QuadTree implementation in JavaScript. 25 | 26 | Created by Mike Chambers 27 | http://www.mikechambers.com 28 | mikechambers@gmail.com 29 | 30 | Currently supports mapping 2d coordinates and items with bounds. 31 | 32 | http://www.mikechambers.com/blog/2011/03/21/javascript-quadtree-implementation/ 33 | 34 | There are a number of examples included which show different parts of using the tree. 35 | 36 | examples/collision.html : Shows how to use the QuadTree to optimize collision detection of circles of multiple sizes 37 | 38 | examples/insert.html : Shows how to insert points, and visually displays the nodes of the QuadTree. 39 | 40 | examples/insert_bounds.html : Shows how to insert items with dimensions / bounds, and visually displays the nodes of the QuadTree. 41 | 42 | examples/retrieve.html : Shows how to retrieve points in the same node as a specified point. 43 | 44 | examples/retrieve_bounds.html : Shows how to retrieve items in the same node as a specified item with bounds. 45 | 46 | 47 | 48 | -------------Point QuadTree Example-------------- 49 | var pointQuad = true; 50 | var bounds = { 51 | x:0, 52 | y:0, 53 | width:canvas.width, 54 | height:canvas.height 55 | } 56 | var quad = new QuadTree(bounds, pointQuad); 57 | 58 | //insert a random point 59 | quad.insert({x:12, y:25}); 60 | 61 | var items = quad.retrieve({x:11, y:20}); 62 | --------------------------------------------------- 63 | 64 | 65 | -------------Point QuadTree Example-------------- 66 | var bounds = { 67 | x:0, 68 | y:0, 69 | width:canvas.width, 70 | height:canvas.height 71 | } 72 | var quad = new QuadTree(bounds); 73 | 74 | //insert a random point 75 | quad.insert({ 76 | x:12, 77 | y:25, 78 | height:10, 79 | width:25}); 80 | 81 | var items = quad.retrieve({x:11, y:20, height:10, width:20}); 82 | 83 | --------------------------------------------------- 84 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/collision.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | QuadTree Collision Detection Example 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 | 55 | 56 |
57 | Show QuadTree Boundaries 58 | Circles : 10 | 59 | 100 | 60 | 250 | 61 | 500 62 |
63 |
64 | 65 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/draw.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | QuadTree Collision Detection Example 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/insert.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | QuadTree Insert Example 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | Click to add a point. 55 |
56 |
57 | 60 | 61 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/insert_bounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | QuadTree Insert Example 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | Click to add a rectangle. 55 |
56 |
57 | 60 | 61 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/retrieve.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | QuadTree Retrieve Example 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | Click to highlight all points in a region. 55 |
56 |
57 | 60 | 61 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/retrieve_bounds.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | QuadTree Retrieve Example 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | Click to highlight all rectangles in a region. 55 |
56 |
57 | 60 | 61 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/Circle.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | function Circle(bounds, radius) 26 | { 27 | Shape.call(this); 28 | 29 | this.snapToPixel = true; 30 | 31 | this._bounds = bounds; 32 | this.radius = radius; 33 | this.height = this.width = this.radius * 2; 34 | 35 | 36 | this._vx = Circle.MAX_SPEED * Math.random() + 1; 37 | 38 | //y velocity and direction 39 | this._vy = Circle.MAX_SPEED * Math.random() + 1; 40 | 41 | //pick a random direction on x axis 42 | if(Math.random() > .5) 43 | { 44 | this._vx *= -1; 45 | } 46 | 47 | //pick a random direction on y axis 48 | if(Math.random() > .5) 49 | { 50 | this._vy *= -1; 51 | } 52 | 53 | this._draw(); 54 | } 55 | 56 | Circle.prototype = new Shape(); 57 | 58 | Circle.prototype._bounds = null; 59 | Circle.prototype._vx = 0; 60 | Circle.prototype._vy = 0; 61 | Circle.MAX_SPEED = 4; 62 | 63 | Circle.prototype.height = 0; 64 | Circle.prototype.width = 0; 65 | Circle.prototype.radius = 0; 66 | Circle.prototype.isColliding = false; 67 | 68 | Circle.prototype._collidingCacheCanvas = null; 69 | Circle.prototype._normalCacheCanvas = null; 70 | 71 | Circle.prototype.update = function() 72 | { 73 | this.isColliding = false; 74 | 75 | this.x += this._vx; 76 | this.y += this._vy; 77 | 78 | if(this.x + this.width > this._bounds.width) 79 | { 80 | this.x = this._bounds.width - this.width - 1; 81 | this._vx *= -1; 82 | } 83 | else if(this.x < this._bounds.x) 84 | { 85 | this.x = this._bounds.x + 1; 86 | this._vx *= -1; 87 | } 88 | 89 | if(this.y + this.height > this._bounds.height) 90 | { 91 | this.y = this._bounds.height - this.height - 1; 92 | this._vy *= - 1; 93 | } 94 | else if(this.y < this._bounds.y) 95 | { 96 | this.y = this._bounds.y + 1; 97 | this._vy *= -1; 98 | } 99 | } 100 | 101 | Circle.prototype.setIsColliding = function(isColliding) 102 | { 103 | this.isColliding = isColliding; 104 | this._draw(); 105 | } 106 | 107 | Circle.prototype._draw = function() 108 | { 109 | if(this.isColliding) 110 | { 111 | if(this._collidingCacheCanvas) 112 | { 113 | this.cacheCanvas = this._collidingCacheCanvas; 114 | return; 115 | } 116 | } 117 | else 118 | { 119 | if(this._normalCacheCanvas) 120 | { 121 | this.cacheCanvas = this._normalCacheCanvas; 122 | return; 123 | } 124 | } 125 | 126 | var g = this.graphics; 127 | 128 | g.clear(); 129 | g.setStrokeStyle(1); 130 | g.beginStroke(Graphics.getRGB(0,0,0, 0.4)); 131 | 132 | if(this.isColliding) 133 | { 134 | g.beginFill("rgba(217,83,77,0.7)"); 135 | } 136 | else 137 | { 138 | g.beginFill("rgb(255,255,255)"); 139 | } 140 | 141 | g.drawCircle(this.radius, this.radius, this.radius); 142 | 143 | this.uncache(); 144 | this.cache(-1,-1, this.width + 2, this.height + 2); 145 | 146 | if(this.isColliding) 147 | { 148 | this._collidingCacheCanvas = this.cacheCanvas; 149 | } 150 | else 151 | { 152 | this._normalCacheCanvas = this.cacheCanvas; 153 | } 154 | } 155 | 156 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/Circle2.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | function Circle2(bounds, radius) 26 | { 27 | Shape.call(this); 28 | 29 | this.snapToPixel = true; 30 | 31 | this._bounds = bounds; 32 | this.radius = radius; 33 | this.height = this.width = this.radius * 2; 34 | 35 | 36 | this._vx = Circle2.MAX_SPEED * Math.random() + 1; 37 | 38 | //y velocity and direction 39 | this._vy = Circle2.MAX_SPEED * Math.random() + 1; 40 | 41 | //pick a random direction on x axis 42 | if(Math.random() > .5) 43 | { 44 | this._vx *= -1; 45 | } 46 | 47 | //pick a random direction on y axis 48 | if(Math.random() > .5) 49 | { 50 | this._vy *= -1; 51 | } 52 | 53 | this._draw(); 54 | } 55 | 56 | Circle2.prototype = new Shape(); 57 | 58 | Circle2.prototype._bounds = null; 59 | Circle2.prototype._vx = 0; 60 | Circle2.prototype._vy = 0; 61 | Circle2.MAX_SPEED = 4; 62 | 63 | Circle2.prototype.height = 0; 64 | Circle2.prototype.width = 0; 65 | Circle2.prototype.radius = 0; 66 | Circle2.prototype.isColliding = false; 67 | 68 | Circle2.prototype._collidingCacheCanvas = null; 69 | Circle2.prototype._normalCacheCanvas = null; 70 | 71 | Circle2.prototype.update = function() 72 | { 73 | this.isColliding = false; 74 | 75 | this.x += this._vx; 76 | this.y += this._vy; 77 | 78 | if(this.x + this.width > this._bounds.width) 79 | { 80 | this.x = this._bounds.width - this.width - 1; 81 | this._vx *= -1; 82 | } 83 | else if(this.x < this._bounds.x) 84 | { 85 | this.x = this._bounds.x + 1; 86 | this._vx *= -1; 87 | } 88 | 89 | if(this.y + this.height > this._bounds.height) 90 | { 91 | this.y = this._bounds.height - this.height - 1; 92 | this._vy *= - 1; 93 | } 94 | else if(this.y < this._bounds.y) 95 | { 96 | this.y = this._bounds.y + 1; 97 | this._vy *= -1; 98 | } 99 | } 100 | 101 | Circle2.prototype.setIsColliding = function(isColliding) 102 | { 103 | this.isColliding = isColliding; 104 | this._draw(); 105 | } 106 | 107 | Circle2.prototype._draw = function() 108 | { 109 | if(this.isColliding) 110 | { 111 | if(this._collidingCacheCanvas) 112 | { 113 | this.cacheCanvas = this._collidingCacheCanvas; 114 | return; 115 | } 116 | } 117 | else 118 | { 119 | if(this._normalCacheCanvas) 120 | { 121 | this.cacheCanvas = this._normalCacheCanvas; 122 | return; 123 | } 124 | } 125 | 126 | var g = this.graphics; 127 | 128 | g.clear(); 129 | g.setStrokeStyle(1); 130 | g.beginStroke(Graphics.getRGB(0,0,0, 0.3)); 131 | 132 | if(this.isColliding) 133 | { 134 | g.beginFill("rgba(217,83,77,0.8)"); 135 | } 136 | else 137 | { 138 | g.beginFill("rgba(255,255,255, 0.8)"); 139 | } 140 | 141 | g.drawCircle(this.radius, this.radius, this.radius); 142 | 143 | this.uncache(); 144 | this.cache(-1,-1, this.width + 2, this.height + 2); 145 | 146 | if(this.isColliding) 147 | { 148 | this._collidingCacheCanvas = this.cacheCanvas; 149 | } 150 | else 151 | { 152 | this._normalCacheCanvas = this.cacheCanvas; 153 | } 154 | } 155 | 156 | -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/draw.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var stage; 26 | var circles; 27 | var tree; 28 | 29 | var CIRCLE_COUNT = 500; 30 | var bounds; 31 | var shape; 32 | var fps; 33 | 34 | 35 | function init() 36 | { 37 | 38 | if(!(!!document.createElement('canvas').getContext)) 39 | { 40 | var d = document.getElementById("canvasContainer"); 41 | d.innerHTML = "This example requires a browser that supports the HTML5 Canvas element." 42 | return; 43 | } 44 | 45 | circles = []; 46 | 47 | var canvas = document.getElementById("canvas"); 48 | 49 | canvas.width = window.innerWidth; 50 | canvas.height = window.innerHeight; 51 | 52 | bounds = new Rectangle(0,0, canvas.width, canvas.height); 53 | 54 | stage = new Stage(canvas); 55 | shape = new Shape(); 56 | tree = new QuadTree(bounds, false, 7); 57 | 58 | fps = new Text(); 59 | fps.x = 10; 60 | fps.y = 15; 61 | 62 | stage.addChild(fps); 63 | 64 | var params = parseGetParams(); 65 | 66 | var circlesParam = params.circleCount; 67 | if(circlesParam) 68 | { 69 | circleCount = parseInt(circlesParam); 70 | 71 | if(circleCount) 72 | { 73 | CIRCLE_COUNT = circleCount; 74 | } 75 | } 76 | 77 | initCircle2s(); 78 | 79 | stage.autoClear = false; 80 | stage.update(); 81 | 82 | this.tick = tick_quad; 83 | 84 | Ticker.setFPS(60); 85 | //Ticker.setPaused(true); 86 | Ticker.addListener(stage); 87 | Ticker.addListener(window); 88 | } 89 | 90 | function initCircle2s() 91 | { 92 | var c; 93 | var g; 94 | 95 | var x, y; 96 | 97 | //note, we are sharing the same graphics instance between all shape instances 98 | //this saves CPU and memory, but could lead to some weird bugs, so keep that in mind 99 | 100 | var radius; 101 | for(var i = 0; i < CIRCLE_COUNT; i++) 102 | { 103 | radius = Math.ceil(Math.random() * 10) + 1; 104 | c = new Circle2(bounds, radius); 105 | 106 | x = Math.random() * bounds.width; 107 | y = Math.random() * bounds.height; 108 | 109 | if(x + c.width > bounds.width) 110 | { 111 | x = bounds.width - c.width - 1; 112 | } 113 | 114 | if(y + c.height > bounds.height) 115 | { 116 | y = bounds.height - c.height - 1; 117 | } 118 | 119 | c.x = x; 120 | c.y = y; 121 | 122 | stage.addChild(c); 123 | circles.push(c); 124 | tree.insert(c); 125 | } 126 | } 127 | 128 | function updateTree() 129 | { 130 | //todo: call clear 131 | 132 | //tree = new QuadTree(bounds); 133 | //tree.insert(circles); 134 | 135 | tree.clear(); 136 | tree.insert(circles); 137 | } 138 | 139 | function tick_quad() 140 | { 141 | //fps.text = "Balls : " + CIRCLE_COUNT + " / " + Math.round(Ticker.getMeasuredFPS()) + " fps"; 142 | for(var k = 0; k < CIRCLE_COUNT; k++) 143 | { 144 | circles[k].update(); 145 | } 146 | updateTree(); 147 | 148 | var items; 149 | var c; 150 | var len; 151 | var item; 152 | var dx, dy, radii; 153 | var colliding = false; 154 | 155 | 156 | for(var i = 0; i < CIRCLE_COUNT; i++) 157 | { 158 | c = circles[i]; 159 | 160 | items = tree.retrieve(c); 161 | len = items.length; 162 | for(var j = 0; j < len; j++) 163 | { 164 | item = items[j]; 165 | 166 | if(c == item) 167 | { 168 | continue; 169 | } 170 | 171 | if(c.isColliding && item.isColliding) 172 | { 173 | continue; 174 | } 175 | 176 | dx = c.x - item.x; 177 | dy = c.y - item.y; 178 | radii = c.radius + item.radius; 179 | 180 | colliding = (( dx * dx ) + ( dy * dy )) < (radii * radii); 181 | 182 | if(!c.isColliding) 183 | { 184 | c.setIsColliding(colliding); 185 | } 186 | 187 | if(!item.isColliding) 188 | { 189 | item.setIsColliding(colliding); 190 | } 191 | } 192 | } 193 | stage.update(); 194 | 195 | } 196 | 197 | function renderQuad() 198 | { 199 | var g = shape.graphics; 200 | g.clear(); 201 | g.setStrokeStyle(1); 202 | g.beginStroke("#000000"); 203 | 204 | drawNode(tree.root); 205 | } 206 | 207 | function drawNode(node) 208 | { 209 | var bounds = node._bounds; 210 | var g = shape.graphics; 211 | 212 | g.drawRect( 213 | abs(bounds.x) + 0.5, 214 | abs(bounds.y) + 0.5, 215 | bounds.width, 216 | bounds.height 217 | ); 218 | 219 | var len = node.nodes.length; 220 | 221 | for(var i = 0; i < len; i++) 222 | { 223 | drawNode(node.nodes[i]); 224 | } 225 | 226 | } 227 | 228 | //fast Math.abs 229 | function abs(x) 230 | { 231 | return (x < 0 ? -x : x); 232 | } 233 | 234 | function parseGetParams() 235 | { 236 | var getData = new Array(); 237 | var sGet = window.location.search; 238 | if (sGet) 239 | { 240 | sGet = sGet.substr(1); 241 | 242 | var sNVPairs = sGet.split("&"); 243 | 244 | for (var i = 0; i < sNVPairs.length; i++) 245 | { 246 | 247 | var sNV = sNVPairs[i].split("="); 248 | 249 | var sName = sNV[0]; 250 | var sValue = sNV[1]; 251 | getData[sName] = sValue; 252 | } 253 | } 254 | 255 | return getData; 256 | } 257 | 258 | window.onload = init; -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/insert.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var quad; 26 | var canvas; 27 | var stage; 28 | var shape; 29 | var drawColor; 30 | 31 | function init() 32 | { 33 | if(!(!!document.createElement('canvas').getContext)) 34 | { 35 | var d = document.getElementById("canvasContainer"); 36 | d.innerHTML = "This example requires a browser that supports the HTML5 Canvas element." 37 | return; 38 | } 39 | 40 | canvas = document.getElementById("canvas"); 41 | 42 | //prevent doublclicking on canvas from selecting text on the 43 | //page 44 | canvas.onselectstart = function () { return false; } 45 | 46 | stage = new Stage(canvas); 47 | shape = new Shape(); 48 | stage.addChild(shape); 49 | 50 | drawColor = Graphics.getRGB(0,0,0); 51 | 52 | stage.onMouseUp = onMouseUp; 53 | 54 | var isPointQuad = true; 55 | quad = new QuadTree({ 56 | x:0, 57 | y:0, 58 | width:canvas.width, 59 | height:canvas.height 60 | }, 61 | isPointQuad); 62 | } 63 | 64 | function onMouseUp(e) 65 | { 66 | quad.insert({x:e.stageX, y:e.stageY}); 67 | renderQuad(); 68 | stage.update(); 69 | } 70 | 71 | function renderQuad() 72 | { 73 | var g = shape.graphics; 74 | g.clear(); 75 | g.setStrokeStyle(1); 76 | g.beginStroke(drawColor); 77 | 78 | drawNode(quad.root); 79 | } 80 | 81 | function drawNode(node) 82 | { 83 | var bounds = node._bounds; 84 | var g = shape.graphics; 85 | 86 | g.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); 87 | 88 | var cLen = node.children.length; 89 | var childNode; 90 | if(cLen) 91 | { 92 | for(var j = 0; j < cLen; j++) 93 | { 94 | childNode = node.children[j]; 95 | g.beginStroke(drawColor); 96 | g.drawCircle(childNode.x, childNode.y,3); 97 | } 98 | } 99 | 100 | var len = node.nodes.length; 101 | 102 | for(var i = 0; i < len; i++) 103 | { 104 | drawNode(node.nodes[i]); 105 | } 106 | } 107 | 108 | window.onload = init; -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/insert_bounds.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var quad; 26 | var canvas; 27 | var stage; 28 | var shape; 29 | var drawColor; 30 | 31 | function init() 32 | { 33 | if(!(!!document.createElement('canvas').getContext)) 34 | { 35 | var d = document.getElementById("canvasContainer"); 36 | d.innerHTML = "This example requires a browser that supports the HTML5 Canvas element." 37 | return; 38 | } 39 | 40 | canvas = document.getElementById("canvas"); 41 | 42 | //prevent doublclicking on canvas from selecting text on the 43 | //page 44 | canvas.onselectstart = function () { return false; } 45 | 46 | stage = new Stage(canvas); 47 | shape = new Shape(); 48 | stage.addChild(shape); 49 | 50 | drawColor = Graphics.getRGB(0,0,0); 51 | 52 | stage.onMouseUp = onMouseUp; 53 | 54 | quad = new QuadTree({ 55 | x:0, 56 | y:0, 57 | width:canvas.width, 58 | height:canvas.height 59 | }); 60 | } 61 | 62 | function onMouseUp(e) 63 | { 64 | quad.insert({x:e.stageX, y:e.stageY, width:50, height:25}); 65 | renderQuad(); 66 | stage.update(); 67 | } 68 | 69 | function renderQuad() 70 | { 71 | var g = shape.graphics; 72 | g.clear(); 73 | g.setStrokeStyle(1); 74 | g.beginStroke(drawColor); 75 | 76 | drawNode(quad.root); 77 | } 78 | 79 | function drawNode(node) 80 | { 81 | var bounds = node._bounds; 82 | var g = shape.graphics; 83 | 84 | g.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); 85 | 86 | //console.log(node); 87 | var children = node.getChildren(); 88 | var cLen = children.length; 89 | var childNode; 90 | if(cLen) 91 | { 92 | for(var j = 0; j < cLen; j++) 93 | { 94 | childNode = children[j]; 95 | g.beginStroke(drawColor); 96 | 97 | g.drawRect(childNode.x, childNode.y, childNode.width, childNode.height); 98 | //g.drawCircle(childNode.x, childNode.y,3); 99 | } 100 | } 101 | 102 | var len = node.nodes.length; 103 | 104 | for(var i = 0; i < len; i++) 105 | { 106 | drawNode(node.nodes[i]); 107 | } 108 | 109 | } 110 | 111 | 112 | 113 | window.onload = init; -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/retrieve.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var quad; 26 | var canvas; 27 | var stage; 28 | var shape; 29 | var drawColor; 30 | var pointShape; 31 | 32 | function init() 33 | { 34 | if(!(!!document.createElement('canvas').getContext)) 35 | { 36 | var d = document.getElementById("canvasContainer"); 37 | d.innerHTML = "This example requires a browser that supports the HTML5 Canvas element." 38 | return; 39 | } 40 | 41 | canvas = document.getElementById("canvas"); 42 | 43 | //prevent doublclicking on canvas from selecting text on the 44 | //page 45 | canvas.onselectstart = function () { return false; } 46 | 47 | stage = new Stage(canvas); 48 | shape = new Shape(); 49 | pointShape = new Shape(); 50 | stage.addChild(shape); 51 | stage.addChild(pointShape); 52 | 53 | drawColor = Graphics.getRGB(0,0,0); 54 | 55 | stage.onMouseUp = onMouseUp; 56 | 57 | var isPointQuad = true; 58 | quad = new QuadTree({ 59 | x:0, 60 | y:0, 61 | width:canvas.width, 62 | height:canvas.height 63 | }, 64 | isPointQuad); 65 | 66 | initPoints(); 67 | renderQuad(); 68 | stage.update(); 69 | } 70 | 71 | function initPoints() 72 | { 73 | for(var i = 0; i < 250; i++) 74 | { 75 | quad.insert({x:Math.random() * canvas.width, y:Math.random() * canvas.height}); 76 | } 77 | } 78 | 79 | function onMouseUp(e) 80 | { 81 | var points = quad.retrieve({x:e.stageX, y:e.stageY}); 82 | 83 | renderPoints(points); 84 | stage.update(); 85 | } 86 | 87 | function renderPoints(points) 88 | { 89 | var len = points.length; 90 | var g = pointShape.graphics; 91 | g.clear(); 92 | var point; 93 | for(var i = 0; i < len; i++) 94 | { 95 | point = points[i]; 96 | g.beginStroke(drawColor); 97 | g.beginFill("#FF0000"); 98 | g.drawCircle(point.x, point.y,3); 99 | } 100 | } 101 | 102 | function renderQuad() 103 | { 104 | var g = shape.graphics; 105 | g.clear(); 106 | g.setStrokeStyle(1); 107 | g.beginStroke(drawColor); 108 | 109 | drawNode(quad.root); 110 | 111 | stage.update(); 112 | } 113 | 114 | function drawNode(node) 115 | { 116 | var bounds = node._bounds; 117 | var g = shape.graphics; 118 | 119 | g.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); 120 | 121 | var cLen = node.children.length; 122 | var childNode; 123 | if(cLen) 124 | { 125 | for(var j = 0; j < cLen; j++) 126 | { 127 | childNode = node.children[j]; 128 | g.beginStroke(drawColor); 129 | g.drawCircle(childNode.x, childNode.y,3); 130 | } 131 | } 132 | 133 | var len = node.nodes.length; 134 | 135 | for(var i = 0; i < len; i++) 136 | { 137 | drawNode(node.nodes[i]); 138 | } 139 | 140 | } 141 | 142 | 143 | 144 | window.onload = init; -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/scripts/retrieve_bounds.js: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2011 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | var quad; 26 | var canvas; 27 | var stage; 28 | var shape; 29 | var drawColor; 30 | var pointShape; 31 | 32 | function init() 33 | { 34 | if(!(!!document.createElement('canvas').getContext)) 35 | { 36 | var d = document.getElementById("canvasContainer"); 37 | d.innerHTML = "This example requires a browser that supports the HTML5 Canvas element." 38 | return; 39 | } 40 | 41 | canvas = document.getElementById("canvas"); 42 | 43 | //prevent doublclicking on canvas from selecting text on the 44 | //page 45 | canvas.onselectstart = function () { return false; } 46 | 47 | stage = new Stage(canvas); 48 | shape = new Shape(); 49 | pointShape = new Shape(); 50 | stage.addChild(shape); 51 | stage.addChild(pointShape); 52 | 53 | drawColor = Graphics.getRGB(0,0,0); 54 | 55 | stage.onMouseUp = onMouseUp; 56 | 57 | quad = new QuadTree({ 58 | x:0, 59 | y:0, 60 | width:canvas.width, 61 | height:canvas.height 62 | }); 63 | 64 | initPoints(); 65 | renderQuad(); 66 | } 67 | 68 | function initPoints() 69 | { 70 | var x,y; 71 | var w = 20; 72 | var h = 10; 73 | for(var i = 0; i < 250; i++) 74 | { 75 | x = Math.random() * canvas.width; 76 | y = Math.random() * canvas.height; 77 | 78 | //make sure our items dont outside of the top bounds 79 | //or else we have to end up doing extra checks 80 | if(x + w > canvas.width) 81 | { 82 | x = canvas.width - w - 2; 83 | } 84 | 85 | if(y + h > canvas.height) 86 | { 87 | y = canvas.height - h - 2; 88 | } 89 | 90 | quad.insert({ 91 | x:x, 92 | y:y, 93 | width:w, 94 | height:h}); 95 | } 96 | } 97 | 98 | function onMouseUp(e) 99 | { 100 | var points = quad.retrieve({ 101 | x:e.stageX, 102 | y:e.stageY, 103 | width:50, 104 | height:25 105 | }); 106 | 107 | renderPoints(points); 108 | //renderQuad(); 109 | } 110 | 111 | function renderPoints(points) 112 | { 113 | var len = points.length; 114 | var g = pointShape.graphics; 115 | g.clear(); 116 | var point; 117 | for(var i = 0; i < len; i++) 118 | { 119 | point = points[i]; 120 | g.beginStroke(drawColor); 121 | g.beginFill("#FF0000"); 122 | g.drawRect(point.x, point.y, point.width, point.height); 123 | //g.drawCircle(point.x, point.y,3); 124 | } 125 | 126 | stage.update(); 127 | } 128 | 129 | function renderQuad() 130 | { 131 | var g = shape.graphics; 132 | g.clear(); 133 | g.setStrokeStyle(1); 134 | g.beginStroke(drawColor); 135 | 136 | drawNode(quad.root); 137 | 138 | stage.update(); 139 | } 140 | 141 | function drawNode(node) 142 | { 143 | var bounds = node._bounds; 144 | var g = shape.graphics; 145 | 146 | g.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); 147 | 148 | //console.log(node); 149 | var children = node.getChildren(); 150 | var cLen = children.length; 151 | var childNode; 152 | if(cLen) 153 | { 154 | for(var j = 0; j < cLen; j++) 155 | { 156 | childNode = children[j]; 157 | g.beginStroke(drawColor); 158 | 159 | //draw rect 160 | g.drawRect(childNode.x, childNode.y, childNode.width, childNode.height); 161 | //g.drawCircle(childNode.x, childNode.y,3); 162 | } 163 | } 164 | 165 | var len = node.nodes.length; 166 | 167 | for(var i = 0; i < len; i++) 168 | { 169 | drawNode(node.nodes[i]); 170 | } 171 | 172 | } 173 | 174 | 175 | 176 | window.onload = init; -------------------------------------------------------------------------------- /JavaScript/QuadTree/examples/styles/styles.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | background-color:#333333; 4 | text-align:center; 5 | font-family: sans-serif; 6 | font-size: 12px; 7 | color: #CCCCCC; 8 | } 9 | 10 | a 11 | { 12 | color: #CCCCCC; 13 | } 14 | 15 | a:hover 16 | { 17 | text-decoration:none; 18 | } 19 | 20 | canvas 21 | { 22 | border-style:solid; 23 | border-width:1px; 24 | border-color:#000000; 25 | 26 | position:absolute; 27 | left:0px; 28 | top:0px; 29 | } 30 | 31 | #countLinks 32 | { 33 | position:absolute; 34 | right:0px; 35 | } 36 | 37 | #copyContainer 38 | { 39 | position:absolute; 40 | width:100%; 41 | left:0px; 42 | top:505px; 43 | text-align:left; 44 | } 45 | 46 | #canvasContainer 47 | { 48 | margin:0px auto; 49 | width:500px; 50 | margin-left: auto; 51 | margin-right: auto; 52 | position:relative; 53 | 54 | } 55 | 56 | #footer 57 | { 58 | position:fixed; 59 | bottom:5px; 60 | 61 | width:100%; 62 | margin-left: auto; 63 | margin-right: auto; 64 | } 65 | 66 | #canvas 67 | { 68 | -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 69 | -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 70 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 71 | 72 | background-color:#FFFFFF; 73 | } -------------------------------------------------------------------------------- /NoMoreCopies/NoMoreCopies.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/NoMoreCopies/NoMoreCopies.zip -------------------------------------------------------------------------------- /Phidgets/PhidgetsHelloWorld/PhidgetsHelloWorld-app.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | PhidgetsHelloWorld 4 | 1.0 5 | PhidgetsHelloWorld 6 | 7 | PhidgetsHelloWorld 8 | 9 | 10 | PhidgetsHelloWorld.swf 11 | standard 12 | false 13 | true 14 | false 15 | false 16 | portrait 17 | auto 18 | 19 | false 20 | false 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Phidgets/PhidgetsHelloWorld/PhidgetsHelloWorld.as: -------------------------------------------------------------------------------- 1 | /* 2 | The MIT License 3 | 4 | Copyright (c) 2010 Mike Chambers 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in 14 | all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 22 | THE SOFTWARE. 23 | */ 24 | 25 | package 26 | { 27 | import flash.display.Sprite; 28 | import flash.events.Event; 29 | 30 | //import the Phidget classes we need for this example 31 | //from the Phidget's library / SWC 32 | import com.phidgets.Phidget; 33 | import com.phidgets.PhidgetInterfaceKit; 34 | import com.phidgets.events.PhidgetEvent; 35 | 36 | public class PhidgetsHelloWorld extends Sprite 37 | { 38 | 39 | //reference to the Phidget Interface Kit we are connecting to 40 | private var interfaceKit:PhidgetInterfaceKit; 41 | 42 | //constructor 43 | public function PhidgetsHelloWorld() 44 | { 45 | //listen for when we are added to the stage 46 | addEventListener(Event.ADDED_TO_STAGE, onAddedToStage); 47 | } 48 | 49 | private function onAddedToStage(e:Event):void 50 | { 51 | removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage); 52 | 53 | //create instance of PhidgetInterfaceKit 54 | interfaceKit = new PhidgetInterfaceKit(); 55 | 56 | //listen for event that we need for this example 57 | 58 | //connected to proxy 59 | interfaceKit.addEventListener(PhidgetEvent.CONNECT, onConnect); 60 | 61 | //device attached 62 | interfaceKit.addEventListener(PhidgetEvent.ATTACH, onAttach); 63 | 64 | //device detached 65 | interfaceKit.addEventListener(PhidgetEvent.DETACH, onDetach); 66 | 67 | //disconnected from proxy 68 | interfaceKit.addEventListener(PhidgetEvent.DISCONNECT, onDisconnect); 69 | 70 | //proxy address. Usually localhost / 127.0.0.1, but can be any server 71 | //on any computer. The proxy returns proper security policy file 72 | var serverAddress:String = "127.0.0.1"; 73 | 74 | //port the proxy is listening on 75 | var serverPort:uint = 5001; 76 | 77 | //connect to the proxy and device 78 | interfaceKit.open("127.0.0.1", 5001); 79 | } 80 | 81 | //called when we connect to the proxy server 82 | private function onConnect(e:PhidgetEvent):void 83 | { 84 | //note, we cannot access any devices here yet, since 85 | //we have not connected to them. You have to wait for the 86 | //onAttach event 87 | trace("-------onConnect------- "); 88 | } 89 | 90 | //called when we attach / connect to the actual Phidget 91 | private function onAttach(e:PhidgetEvent):void 92 | { 93 | trace("-------onAttach------- "); 94 | 95 | //get a reference to the device we connected to 96 | var device:Phidget = e.Device; 97 | 98 | //print out a bunch of information about it 99 | trace(device.Name + " : " + device.Label); 100 | trace("Version : " + device.Version); 101 | trace("Serial : " + device.serialNumber); 102 | 103 | 104 | //output number / pin that the LED is connected to 105 | var outputPin:uint = 0; 106 | 107 | //state to set the output pin. true = on, false = off 108 | var state:Boolean = true; 109 | 110 | //set the output state for pin 0 to true / on. 111 | //this will turn on the LED 112 | interfaceKit.setOutputState(outputPin, state); 113 | 114 | //note, you have to explicitly turn it off, or else 115 | //it will stay on, even after the program has stopped running 116 | } 117 | 118 | //called when a device is detached. i.e. the USB cable is disconnected 119 | //while the program is running 120 | private function onDetach(e:PhidgetEvent):void 121 | { 122 | //you cannot access the devices here. 123 | trace("-------onDetach------- "); 124 | } 125 | 126 | //called once the connection to the proxy server is closed. 127 | private function onDisconnect(e:PhidgetEvent):void 128 | { 129 | //you cannot access the devices here 130 | trace("-------onAttach------- "); 131 | } 132 | } 133 | } -------------------------------------------------------------------------------- /Phidgets/PhidgetsHelloWorld/PhidgetsHelloWorld.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mikechambers/ExamplesByMesh/be6df84d5f2bb2a3553310abb0a081bb3b046c33/Phidgets/PhidgetsHelloWorld/PhidgetsHelloWorld.fla -------------------------------------------------------------------------------- /README.txt: -------------------------------------------------------------------------------- 1 | Various Examples and code created and shared by Mike Chambers 2 | 3 | http://www.mikechambers.com 4 | 5 | All code and examples are released under an MIT License 6 | 7 | The MIT License 8 | 9 | Copyright (c) 2011 Mike Chambers 10 | 11 | Permission is hereby granted, free of charge, to any person obtaining a copy 12 | of this software and associated documentation files (the "Software"), to deal 13 | in the Software without restriction, including without limitation the rights 14 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 15 | copies of the Software, and to permit persons to whom the Software is 16 | furnished to do so, subject to the following conditions: 17 | 18 | The above copyright notice and this permission notice shall be included in 19 | all copies or substantial portions of the Software. 20 | 21 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 22 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 23 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 24 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 25 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 26 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 27 | THE SOFTWARE. --------------------------------------------------------------------------------