Crack the Code

Concept:

Welkom bij de Instructables van mijn ontwerp voor ITTT (If This Then That), een project in het curriculum van het eerste jaar van de studie Interaction Design op de Hogeschool voor de Kunsten Utrecht. Het doel van dit project is om kennis te maken met coderen, Arduino, mechanica en handvaardigheid. Ik heb zelf geprobeerd sterk na te denken over het ontwerp met oog op Interaction Design. Mijn uiteindelijk concept heet “Crack the Code”, een klein, portable doosje met 3 draaiknoppen en 4 LEDs. Het idee is om de speler de knoppen te laten draaien zodat alle LEDs aan gaan. Als de speler dit heeft bereikt, geeft het feedback door te knipperen en geluid te maken, waarna de code voor het doosje reset. Ik heb nagedacht over het ontwerp, zodat de gebruiker een impressie krijgt dat ze een kluisje aan het openen zijn, die zo intuïtief mogelijk moet werken.

Ontwerpproces:

Ik begon mijn proces met het bekijken van ander man hun projecten. Hier heb ik echter weinig inspiratie bij opgedaan, dus ben ik maar begonnen met zelf ideeën bedenken.

1. Een robotbloem, die met behulp van LDR een vector zou opstellen van de richting waar het meeste licht vandaan komt, waardoor een servo de bloem in de richting van de zon zou draaien. Daarnaast had ik ideeën dat de bloem kon openen en sluiten.
2. Met behulp van openFrameworks een applicatie en controller maken waarbij je de controller kon gebruiken om een 3d omgeving en objecten te manipuleren.
3. Een rubberbal met een g-sensor en gravitatiesensor die feedback zou kunnen geven over hoe hard je hem gooit en of dat pijn zou doen.
4. Een Morse-zender en ontvanger, dat je met elkaar kan communiceren, er is dan ook een live vertaler die de codes zou omzetten in normale woorden.

Ik heb tekeningen en schetsjes gemaakt hiervan, maar omdat dit grote ambitieuze projecten waren, ben ik begonnen bij de basis, en heb ik gewoon heel veel kleine Arduino-projectjes gemaakt, om zo uit te vogelen wat voor leuke interacties ik helemaal zelf kan bouwen. Alle video's met hun respectievelijke titel zijn te vinden boven deze "stap". Ze gaan op chronologische volgorde.

1. Het aansturen van een RGB-LED, elke seconde krijgt hij een andere kleur.
2. The Sonar , waarbij ik een sonar sensor voor input gebruikte om een LED steeds feller te laten branden des te dichterbij je komt.
3. The Button 1, een eerste ontwerp met een LED en een knop, die ervoor zorgt dat er je knop verschillende felheden krijgt. Het grappige hieraan is om te kijken op welke felheden je hem kan krijgen. Sosm landt hij op uit, andere keren op maximaal fel.
4. The Button 2, dit ontwerp gaat een stapje verder en geeft de knap 4 verschillende modi waar hij zich in kan bevinden. Kijk de video en probeer eens uit te vogelen wat die 4 modi zijn.
5. The Button 3, hierbij meet ik de duratie van het indrukken van de knop, en op basis daarvan laat ik de knop zo lang branden. Dus als iemand de knop 1 seconde inhoudt gedrukt. Dan blijft de LED 1 seconde lang branden als de gebruiker de knop loslaat.
6. The Game, dit is een directe iteratie van the Button 3, waarbij ik de duratie van de knop geheim houdt, en de speler moet zelf uitvogelen hoe lang hij de knop ingedrukt kan houden zonder dat hij hem in het rode gedeelte krijgt. Als het rode lichtje brandt, dan verlies je al je punten.
7. The music machine, hierbij probeerde ik geluid te manipuleren met meerdere inputs, je kan de pitch en frequentie tussen de tonen aanpassen, waardoor je een grappig geluid kan produceren.
8. In de laatste twee ontwerpen vond ik de interactie erg leuk, en ik wilde hierop verder itereren. Ik kwam op het idee om een soort kluis te creëren. De eerste versie hiervan was 3 led lampjes, die gekoppeld waren aan 3 potmeters. En als je de potmeters op de goede positie zou plaatsen, dan zullen alle LEDs branden. Toen ging ik een extra functie toevoegen die de code reset als je de code hebt gekraakt, en om dit duidelijk te maken aan de speler liet ik de LEDs knipperen.

sonar, alle reactieve systemen interactieve systemen eerste versie ontwerp verbeteringen met buzzer en andere layout final product waar heb ik over nagedacht bij het ontwerp van the final product, en waarom heb ik bepaalde keuzes niet gemaakt?

Reflectie

Hoe ging het project?

