Este documento presenta información sobre Core Image y Audio en iOS. Cubre conceptos básicos de Core Image como filtros, clases e implementación. También explica cómo usar System Sound, MPMusicPlayerController, MPMediaPickerController y AVAudioPlayer para reproducir audio en iOS. Finalmente, incluye una demostración de estas funcionalidades.

1. Core Image / Audio en iOS
iOS - Javier Sánchez Sierra - @jsanchezsierra
CEO&Founder - Emilio Aviles Avila - @techmi
BDigitalApps, Barcelona,15 de Noviembre de 2011
#bdigitalapps Slash Mobility

2. Indice
• Introducción a Core Image en iOS5
Conceptos básicos, arquitectura, clases, API, plataformas
Inicialización, filtrado, renderizado. Demo
• Audio en iOS
Audio en iOS. System Sound, Media Player, AVAudioPlayer
Demo
• Accelerate framework
Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.
Slash Mobility
@jsanchezsierra

3. Indice
• Introducción a Core Image en iOS5
Conceptos básicos, arquitectura, clases, API, plataformas
Inicialización, filtrado, renderizado. Demo
• Audio en iOS
Audio en iOS. System Sound, Media Player, AVAudioPlayer
OpenAL, Core Audio. Demo
• Accelerate framework
Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.
Slash Mobility
@jsanchezsierra

4. Core Image - Conceptos básicos
Filtros, procesado de imagen, pixel a pixel
filtro
sepia
original filtrada
Slash Mobility
@jsanchezsierra

5. Core Image - Conceptos básicos
Filtros
original filtrada
filtro filtro filtro
sepia color Hue b&w
Slash Mobility
@jsanchezsierra

6. Core Image - Conceptos básicos
Los filtros se pueden concatenar
filtro filtro filtro
sepia saturación b&w
original filtrada
Slash Mobility
@jsanchezsierra

7. Core Image - Arquitectura
Aplicaciones
Core Graphics Core Video Core Image
Open GL ES
Graphics Hardware
Slash Mobility
@jsanchezsierra

8. Core Image - Arquitectura
Aplicaciones
CPU Rendering
Core Graphics Core Video Core Image
GPU Rendering
Open GL ES
Graphics Hardware
Slash Mobility
@jsanchezsierra

9. Core Image en Mac OS X - iOS 5
Mac OS X iOS 5
• 130 filtros, usuario crea • 16 filtros, photo adjustment
• CIFilter, CIImage, CIContext, • CIFilter, CIImage, CIContext
CIKernel, CIFilterShape
• CPU / Open GL • CPU / Open GL ES 2
Slash Mobility
@jsanchezsierra

10. Core Image - Filtros disponibles en iOS5
Ajustes de Color
CIGammaAdjust Filtro CIHueAdjust Filtro CIColorControls
Filtro CIExposureAdjust Filtro CISepiaTone Filtro CIColorMatrix
Slash Mobility
@jsanchezsierra

11. Core Image - Filtros disponibles en iOS5
Estilo Ajustes de Color Ajustes Geometría
CIToneCurve CIAffineTransform
CIHightlightShadowAdjust
Generador
CIVibrance
CIStraighten
CIConstantColorGenerator
Filtro CITemperatureAndTint
Composite operation CICrop
CISourceOverCompositing Slash Mobility
@jsanchezsierra

12. Core Image - Filtros disponibles en OS X
• Blurs: Median, Gaussian, Motion y Noise
• Color Adjustments & Effects: Exposure, Gamma Adjust, y Sepia Tone
• Composition Operations: Addition and Multiply Blends, o Hard Light
• Distortions: Pinch, Circle Splash, y Vortex
• Generators: Star Shine y Lenticular Halo
• Geometry Adjustments: Crop, Scale, Rotate, y Affine transformation
• Transitions: Dissolve y Ripple
• Halftone, Tile y Posterize
Slash Mobility
@jsanchezsierra

13. Core Image - Filtros disponibles en OS X
CIPixelate CIPointllize CIBloom
CIEdges CICrystallize
CILineOverlay
CIGaussianBlur CIMotionBlur
Slash Mobility
@jsanchezsierra

14. Core Image - Filtros disponibles en OS X
CIColorBlendMode
CIColorPosterize
CICopyMachineTransition
CIColorInvert
CIDisolveTransition
CIColorMap
Slash Mobility
@jsanchezsierra

15. Core Image - Filtros disponibles en OS X
CIGlassDistortion
CIKaleidoscope CIEdgeWork
CIPerspectiveTransform
CIBumpDistortion
CIHoleDistortion
CICircularWrap
Slash Mobility
@jsanchezsierra

16. Core Image - Clases I
• CIFilter
Representa un efecto determinado
Cada filtro tiene sus propios parámetros
Producen una imagen como salida
• CIImage
Puede representar una imagen de un fichero o de un filtro
• CIContext
Core Image necesita un contexto para renderizar el resultado
Este contexto puede basarse en GPU o CPU
Slash Mobility
@jsanchezsierra

