Hoe ik vissen liet zwemmen

Van vingerbeweging naar vissenpad

Tijdens het prototypen wilde ik de animatie een menselijk, speels gevoel geven. Daarom bouwde ik een systeem dat mijn vingerbeweging vastlegde en omzette naar paden:

• Ik veegde met mijn vinger over het scherm; de app sloeg de x- en y-coördinaten per frame op.
• Die coördinaten werden geconverteerd naar een route (polyline/spline) voor de vissen.
• Bij het starten van de app volgden de vissen deze paden — alsof ze mijn hand achterna zwommen.

Interactie: sneller zwemmen bij aanraking

De vissen reageren op touch-events. Raak je een vis (of het water) aan, dan verhoogt de app tijdelijk hun snelheid en soms de dichtheid van de school. Zo voelt de intro levendig en reageert hij direct op de gebruiker.

Techniek in het kort (Objective-C)

Onderstaand fragment laat zien hoe ik touchpunten opsla en omzet naar een pad dat elk visje kan volgen. (Vereenvoudigd voor leesbaarheid.)

// Touch-opname (UIView / Scene overlay)
@property (nonatomic, strong) NSMutableArray<NSValue *> *touchPoints;

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UITouch *t = [touches anyObject];
    CGPoint p = [t locationInView:self.view];
    if (!self.touchPoints) self.touchPoints = [NSMutableArray array];
    [self.touchPoints addObject:[NSValue valueWithCGPoint:p]];
}

// Pad genereren (vereenvoudigd) en toewijzen aan vissen
- (UIBezierPath *)pathFromTouchPoints {
    UIBezierPath *path = [UIBezierPath bezierPath];
    if (self.touchPoints.count == 0) return path;
    CGPoint start = [self.touchPoints.firstObject CGPointValue];
    [path moveToPoint:start];
    for (NSValue *v in self.touchPoints) {
        [path addLineToPoint:[v CGPointValue]];
    }
    return path;
}

// Elke vis krijgt een offset op hetzelfde basispad voor variatie
- (void)assignPathToFish:(FishSprite *)fish basePath:(UIBezierPath *)path offset:(CGFloat)offset {
    // offset vertaalt het pad subtiel in y-richting of via tijdsverschuiving
    fish.motionPath = [path copy];
    fish.pathOffset = offset;
}
  

Waarom dit werkt voor de beleving

• Natuurlijker ritme: handgetekende paden hebben microvariaties die “levend” aanvoelen.
• Directe feedback: aanraking = versnellen. Kinderen en volwassenen snappen het intuïtief.
• Techniek ondersteunt emotie: code maakt de magie mogelijk, maar de beleving staat centraal.

Les die ik meenam

Niet elke animatie hoeft uit een tool of keyframe-editor te komen. Soms levert een tactiele aanpak — beweging opnemen met je vinger — precies dat organische gevoel op dat je met pure code lastig benadert. De combinatie van touch-opname, paden genereren en real-time interactie maakte van een simpele intro een klein, speels moment van verwondering.