Ik vond het erg lastig om een idee te kiezen die ik uiteindelijk ging maken. In mijn ideeëngeneratie kan je zien dat ik ontzettend veel ideeën had die ik wilde proberen. Hierdoor kon ik echter niet echt een keuze maken voor uiteindelijk idee en heb ik het project steeds moeten uitstellen. Na een lange tijd en na geleerd te hebben over Interaction Design, heb ik besloten een van mijn interactieve ontwerpjes te gaan gebruiken voor ITTT. Een goed interactief systeem maken vond ik lastig, maar niet onmogelijk. Ik heb mijn eerste concept namelijk binnen één dag gemaakt.

Ik heb de code namelijk ook helemaal zelf geschreven, omdat ik graag zelf wil leren hoe ik moet coderen met Arduino. Ik heb bij al mij concepts de code helemaal zelf geschreven, en alleen gebruik gemaakt van de Arduino reference. Ik heb mijn kennis van een ander project, ECTTP, kunnen toepassen en zo mijn codeer vaardigheden vergroot. Ik heb al een cursus lasersnijden gedaan, dus mijn enige uitdaging lag in het leren van Adobe Illustrator 2015. Na 1 dag trial en error heb ik mijn gewilde resultaat kunnen bereiken. Het snijden verliep vlekkeloos. En het solderen ging gemiddeld, want het duurde wel langer dan gewild, maar dit was ook niet onmogelijk.

Wat heb ik geleerd en wat zou ik de volgende keer anders doen?

Ik besloot jumper wires te gebruiken voor de connecties bij het solderen. Het probleem met deze kabels is dat soldeertin er niet aan wilt blijven zitten zodra de kabels als eens is opgewarmd. Dit heeft te maken met het feit dat er een soort oxidatielaag ontstaat op de oppervlak van het draad als je er te lang met de soldeerbout tegenaan hebt gezeten. De volgende keer zou ik gebruik maken van koperdraad, wat volgens mij niet of minder last heeft van dit probleem. Wat ik heb geleerd qua persoonlijke vaardigheden, is dat ik veel kan bereiken als ik mijn tijd er maar in durf te steken. Ik kan meer dan ik denk.

Wat zijn mijn ideeën voor een volgende iteratie?

Meerdere doosjes die samen een ingewikkeld spel vormen, waarbij je eerst met een enkele doos hebt, maar die kan je steeds uitbreiden met meerdere doosjes die met elkaar kunnen communiceren. Bijvoorbeeld, als je de code op dit doosje drie keer kraakt, zal een LED op een ander doosje gaan branden. In plaats van potentiometers, rotary encoders gebruiken, zodat je meer het gevoel van een kluis nabootst. Daarnaast kan je dan meerdere waardes per encoder hebben, waarbij je net als een kluis, met de klok mee en tegen de klok in moet draaien, terwijl je niet over de gekozen waarde gaat, anders mislukt de kraakpoging Geluid toevoegen bij de potentiometers wanneer je in de buurt komt van de juiste positie, en wanneer je de juiste positie hebt bereikt. Hierdoor kan het spel ook gespeeld worden door mensen met slecht zicht.

Gebruikte onderdelen:

• 3x 10k potentiometers (inbegrepen bij arduino starterkit, maar kan je ook los kopen) https://www.tinytronics.nl/shop/en/components/res...
• 3x 6mm potentiometer knoppen https://www.tinytronics.nl/shop/en/components/kno...
• 3x gele LED https://www.tinytronics.nl/shop/en/components/kno...
• 1x groene LED 4x lage weerstanden (~560 Ohm)
• Buzzer https://www.tinytronics.nl/shop/en/components/kno...
• Arduino Nano (3rd party versie, originele versie werkt ook, zonder headers) https://www.tinytronics.nl/shop/en/components/kno...
• YwRobot Arduino Breadboard https://www.tinytronics.nl/shop/en/components/kno...
• 116 mm x 68 mm x 5 mm Xtandit powerbank
• 500 mm x 300 mm x 4 mm MDF 2x m2 standoffs
• 3x m2 schroeven
• "Jumper wires"
• Set krimpkous
• USB A to mini USB kabel 30cm

Gereedschap:

• Lijmpistool
• Soldeerset (soldeerbout, soldeertin, desoldeerapparaat)
• Boormachine
• Zijkniptang
• Lasersnijder
• Houtlijm

Uiteindelijk heb ik voor dit ontwerp gekozen. Degene die uiteindelijk de Crack the Code is geworden, in de foto's zie je het breadboard design, lay-out onderzoek, het elektrisch schema en het uiteindelijk product, van binnen en buiten.