17. Core Image - Clases II
✓ Crear objeto tipo CIImage
image = [CIImage imageWithContentsOfURL:myURL];
✓ Crear un objeto tipo CIFilter
filter = [CIFilter filterWithName:@"CISepiaTone"];
[filter setValue:image forKey:kCIInputImageKey];
[filter setValue:[NSNumber numberWithFloat:0.8f] forKey:@”inputIntensity”];
✓ Crear objeto tipo CIContext
context = [CIContext contextWithOptions:nil];
✓ Renderiza la imagen de salida del filtro a CGImage
result = [filter valueForKey:kCIOutputImageKey];
cgimage = [context createCGImage:result fromRect:[result extent]];
Slash Mobility
@jsanchezsierra

18. Core Image - Definición del filtros I
• Los valores de entrada del filtro se asignan con key/value
CIFilter *filter = [CIFilter filterWithName:@”CISepiaTone”]
[filter setValue:image forKey:kCIInputImageKey];
[filter setValue:[NSNumber numberWithFloat:0.8f] forKey:@”inputIntensity”];
• La salida del filtro se obtiene mediante la propiedad outputImage
output = [filter valueForKey:kCIOutputImageKey]; // forma general
output = [filter outputImage]; // solamente en iOS
output = filter.outputImage; // solamente en iOS
• Acceso directo que permite crear, asignar valores y obtener resultado
output = [CIFilter filterWithName:@”CISepiaTone” keysAndValues: kCIInputImageKey, image,
@”inputIntensity”, [NSNumber numberWithFloat: 0.8f], nil].outputImage ;
Slash Mobility
@jsanchezsierra

19. Core Image - Definición del filtros II
• Comienzo aplicando el primer filtro: CISepiaTone (imagen -> output)
output = [CIFilter filterWithName:@”CISepiaTone” keysAndValues: kCIInputImageKey, image,
@”inputIntensity”, [NSNumber numberWithFloat: 0.8f], nil].outputImage;
• Aplico el siguiente filtro: CIHueAdjust (output -> output)
output = [CIFilter filterWithName:@”CIHueAdjust” keysAndValues: kCIInputImageKey, output,
@”inputAngle”, [NSNumber numberWithFloat: 0.8f], nil].outputImage;
filtro filtro
sepia HueAdjust
Cuando se aplica un filtro no se está realizando ningún tipo de procesado de
imagen a nivel de píxeles. Esto se hace posteriormente en la fase de renderizado.
Slash Mobility
@jsanchezsierra

20. Core Image - Renderizado
• Visualizar imagen de salida en objeto tipo UIImageView
• Salvar el resultado en PhotoLibrary
• Visualizar el resultado en una vista CAEAGLLayer (OpenGL)
• Pasar el resultado a CoreVideo
Slash Mobility
@jsanchezsierra

