CSS3 Sketch 2

Click to play


Posted in CSS Sketch | Leave a comment

CSS Sketch 1 – Technique: Masking

Earlier, I was checking out Visionare designed by Madeo in the Czech. I was impressed by many of the animations. One thing that caught my attention was the “masking” of the bus that zooms back and forth in the “heart” logo.

It is possible to mask using CSS3 – I believe there is a “clip-path”, but it’s a little dodgy and not used here. Instead, it looks like the animation was created by putting all the graphics on an angle (-45deg in my case) and rotating a container (45deg in my case). The graphics just move in and out of a container with the overflow hidden. It’s a simple, but well thought out solution.

Below is a version without the rotation on the sky.

Car by Carnivius from 8-bit RoboCop in his car

Click to Play

See the original sketch: CSS Sketch 1

<style type="text/css"> .mask{ box-sizing:border-box; margin:0 auto; width:500px; height:500px; overflow:hidden; } .sky{ width:200px; height:500px; background: -webkit-linear-gradient(-45deg, white, skyblue ); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(-45deg, white, skyblue ); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(-45deg, white, skyblue ); /* For Firefox 3.6 to 15 */ background: linear-gradient(-45deg, white, skyblue ); /* Standard syntax */ transform:rotate(45deg); -ms-transform:rotate(45deg); /* IE 9 */ -webkit-transform:rotate(45deg); /* Opera, Chrome, and Safari */ position:relative; left:150px; overflow:hidden; } .notrotated{ transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -webkit-transform:rotate(0deg); /* Opera, Chrome, and Safari */ } .ground { background: -webkit-linear-gradient(bottom, brown, peru); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom, brown, peru); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom, brown, peru); /* For Firefox 3.6 to 15 */ background: linear-gradient(bottom, brown, peru ); /* Standard syntax */ height: 250px; left: -111px; position: relative; top: 206px; transform: rotate(-45deg); -ms-transform:rotate(-45deg); /* IE 9 */ -webkit-transform:rotate(-45deg); /* Opera, Chrome, and Safari */ width: 600px; } .road{ width: 600px; height:30px; top:10px; position:relative; background:DimGray; } .dash{ border-top:3px dashed GoldenRod; width:600px; height:20px; position:relative; top:13px; box-sizing:border-box; animation: roadDash 0.05s infinite linear; -webkit-animation: roadDash 0.05s infinite linear; } .car{ background:URL(http://www.majorcallisto.com/wp-content/uploads/robocop.png) no-repeat; width:96px; height:30px; position:relative; top:-33px; left:0px; animation: carDrive 10s infinite ease-in-out 2s; -webkit-animation: carDrive 10s infinite ease-in-out 2s; } @keyframes carDrive{ 0%{ left:0px; } 5%{ top:-40px; } 10%{ left:200px; } 20%{ left:150px; } 25%{ top:-30px; } 30%{ left:200px; } 40%{ left:220px; top:-40px; } 50%{ left:190px; top:-38px; } 80%{ left:300px; top:-28px; } 90%{ left:260px; } 99%{ left:650px; top:-40px; } } @-webkit-keyframes carDrive{ 0%{ left:0px; } 5%{ top:-40px; } 10%{ left:200px; } 20%{ left:150px; } 25%{ top:-30px; } 30%{ left:200px; } 40%{ left:220px; top:-40px; } 50%{ left:190px; top:-38px; } 80%{ left:300px; top:-28px; } 90%{ left:260px; } 99%{ left:650px; top:-40px; } } @keyframes roadDash { from {left: 0;} to {left: -15px;} } @-webkit-keyframes roadDash{ from {left: 0;} to {left: -15px;} } </style> <div class="mask"> <div class="sky"> <div class="ground"> <div class="road"> <div class="dash"> </div> <div class="car"> </div> </div> </div> </div> </div>

Posted in CSS Sketch | Leave a comment

CSS3 Sketch 1

Click to Play






Car by Carnivius from 8-bit RoboCop in his car

Posted in CSS Sketch | Leave a comment

Broke-Ass Mario Kart – Build Log 02

New Motors!

I decided to source more reliable motors than the ones I found at Active Surplus. I love Active, but they have an “as is” policy on a lot of their used equipment that made me nervous. Also, some of the motors were missing pretty essential things like brushes and they don’t have any fixtures on them to easily attach to a chassis or hubs to attach wheels.

I reached out to wheelchair repair companies around Toronto in the hopes of finding something more reliable. Wheelchair motors are incredibly heavy, so you could easily spend a few hundred on the shipping costs alone.

I shot off e-mails to about 10 companies, but I only heard back from Jay Wenmann at MEDIchair. MEDIchair and Jay were incredibly helpful, so I owe them some love. Jay said that they had motors in stock, but they could still be swapped into a chair, so they were fairly pricey – $250 each! He suggested that if I waited, I could probably get a pair with tires for about $200! Sure enough, Jay contacted me a few weeks later with an incredible deal on a beautiful pair of used motors.

MEDIchair is located out in Oakville, so I signed out an Autoshare car and drove to meet Jay in person. I asked Jay if he would be comfortable with other people contacting him in future to see if he had more motors. He said that he often had motors that were viable to resell and might even be less expensive than the ones I got – that’s an amazing resource – Jason Wenmann, Positioning and Mobility Technical Specialist, 905-825-5335, or jason at halton dot medichair dot com!

The two motors I got were caked in mud, dirt, dog hair and coffee stains. Similarly, my bike is covered in coffee stains, so I felt a connection to the unknown previous owner. I imagined how the motors would have fit into someone’s life and all the things that the motors enabled that individual to do. I felt they were cherished artifacts, so I spent a good hour or so scrubbing them down – they cleaned up real good!

The motors perform well enough with 12v, but they rip at 24v. I’m using 2x12v sla batteries (like car batteries) per motor connected in series – the voltage gets added for a total of 24v per motor. I calculated the speed with 24v, without a load, to be about 5.86 mph or 9.4 kph – walking speed is about 5 kph. I was especially pleased that I calculated the speed using PI on PI Day. Here’s how I calculated the speed:

  • Count the revolutions per 30 seconds
  • Multiply by 2 for rpm
  • Calculate the circumference using the diameter and the formula πd
  • Multiply the RPM by circumference for the distance per minute
  • Multiply the distance per minute by 60 to get the distance per hour
  • Convert to the appropriate distance unit. In my case, inches to miles and kilometers

The motors have a brake built in that’s engaged by default. Jay and I tested the motors before I left MEDIchair and we determined that the brakes release when you push a minimum of 15v through them, so you need a lot of power for the brakes to unlock and turn. I’ve seen online that many wheelchair motors allow the brake to be removed, but that doesn’t seem to be the case with these.


The first “chasis” for the Kart was built using wood from the blue pie trebuchet that was part of the CTT Pi Fighter 2 project. The motors were attached to angle steel brackets that were bolted into the wood plank. Unfortunately, the brackets extended beyond the back of the wood plank and the wood itself was very dry and kept splitting. The front wheels were two small furniture castor wheels that were screwed into a piece of wood and affixed to the front of the plank.

I noticed early on that the rear portion of the chassis was facing a lot of torsional stress. The angle brackets that extended beyond the rear got twisted fairly quickly with the ridiculous torque of the motors. I added a piece of wood to help support the brackets, but the wood split apart because of the screws and dryness.

On Saturday, March 22, 2014 I sent the following text message to my partner:

I remember laughing with giddy delight when I was first on the kart and it moved – I made a powered vehicle!

The second run of the motors was on the sidewalk in front of our office. Sitting on the kart, I flicked the switch on my “flux capacitor” and the kart took off. The kart hit a tiny bump in the pavement and the front wheels were knocked off, but the motors are so powerful the kart didn’t even slow down. I hurriedly reattached the wheels and tried again – the entire back of the chassis basically blew apart under the torsional stress. Then the front wheels blew apart. I had to start again. As lovely as recycling the old wood is, I had to work with better materials.

I rebuilt the chassis using new wood and angle brackets. Sadly, because the motor block is such a strange shape, it’s only attached to the wood with a single line of machine screws – that means that there is room for the wheels to move outward as the kart drives. This puts a great deal of strain on the chassis and will have to be remedied before the kart is finalised.

Here’s a second running of the kart inside. I crashed into a few things in the office.

It travels fast and hard – it’s amazing to ride.

Here’s the kart spinning in a circle of shin shattering doom:

One Motor from Christopher Lewis on Vimeo.

To control the motors, I ordered two Pololu High-Power Motor Driver 24v23 CS circuits. The major concern when working with motors is having enough power and the high amperage that the motors draw. High amp circuits can easily melt wire, heat up, etc., so you have to make sure you have the proper gauge wire and everything is properly rated. Beyond that, there isn’t much to it – don’t cross the streams.

With motors, the amperage changes based on the load. The Motor Drivers have a preferred amp limit – 23 amps or so. Much higher and I’ll need to add a heat sink to keep them cool. This presents a really funny issue that I haven’t got to yet. I can turn the motors on or off, but I can’t use the Drivers to steer until I’m sure it’s safe. I need to be sitting on the kart with my multimeter in my lap and driving it to test the amperage draw. Then I can safely attach the Drivers and figure out how to control them with an Arduino.

I’m working to add a joist between to two motors to counter some of the strain. I got to borrow an Angle Grinder – that was fun. Here’s a video of me cutting angle steel to brace the two motors together. FIRE:

Posted in Broke-Ass Mario Kart, Projects | Leave a comment

Broke-Ass Mario Kart – Build Log 01

The past few days have been spent testing my motors and hardware for my Broke-Ass Mario Kart project. I’ll be sharing a tear-down of the project at my FITC 2014 Talk, Broke-Ass Mario Kart.

I bought a simple, unmarked, mobility vehicle motor from Active Surplus.

The motor seems to run a little slow. I get about 42rpm with 12v or 64rpm with 24v. By my calculations, that will give me about 2.01kmh and 3.92kmh respectively. The average walking distance is about 4.8kmh, so I’m tempted to go with the 24v, but that’s a little heavy for my goals.

Below is a comparison of the speeds at 12v and 24v.

motor power comparison 12v, 24v from Christopher Lewis on Vimeo.

I’m probably going to use a motor shield to keep things easy, but I was interested in trying to use transistors and a capacitor, as seen here:

From the video, I was able to list the parts and make a rough illustration of the circuit in Fritzing:

- 2x 2n3055 Transistors
- 1x200v 220 uF Capacitor
- A diode “from a microwave” – I’m guessing that means something “beefy”
- A 12v SLA battery
- An Arduino, a POT, etc.

The circuit lets you send a PWM signal from Arduino to control the motor speed. It’s effective, but a little “burny”. At some point I must have shorted my Arduino to GND connection, because the wire started melting, I noticed the Arduino would get super hot if I used a 9v power supply and the diode on the capacitor can not handle 24v – I’ll need something “beefier”. In spite of the burniness, it runs well at 12v with my PC as power supply. Barely burny at all.

Besides all that, it works:

Motor with pot control. from Christopher Lewis on Vimeo.

The PWM circuit is the cheapest controller solution – I think it probably amounts to about $10 per motor, but it’s only 1 direction. I could build a type of circuit called an H-Bridge and try that to get forward and reverse, but I’m content with achieving a functional PWM circuit – I consider that a successful proof of the old, “you can do it cheaper yourself” approach.

Next step is to buy another motor to see if I can get higher RPM and order a motor shield to replace the PWM circuit.

Posted in Broke-Ass Mario Kart, Projects | Leave a comment

FITC 2014 – Broke-Ass Mario Kart: Node.js + Arduino

I’ll be a speaker at FITC 2014 in Toronto. Get your tickets to FITC 2014.

I’m going to be discussing ways to connect applications to powerful motors to move heavy loads, like a display or a human. The presentation will include a breakdown of a riding, multi-user Kart that uses Node.js, Arduino, wheel-chair motors and controllers. The goal is to help anyone who is an Arduino novice shortcut around some of the challenges and show designers/ developers etc. how easy it is to get off the screen.

Learn more about

Posted in Uncategorized | Leave a comment

Free Range Arduino


Looking to pair Arduino with mobile devices? Here are some notes from my Free Range Arduino presentation at FITC‘s Screens 2013.

Why?

Smartphones come bundled with powerful technology. Rather than buy and integrate sensors and communications, we can leverage the sensors already built into smartphones (Magnetometer, Accelerometer, Touchscreen, speakers, microphones etc.) and simultaneously augment our phones and the Arduino board. Bonus: we can use SMS and other amazing tech with our inexpensive buttons, switches and other triggers.

Bridging with a PC – many devices

Any phone browser that has websocket capabilities can be used to drive an Arduino. There are many ways this can be done but usually the structure involves an Arduino physically connected to a server and multiple web clients sending/ receiving data from that server. nodejs and noduino or node-arduino are great combos for this. Breakout.js is also very useful.

If you’re lucky, Breakoutjs requires very little to setup; it consists of a Java server that needs to be run and a firmata sketch that needs to be uploaded to the Arduino. The “getting started” example on the Breakoutjs site is helpful, but neglects to mention that you need to navigate to a test directory to try things out. For example, http://192.168.0.20:8887/examples/getting_started/blink_led.html

Mega ADK – Android devices

The Arduino Mega ADK lets us plug an Arduino board directly into an android device over an USB connection (e.g. type-a to the micro-b connector on many devices). Once connected, a custom application must be built to communicate between the android device and the Mega ADK. Probably, the easiest starting point for making an Android/ Arduino friendly application is the ADT (Android Developer Tools ide). However, documentation is generally poor and non-specific.

Bluetooth – Android devices

Using a Bluetooth Arduino module, like the Bluesmirf, you can connect directly to to your phone and communicate via an app. When used in conjunction with the powerful Amarino Toolkit you don’t really have to do much at all.

  • Install the Amarino apk on your Android device – available at the Amarino downloads page
  • Upload a sketch to your Arduino that responds to Serial data. Here’s my sketch.
  • Setup a bluesmirf and your Arduino board
  • Open Amarino and connect to your bluesmirf
  • Send messages to your board

Custom iOS cables – iOS Devices

Using the Redpark TTL Serial Cable, you can connect directly between a custom iOS application on your iOS device and your Arduino. Sadly, Apple requires special licensing for hardware enabled applications which will stop you from submitting your Arduino prototype to the App Store, but you can still upload directly to your device as long as you have the proper certification.

Paduino is a great pairing for this technique. The Paduino site offers downloads of an iOS app that can be built and deployed on your device and a sketch to deploy to your Arduino.

  • Connect the Redpark TTL Serial Cable to your Arduino board – you only need to connect the ground pins, Arduino rx to tx on the cable and Arduino tx to rx on the cable
  • Upload the Paduino friendly sketch to your board
  • Connect the Arduino to your iOS device
  • Open paduino

 

Custom FSK cable – whatever

This is my fav. technique. You use a TTRS audio connector (stereo and microphone audio) and the headphone jack on your device to send beeps back and forth between your Arduino and a custom application. This is the technique by which older modems operate. Frequency-shift keying involves modulating and demodulating (where we get the word ‘modem’ from) a signal so that it can be used to transmit data. An excellent introduction to FSK and Arduino.

Posted in Screens 2013 | Leave a comment

Gilded Crane

I’ve never been much of a fan of gold – I’ve always thought it lacks an aspect of the “understated” that I would associate with elegance. So, I’m entertained by my current obsession with the art of gilding – it has a delicacy that is incongruous with the gaudiness of gold accessories. If I’m honest, the Gilded Crane is something I merely wanted to see, but there is a lot that can be read into it.

In the Paper Dolls project I did with Breeyn McCarney, we explored the lack of value we attribute to materials like paper. Paper is something that is incredibly expensive to produce, at least when we use it as an infinite and disposable resource. The Gilded Crane could be considered another exploration of this. Origami adds value to paper through craft and artistry. Additionally, the illusion of value is added through gilding. To my knowledge, there is no way to effectively “harvest” or profit by the low financial value of gold leaf – in a sense, the gold itself has been disposed of since the act of gilding makes it impossible to reuse (without melting it off or burning the substrate).

Posted in Projects | Leave a comment

Slurpy Ford Wii Nunchuk Puppet

Use, spacebar, “c”, “s”, left, right, up and down arrows to control Slurpy:
Get Adobe Flash player

I’ve thought for a long time about how a Wii Nunchuk would be perfect for controlling a puppet. It has an accelerometer, a joystick and two buttons.

Accelerometers are sensors that measure proper acceleration – the orientation of an object relative to the Earth’s gravity. You can use an accelerometer to determine the direction that an object is facing. Probably the least expensive accelerometer is the Wii Nunchuk – off brand versions can be bought for $10 at big box stores. Additionally, they can be bought as chipsets that plug into arduinos – chips are usually start around $12 in physical stores and cheaper online, but you miss out on the benefits of the extra buttons/ joystick. Also, you can buy a Wii Nunchuk at a bigbox pharmacy at midnight on a whim.

Cut the end off the nunchuk and plug it into your arduino. Plug your arduino into a computer.
I’m using the wiichuck adapter from Todbot

It spits out serial data to whatever software you want to use. Sadly, you do need some scripting/ programming knowledge here. Fortunately, you can use all kinds of things, including node.

Here’s what the data looks like:
{“accx”:180, “accy”:125, “zbut”:0, “cbut”:0, “joyx”:122, “joyy”:130}

There was some interest in the assets and how they work. Here are the cutup pieces that I used:

Posted in Projects, Spotlight: Hardware | Leave a comment

Etch-a-Sketch Turntables

Arduino Sketch

For an upcoming project with CTT, we decided to make a giant etch-a-sketch out of a quadcopter, a UV laser, a giant glow in the dark wall and two turntables. As part of a bonus project I made a real etch-a-sketch that is controlled by 2 turntables. The turntables replace the knobs by controlling two gearmotors that spin forward or reverse in very tiny increments. In addition, this approach allows for computer controlled illustrations and perhaps doing things like uploading an image and having it draw on screen – I’m almost done this. Automated Etch-A-Sketches have been done before, but I’m using my own approach.

This works by using Time Coded Vinyl. TCV is a vinyl record album that has a timecode pressed into it instead of a “traditional” audio track. The TCV is interpreted by a hardware controller and sent to a computer via USB connection.

The Traktor 2 Scratch Pro software interprets the position of the playhead using the data received from the hardware controller. There is a 1 second track that loops based on the record input for each of the two turntables and it’s the playhead position on this track that is used for the midi out. This is then sent from Traktor 2 to a virtual midi device (LoopBe1) which is software that’s designed to behave as though it were a piece of midi hardware. This is specified in Traktor 2 Scratch Pro under Preferences > Controller Manager.

NO YOU CHECK YOUR OUTPUT ROUTING, BITCH! btw, this is a s’up tag, so, you know, s’up?

I’m using Node.js to receive the data and send to the arduino. The Node.js application uses Justin Latimer’s node-midi to receive the midi in data and Voodoo Tiki God’s node-Serialport to send serial messages to the arduino.

The arduino sketch receives the messages via serial and uses a Pololu MC33926 to send messages to the two gearbox motors.

I’m not going to include my whole node.js application because I’m a bit crap at node and embarassed, but here’s the whole server.js sketch. It should be all you need after you install the dependencies mentioned above:

(function() {

var midi;
midi = require(“midi”);
var SerialPort = require(“serialport”).SerialPort
var serialPort = new SerialPort(“COM13″, {
baudrate: 115200
});
serialPort.on(“open”, function () {
console.log(‘open’);
serialPort.on(‘data’, function(data) {
console.log(‘data received: ‘ + data);
});
});
var port = 0;
var input = new midi.input();

console.log(‘port count: ‘+input.getPortCount());
console.log(‘port name: ‘+input.getPortName(port));
var last_position = {a:0, b:0}
var seek_position = 1;
var max_speed = 0.1;
var max_range = 20;
var moving = {x:false, y:false}
input.on(‘message’, function(deltaTime, message) {

//console.log(message);
if (message[0] == 190){
//deck a
seek_position = message[2]/127*100;
diff = (seek_position – last_position.a);
last_position.a = seek_position;

if (Math.abs(diff) > 90){
return;
}else{
if (diff < 0){
//console.log("A right:" + diff);
moveDrone("right", (Math.min(Math.abs(diff)/max_range)*max_speed, max_speed));
}else if (diff >0){
//console.log(“A left:” + diff);
moveDrone(“left”, (Math.min(Math.abs(diff)/max_range)*max_speed, max_speed));
}else{
//should never happen
//console.log(“stop”);
moveDrone(“stop”, 0);
}
}

}else if(message[0] == 191){
//deck b
seek_position = message[2]/127*100;
diff = (seek_position – last_position.b);
last_position.b = seek_position;
if (Math.abs(diff) > 90){
return;
}else{
if (diff < 0){
//console.log("B up:" + diff);
moveDrone("back", (Math.min(Math.abs(diff)/max_range)*max_speed, max_speed));
}else if (diff >0){
//console.log(“B down:” + diff);
moveDrone(“front”, (Math.min(Math.abs(diff)/max_range)*max_speed, max_speed));
}else{
//should never happen
moveDrone(“stop”, 0);
}
}
}
});
function moveDrone($dir, $speed){
switch ($dir){
case “front”:
serialPort.write(“u\n”);
break;
case “back”:
serialPort.write(“d\n”);
break;
case “left”:
serialPort.write(“l\n”);
break;
case “right”:
serialPort.write(“r\n”);
break;
}
return;
}

input.openPort(port);
}).call(this);

The motors either advance or reverse in 10ms increments, hammering the motor shield with constant, tiny instructions. Because of the short increments, it appears to be continuous and fairly responsive to the record movements.

Posted in Projects, Spotlight: Hardware, Uncategorized | Leave a comment