Ik ben begonnen met het ontwerpen van het doosje. Ik ben met de maximale afmeting uitgegaan van de afmetingen van de powerbank. Omdat elke powerbank anders is, zal ik een set instructies geven over hoe je een doosje kan maken die perfect om jouw powerbank past.
Ik heb gebruik gemaakt van de site van makercase. Zet de afmeting van de “width” en “depth” op basis van de afmetingen van je powerbank. De hoogte is de hoogte van je powerbank, plus 60 mm voor de onderdelen. Dit zijn je “inside” afmetingen dus je moet de optie “inside” selecteren bij de volgende optie. Ik heb gebruik gemaakt van 4mm dik MDF, maar als je ander soort dikte gebruikt, selecteer dat bij “material thickness”. Bij “Edge joints”, selecteer “finger” en kies maximale grootte. Download je ontwerp dan als SVG en open het in een tekensoftware. Ik heb gebruik gemaakt van Adobe Illustrator 2015.

Hierin, teken rondjes van 6 mm in doorsnede voor de potmeters, en 2 mm voor de LEDs. De manier waarop ik ze heb georiënteerd heeft te maken met interaction design, zodat het duidelijk is welke potmeter voor welke LED zorgt.
Kopieer de bovenkant en verwijder de uitsteeksels aan de lange kant, om een extra plaatje te maken waarop de onderdelen kunnen worden bevestigd. Voeg extra inkepingen in op de korte zijde om waarin dit plaatje kan worden gestoken. Voeg daarna gaten erin voor waar de kabels komen, op de hoogte je powerbank, en aan de achterkant op de hoogte waar je de arduino wilt hebben. Daarna heb ik zelf extra tekeningen gemaakt die erop worden gegraveerd, waaronder cijfers en vormpjes. Deze heb ik echter weggehaald en in de lasersnij software zelf toegevoegd. Je kan mijn SVG tekeningen gebruiken als inspiratie, als template of als hulp.

Download/exporteer je SVG bestanden als .DXF bestanden zodat de lasersnijder je tekeningen kan begrijpen.

Zet de bestanden op een USB-stick of in een drive, zodat je erbij kan gaan bij de lasersnijder. Open je bestanden in de lasersnij software, en zorg ervoor dat de afmetingen van je tekeningen exact overeenkomen met de afmetingen in Adobe Illustrator. De afmetingen kunnen namelijk vervormen als je deze overzet naar de lasersnijder.

Voeg nu je extra vormen of tekst toe als je deze op het hout wilt laten graveren. Voor het snijden, lees de instructies van de snijder goed en volg het exact op. Als je onervaren bent, zorg dat er een begeleider bij staat. Zodra je je onderdelen hebt, kan je deze verven. Ik heb het geverfd met een glossy metallic spuitbus, waar 2 lagen voldoende leek. Gebruik hiervoor een open ruimte en volg hierbij ook de instructies op de spuitbus na.

Allereerst, boor gaten in het tussenplaatje op de hoogte van de YwRobot breadboard, en draai er de 2 standoffs in. Lijm dan alle plaatjes behalve de voorkant en bovenkant vast met behulp van houtlijm. Lees de instructies van deze lijm goed en volg het goed op, omdat deze erg kunnen verschillen per product. De reden dat je de twee overige plaatjes niet vastmaakt is zodat je nog bij alle elektronische onderdelen kan. In de bovenkant, lijm potmeters vast door het draai onderdeel van boven erin te steken, de onderkant van onder te verbinden, en deze dan vast te lijmen met een lijmpistool. Duw de vier LEDs van onder door de 2mm gaten en lijm deze op dezelfde manier vast.

Omdat je aardig weinig ruimte hebt in je doos, heb ik geprobeerd het zo overzichtelijk, makkelijk en duidelijk mogelijk te maken om te solderen. Daarbij heb ik een stappenplan gemaakt die de volgorde laat zien die ik heb gebruikt. 

1. Soldeer alle draadjes die op je Arduino komen, vast aan de juist pins aan de arduino. Ik gebruik rode draadjes voor de power en ground pins, oranje draadjes voor de potmeters. Potmeter 1 op A0, potmeter 2 op A1 en potmeter 3 op A2. Gele draadjes voor de gele LEDs. Pin 2 voor de bovenste LED, pin 3 voor de middelste LED en pin 4 voor de onderste LED. Een groen draad voor de groene LED komt op pin 5. Ik heb een blauwe draad voor de buzzer vastgemaakt op pin 6. 
2. Soldeer twee rode draadjes aan de YwRobot breadboard zodat je de twee power en ground lines met elkaar verbindt, dit maakt het makkelijker om de onderdelen van stroom te voorzien zometeen.
3. Soldeer draden aan de potentiometers hun plus en min. (maak hier en bij de volgende stappen gebruik van de krimpkousen, zodat er geen kortsluiting kan plaatsvinden en zodat er minder kans is dat de connectie kapot gaat.)
4. Soldeer een draad aan de minpoot van de buzzer.
5. Soldeer de weerstanden aan de minpoten van de LEDs, dit zijn de kortere poten. 
6. Soldeer al deze weerstanden en kabels aan de ground- en powerlines van de breadboard.
7. Soldeer dan alle kabels van de Arduino aan de elektronische onderdelen, dankzij de kleurcodes is het duidelijk waar ze moeten komen. Oranje op de potmeters, blauw van de buzzer, geel van de gele LEDs, groen van de groene LED, en rood van de power en ground. 