21. Core Image - Renderizado - UIImageView
• Renderiza la imagen CIImage en CGImage
CIContext *context = [CIContext context];
CIImage *ciimage = [filter outputImage];
CGImageRef cgimg = [context createCGImage:ciimage fromRect:[ciimage extent]];
view.image = [UIImage imageWithCGImage:cgimg orientation:ui_orientation([ciimage
properties]];
CGImageRelease(cgimg);
Slash Mobility
@jsanchezsierra

22. Core Image - Renderizado - Photo Library
• Crear un contexto en la CPU
CIContext *context = [CIContext contextWithOptions: [NSDictionary dictionaryWithObject:
[NSNumber numberWithBool:YES] forKey:kCIContextUseSoftwareRenderer]];
Porque contexto CPU? Te permitirá realizar procesos en el background.
El contexto GPU tiene limitaciones del tamaño de textura
El contexto CPU soporta imagenes de mayor tamaño
•Crea CGImage a partir de CIImage
CGImageRef cgimg = [cpu_context createCGImage:outputImage fromRect:[outputImage extent]];
•Añade la imagen CGImage a la libreria de fotos
ALAssetsLibrary *library = [ALAssetsLibrary new];
[library writeImageToSavedPhotosAlbum:cgimg metadata:[outputImage properties]
completionBlock:^(NSURL *assetURL, NSError *error) { }];
CGImageRelease(cgimg);
Slash Mobility
@jsanchezsierra

23. Core Image - Renderizado - CAEAGLLayer
Renderiza directamente a pantalla a traves de CAEAGLLayer
Evita buffers intermedios como CGImageRef
Crear el contexto usango el EAGLContext
EAGLContext *eagl_ctx = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
CIContext *ci_ctx = [CIContext contextWithEAGLContext:eagl_ctx];
Añadir código cada vez que se actualiza la pantalla
- (void)updateScreen {
CIImage *image = [filter outputImage];
[context drawImage:image atPoint:CGPointZero fromRect:[image extent]];
glBindRenderbuffer(GL_RENDERBUFFER, render_buffer);
[eaglContext presentRenderbuffer:GL_RENDERBUFFER];
}
Slash Mobility
@jsanchezsierra

24. Core Image - Renderizado - CoreVideo
Se renderiza directamente a través de CVPixelBufferRef
CIContext *context = [CIContext context];
CIImage *ciimage = [filter outputImage];
[context render:ciimage toCVPixelBuffer:pixelbuffer bounds:[ciimage extent]colorSpace:nil];
Te permite procesar frame a frame utilizando Core Video
Slash Mobility
@jsanchezsierra

25. Demo CoreImage Filters
Slash Mobility
@jsanchezsierra

26. Core Image -Referencias
Using Core Image on iOS and Mac OS X
WWDC 2011 - Session 422. Video
https://developer.apple.com/videos/wwdc/2011/#using-core-image-on-ios-mac-os-x
Core Image Programming Guide
http://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/CoreImaging/CoreImage.pdf
Core Image Filter Reference
http://developer.apple.com/library/mac/#documentation/graphicsimaging/reference/CoreImageFilterReference/
Reference/reference.html
CGImageProperties Reference
http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CGImageProperties_Reference/
Reference/reference.html
Slash Mobility
@jsanchezsierra

27. Indice
• Introducción a Core Image en iOS5
Conceptos básicos, arquitectura, clases, API, plataformas
Inicialización, filtrado, renderizado. Demo
• Audio en iOS
Audio en iOS. System Sound, Media Player, AVAudioPlayer
Demo
• Accelerate framework
Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.
Slash Mobility
@jsanchezsierra

28. Audio en iOS - Conceptos básicos
• System Sound
• MPMediaPlayerController, librería de música
• AVAudioPlayer
• Core Media
• Open AL
Slash Mobility
@jsanchezsierra

29. System Sound
• Añadir el framework AudioToolbox al proyecto
#import <AudioToolBoc/AudioToolbox.h>
• Crear la URL del sonido a reproducir sound.mp3
NSString *soundPath = [[NSBundle mainBundle] pathForResource:@”sound" ofType:@”mp3” inDirectory:@"/"];
CFURLRef SoundPathPathURL = (CFURLRef) [[NSURL alloc] initFileURLWithPath: soundPath]
• Creo el sonido y lo reproduzco
SystemSoundID systemSound;
AudioServicesCreateSystemSoundID ( SoundPathPathURL ,&systemSound);
AudioServicesPlaySystemSound(systemSound);
Slash Mobility
@jsanchezsierra

30. MPMusicPlayerController (Music Library)
• Añadir el framework MediaPlayer al proyecto
#import <MediaPlayer/MediaPlayer.h>
• Crear la URL del sonido a reproducir sound.mp3
MPMusicPlayerController *myPlayer =[MPMusicPlayerController applicationMusicPlayer ];
[myPlayer setQueueWithItemCollection: mediaItemCollection];
[myPlayer play];
• Extraer metadatos (título, artista, album, imagen...)
MPMediaItem *myTrack = [ myPlayer nowPlayingItem];
NSString *title=[myTrack valueForProperty: MPMediaItemPropertyTitle]];
NSString *artist=[myTrack valueForProperty: MPMediaItemPropertyArtist]];
UIImage *artworkImage= [[myTrack valueForProperty: MPMediaItemPropertyArtwork]
imageWithSize: CGSizeMake (120, 120) ]
• Métodos y propiedades
[myPlayer play]; [myPlayer nowPlayingItem];
[myPlayer pause]; [myPlayer currentPlaybackTime];
[myPlayer stop]; [myPlayer repeatMode];
[myPlayer skipToNextItem]; [myPlayer shuffleMode];
[myPlayer skipToPreviousItem]; [myPlayer playbackState];
[myPlayer skipToBeginning]; [myPlayer volumen];
Slash Mobility
@jsanchezsierra

31. MPMediaPickerController (Music Library)
• El controlador MPMediaPicker permite acceder a la librería de música
MPMediaPickerController *picker =[[MPMediaPickerController alloc] initWithMediaTypes: MPMediaTypeMusic];
picker.delegate = self; // MPMediaPickerControllerDelegate
picker.allowsPickingMultipleItems = YES;
picker.prompt = @"Añade las canciones a reproducir";
• Método delegado de MPMediaPickerControllerDelegate.
Se llama cuando el usuario ha seleccionado las canciones.
- (void) mediaPicker: (MPMediaPickerController *) mediaPicker
didPickMediaItems: (MPMediaItemCollection *) mediaItemCollection
{
...
[myPlayer setQueueWithItemCollection: mediaItemCollection];
...
}
Slash Mobility
@jsanchezsierra

32. AVAudioPlayer
• Añadir el framework AVFoundation al proyecto
#import <AVFoundation/AVFoundation.h>
• El controlador AVAudioPlayer permite reproducir un fichero de audio de mi App
NSURL * urlTrack = [[NSURL alloc] initFileURLWithPath:
[[NSBundle mainBundle] pathForResource:@"track" ofType:@"mp3"]];
AVAudioPlayer *track = [[AVAudioPlayer alloc] initWithContentsOfURL: urlTrack error: nil];
• Métodos y propiedades
[track prepareToPlay]; [track duration];
[track play]; [track currentTime];
[track pause]; [track meteringEnabled];
[track stop]; [track averagePowerForChannel];
[track playAtTime]; [track peakPowerForChannel];
[track volumen]; [track url];
[track rate]; [track data];
[track pan]; [track settings];
[track enableRate];
[track numberOfLoops];
Slash Mobility
@jsanchezsierra

33. Demo AudioLab
Slash Mobility
@jsanchezsierra

34. Demo StockSound
Slash Mobility
@jsanchezsierra

35. Indice
• Introducción a Core Image en iOS5
Conceptos básicos, arquitectura, clases, API, plataformas
Inicialización, filtrado, renderizado. Demo
• Audio en iOS
Audio en iOS. System Sound, Media Player, AVAudioPlayer
Demo
• Accelerate framework
Librerías BLAS, LAPACK. Calculo matricial, sistemas ecuaciones.
Slash Mobility
@jsanchezsierra

36. mobile Apps por categoría

37. Autocad WS - for iPad

38. iRhino 3D for iPad

39. Textile Architecture App for iPad

40. Textile Architecture App for iPad
Video
Search keywords: Textile Architecture iPad

41. LAPACK and BLAS
Linear Algebra PACKAge / Basic Linear Algebra Subprograms
iOS accelerate framework
<Accelerate/Accelerate.h>
cblas_dgemm(&order, TransA, TransB, &n, &m, &k,
alpha,A, lda,B,ldb,beta,C,ldc);
dgetrf_(&n, &n, a, &n, ipiv, &info);
dgetrs_("N", &n, &one, a, &n, ipiv, b, &n, &info);

42. LAPACK and BLAS
LINPACK Benchmark
how fast can you solve a system of linear equation?
performance in Mflops
iPad 2 using reference code
“Bland A”
take benefit of the hardware
I recommend you to migrate your
code to mobile devices, try it!

43. Desarrollador iOS/Android/Blackberry/..
• iOS Software Architect
• Albañil tecnológico
Mala gestión del proyecto - se encuentra solo ante el proyecto - línea a línea - proyectos donde las
especificaciones no están definidas - cambian a diario - plazos de entrega inaceptables - prisas -
desarrollos que comienzan sin tener diseñada la App - apps que no se testean - se suben al App Store
y luego te llaman diciendo que hay un error - crashes - etc... no se pierde tiempo diseñando -
testeando la App
El desarrollador va perdiendo confianza en el proyecto - se convierte en un mercenario - ya no es un
aliado - intentará acabar cuanto antes la App - si le llamas para seguir con el mantenimiento no querra
saber nada de ti - preferirá invertir su tiempo e ilusión en otros proyectos
• Cuida al desarrollador y valora su trabajo
Hay gente que lo hace bien - tu modelo de negocio dependerá de la movilidad - has de estar
preparado para gestionar un proyecto móvil - dedicar recursos a este sector - entender la
importancia de un buen diseño basado en la experiencia de usuario
Valora el trabajo del desarrollador - implica al desarrollador en el diseño y desarrollo del producto -
que disfrute con lo que sabe hacer - que no sea se convierta en un mercenario - crea equipo - busca a
los mejores - no hay mejor aliado que tener a un desarrollador contento

44. iOS headhunters - San Francisco
Hello Javier,
Thanks so much for getting back to me. I really appreciate it. Anyways,
do you have any buddies looking?
We'll send you a MacBook Air if you do! Hi Javier,
Cheers! No worries, let me know if you have any friends with good ios
development and if anyone in our firm places them our firm will write
XXXXX YYYYYY you a check for helping us out!
Senior Technical Recruiter
San Francisco, CA Thks!
XXXX YYY
Professional Headhunter at YYYY
San Francisco Bay Area
Pagan lo que sea por tener a los mejores - saben que el éxito de su producto depende de ellos - crean equipo -
perfiles vocacionales - se implican - valor añadido - eligen los proyectos - crean riqueza.

45. Slash Mobility
iOS - Javier Sánchez Sierra - @jsanchezsierra
CEO&Founder - Emilio Aviles Avila - @techmi
BDigitalApps, Barcelona,15 de Noviembre de 2011
#bdigitalapps