Nu alles vast zit kan je voorzichtig de boven- en voorkant vastmaken met lijm. Dan is je doosje klaar. Nu moet je alleen nog de code uploaden naar de arduino.

Ik heb gebruik gemaakt van de Arduino IDE om in te coderen. Sluit je Arduino aan via de USB kabel met een computer. Open Arduino IDE en selecteer de COM waar je Arduino op is aangesloten. Ik moest met mijn 3rd party Arduino de oude bootloader selecteren. Anders wilde de code niet uploaden. Kopieer de code en upload het naar je Arduino. Dan kan je de kabel eruit halen en in de powerbank steken, waardoor de Arduino zijn energie zal krijgen. 

Code:

const int leftPotPin = A0;
const int middlePotPin = A1;
const int rightPotPin = A2;

const int leftLedPin = 3;
const int middleLedPin = 4;
const int rightLedPin = 2;
const int greenLedPin = 5;

const int buzzerPin = 6;

int leftPotVal = 0;
int middlePotVal = 0;
int rightPotVal = 0;

int leftCode;
int middleCode;
int rightCode;

bool leftCodeCracked;
bool middleCodeCracked;
bool rightCodeCracked;


void setup() {
  pinMode(leftLedPin, OUTPUT);
  pinMode(middleLedPin, OUTPUT);
  pinMode(rightLedPin, OUTPUT);
  pinMode(greenLedPin, OUTPUT);
  pinMode(buzzerPin, OUTPUT);

  pinMode(leftPotVal, INPUT);
  pinMode(middlePotVal, INPUT);
  pinMode(rightPotVal, INPUT);

  Serial.begin(9600);
  restartSafe();  //call function at the setup to set random values for the locks

}

void loop() {
  leftPotVal = analogRead(leftPotPin);
  middlePotVal = analogRead(middlePotPin);
  rightPotVal = analogRead(rightPotPin);

  // check whether each lock is cracked, and set the LED on if true
  if (leftPotVal > leftCode - 50 && leftPotVal < leftCode + 50 ) {
    digitalWrite(leftLedPin, HIGH);
    leftCodeCracked = true;
  } else {
    digitalWrite(leftLedPin, LOW);
    leftCodeCracked = false;
  }
  if (middlePotVal > middleCode - 50 && middlePotVal < middleCode + 50 ) {
    digitalWrite(middleLedPin, HIGH);
    middleCodeCracked = true;
  } else {
    digitalWrite(middleLedPin, LOW);
    middleCodeCracked = false;
  }
  if (rightPotVal > rightCode - 50 && rightPotVal < rightCode + 50 ) {
    digitalWrite(rightLedPin, HIGH);
    rightCodeCracked = true;
  } else {
    digitalWrite(rightLedPin, LOW);
    rightCodeCracked = false;
  }

  //open and restart the safe when all locks have been cracked
  if (leftCodeCracked == true) {
    if (middleCodeCracked == true) {
      if (rightCodeCracked == true) {
        delay(100);
        digitalWrite(greenLedPin, HIGH);
        delay(1000);
        restartSafe();
      }
    }
  } else {
    digitalWrite(greenLedPin, LOW);
  }


}

void restartSafe() {
  for (int i = 0; i < 5; i++) {
    digitalWrite(leftLedPin, HIGH);
    digitalWrite(middleLedPin, HIGH);
    digitalWrite(rightLedPin, HIGH);
    digitalWrite(greenLedPin, HIGH);
    tone(buzzerPin, 1000);
    delay(100);
    digitalWrite(leftLedPin, LOW);
    digitalWrite(middleLedPin, LOW);
    digitalWrite(rightLedPin, LOW);
    digitalWrite(greenLedPin, LOW);
    noTone(buzzerPin);
    delay(100);
  }
  leftCode = random(10, 1014);
  middleCode = random(10, 1014);
  rightCode = random(10, 1014);

  Serial.print("code reprogrammed, leftCode = ");
  Serial.print(leftCode);
  Serial.print("  middleCode = ");
  Serial.print(middleCode);
  Serial.print("  rightCode = ");
  Serial.println(rightCode);
}