SlideShare a Scribd company logo
1 of 16
Download to read offline
Tiling and Zooming
ASCII Art
iOS SOHO!
June 9th, 2014
Daniel Doubrovkine
@dblockdotorg
Francisco De Goya Y Lucientes, Señora Sabasa Garcia, ca. 1806/1811
https://artsy.net/artwork/francisco-jose-de-goya-y-lucientes-senora-sabasa-garcia
courtesy of the National Gallery of Art, Washington D.C.
UIScrollView + UIImageView
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:scrollView];
!
UIImage *image = [UIImage imageNamed:@"boy.jpg"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[scrollView addSubview:imageView];
!
scrollView.contentSize = image.size;
CenterOnPoint
- (void)centerOnPoint:(CGPoint)point
{
CGFloat x = point.x - (self.view.frame.size.width / 2.0f);
CGFloat y = point.y - (self.view.frame.size.height / 2.0f);
[self.scrollView setContentOffset:CGPointMake(round(x), round(y));
}
!
!
{
[self centerOnPoint:CGPointMake(image.size.width / 2, image.size.height / 2)];
}
Zoom on Tap
!
{
UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(handleDoubleTap:)];
[doubleTap setNumberOfTapsRequired:2];
[self.view addGestureRecognizer:doubleTap];
}
!
- (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer
{
[UIView animateWithDuration:0.3 animations:^{
self.imageView.frame = CGRectMake(0, 0,
self.imageView.frame.size.width + 100,
self.imageView.frame.size.height + 100);
self.scrollView.contentSize = self.imageView.frame.size;
}];
}
Pinch Zoom
{
scrollView.delegate = self;
scrollView.minimumZoomScale = 0.5;
scrollView.maximumZoomScale = 2;
}
!
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
{
self.imageView.frame = CGRectMake(0, 0,
self.image.size.width * self.scrollView.zoomScale,
self.image.size.height * self.scrollView.zoomScale);
self.scrollView.contentSize = self.imageView.frame.size;
}
!
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return self.imageView;
}
Different Images at Different Zoom Levels?
ARTiledImageDataSource
- (UIImage *)imageTileForLevel:(NSInteger)level x:(NSInteger)x y:(NSInteger)y;
- (CGSize)tileSize;
- (CGSize)imageSize;
- (NSInteger)minimumImageZoomLevel;
- (NSInteger)maximumImageZoomLevel;
- (void)drawRect:(CGRect)rect
• Translate the CGRect into the tile coordinate system at this scale.
!
NSInteger firstCol = floor(CGRectGetMinX(rect) / tileSize.width);
…
!
for (NSInteger row = firstRow; row <= lastRow; row++) {
for (NSInteger col = firstCol; col <= lastCol; col++) {
!
• Fetch each tile & draw with drawInRect:blendMode.
ARTiledImageView
ARTiledImageScrollView
https://github.com/dblock/ARTiledImageView
+ All The Size Maths
+ Scroll & Zoom Gestures
+ In-Memory Tile Cache
+ Local vs. Remote Tiles
WHERE’S THE
ASCII ART?
seriously …
UIImage to Text to UIImage
static const NSString * UIImageViewASCII_CharacterMap = @" .,;_-`*”;
!
…
!
int r = rawData[byteIndex] & 0xff;
int g = (rawData[byteIndex] >> 8) & 0xff;
int b = (rawData[byteIndex] >> 16) & 0xff;
!
NSInteger characterIndex = 7 - (((int)(r + g + b)/3) >> 5) & 0x7;
!
[UIImageViewASCII_CharacterMap characterAtIndex:characterIndex];
//
// UIImage+ASCII.h
// Pods
//
// Created by Daniel Doubrovkine on 3/23/14.
//
//
!
#import <UIKit/UIKit.h>
!
@interface UIImage (ASCII)
!
/**
* Convert an image to ASCII.
*
* @param font ASCII font.
* @param color Text color.
*
* @return Returns an image with the ASCII text.
*/
- (UIImage *)asciiImage:(UIFont *)font color:(UIColor *)color;
!
/**
* Convert an image to ASCII.
*
* @return Returns the ASCII text.
*/
- (NSString *)asciiText;
!
@end
Zoom Tiled ASCII Art?
Daniel Doubrovkine
@dblockdotorg!
dblock@dblock.org!
!
http://iphone.artsy.net
https://github.com/dblock/ARImageViewInsideScrollView!
https://github.com/dblock/ARTiledImageView!
https://github.com/dblock/ARASCIISwizzle!
https://github.com/objectiveSee/DRKonamiCode

More Related Content

What's hot

Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3
Lee Lundrigan
 
4 box andwhiskerplot
4 box andwhiskerplot4 box andwhiskerplot
4 box andwhiskerplot
Media4math
 
アプリを弄ってみる #2 #antama_ws
アプリを弄ってみる #2 #antama_wsアプリを弄ってみる #2 #antama_ws
アプリを弄ってみる #2 #antama_ws
Takahiro Yoshimura
 

What's hot (15)

Angular betabeers
Angular betabeersAngular betabeers
Angular betabeers
 
Storytelling with html5 2d&3d maps
Storytelling with html5 2d&3d mapsStorytelling with html5 2d&3d maps
Storytelling with html5 2d&3d maps
 
Variables
VariablesVariables
Variables
 
Legend ortauzunluk
Legend ortauzunlukLegend ortauzunluk
Legend ortauzunluk
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvas
 
3D drawing
3D drawing3D drawing
3D drawing
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
ES6 - Level up your JavaScript Skills
ES6 - Level up your JavaScript SkillsES6 - Level up your JavaScript Skills
ES6 - Level up your JavaScript Skills
 
3D Design with OpenSCAD
3D Design with OpenSCAD3D Design with OpenSCAD
3D Design with OpenSCAD
 
HTML5 Canvas
HTML5 CanvasHTML5 Canvas
HTML5 Canvas
 
Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3Interactive Graphics using Javascript, HTML5 and CSS3
Interactive Graphics using Javascript, HTML5 and CSS3
 
Iagc2
Iagc2Iagc2
Iagc2
 
Machine Tags
Machine TagsMachine Tags
Machine Tags
 
4 box andwhiskerplot
4 box andwhiskerplot4 box andwhiskerplot
4 box andwhiskerplot
 
アプリを弄ってみる #2 #antama_ws
アプリを弄ってみる #2 #antama_wsアプリを弄ってみる #2 #antama_ws
アプリを弄ってみる #2 #antama_ws
 

Similar to Tiling and Zooming ASCII Art @ iOSoho

Similar to Tiling and Zooming ASCII Art @ iOSoho (20)

Animations & swift
Animations & swiftAnimations & swift
Animations & swift
 
I phone勉強会 (2011.11.23)
I phone勉強会 (2011.11.23)I phone勉強会 (2011.11.23)
I phone勉強会 (2011.11.23)
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
Desenvolvimento iOS - Aula 4
Desenvolvimento iOS - Aula 4Desenvolvimento iOS - Aula 4
Desenvolvimento iOS - Aula 4
 
iOS 7 SDK特訓班
iOS 7 SDK特訓班iOS 7 SDK特訓班
iOS 7 SDK特訓班
 
HTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web GamesHTML5 Animation in Mobile Web Games
HTML5 Animation in Mobile Web Games
 
Макс Грибов — Использование SpriteKit в неигровых приложениях
Макс Грибов — Использование SpriteKit в неигровых приложенияхМакс Грибов — Использование SpriteKit в неигровых приложениях
Макс Грибов — Использование SpriteKit в неигровых приложениях
 
CakePHP in iPhone App
CakePHP in iPhone AppCakePHP in iPhone App
CakePHP in iPhone App
 
HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!HTML5 Canvas - Let's Draw!
HTML5 Canvas - Let's Draw!
 
CocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIViewCocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIView
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...Visual Component Testing  -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
Visual Component Testing -- w/ Gil Tayar (Applitools) and Gleb Bahmutov (Cyp...
 
Style vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOSStyle vs. Content and Clean Theming in iOS
Style vs. Content and Clean Theming in iOS
 
004
004004
004
 
Houdini - What lies ahead
Houdini - What lies aheadHoudini - What lies ahead
Houdini - What lies ahead
 
The Web map stack on Django
The Web map stack on DjangoThe Web map stack on Django
The Web map stack on Django
 
Supstat nyc subway
Supstat nyc subwaySupstat nyc subway
Supstat nyc subway
 
Intro to computer vision in .net
Intro to computer vision in .netIntro to computer vision in .net
Intro to computer vision in .net
 
Basics cocos2d
Basics cocos2dBasics cocos2d
Basics cocos2d
 

More from Daniel Doubrovkine

GeneralAssemb.ly Summer Program: Tech from the Ground Up
GeneralAssemb.ly Summer Program: Tech from the Ground UpGeneralAssemb.ly Summer Program: Tech from the Ground Up
GeneralAssemb.ly Summer Program: Tech from the Ground Up
Daniel Doubrovkine
 

More from Daniel Doubrovkine (20)

The Future of Art @ Worlds Fair Nano
The Future of Art @ Worlds Fair NanoThe Future of Art @ Worlds Fair Nano
The Future of Art @ Worlds Fair Nano
 
Nasdaq CTO Summit: Inspiring Team Leads to Give Away Legos
Nasdaq CTO Summit: Inspiring Team Leads to Give Away LegosNasdaq CTO Summit: Inspiring Team Leads to Give Away Legos
Nasdaq CTO Summit: Inspiring Team Leads to Give Away Legos
 
Product Development 101
Product Development 101Product Development 101
Product Development 101
 
Open-Source by Default, UN Community.camp
Open-Source by Default, UN Community.campOpen-Source by Default, UN Community.camp
Open-Source by Default, UN Community.camp
 
Your First Slack Ruby Bot
Your First Slack Ruby BotYour First Slack Ruby Bot
Your First Slack Ruby Bot
 
Single Sign-On with Waffle
Single Sign-On with WaffleSingle Sign-On with Waffle
Single Sign-On with Waffle
 
How it All Goes Down
How it All Goes DownHow it All Goes Down
How it All Goes Down
 
Taking Over Open Source Projects @ GoGaRuCo 2014
Taking Over Open Source Projects @ GoGaRuCo 2014Taking Over Open Source Projects @ GoGaRuCo 2014
Taking Over Open Source Projects @ GoGaRuCo 2014
 
Mentoring Engineers & Humans
Mentoring Engineers & HumansMentoring Engineers & Humans
Mentoring Engineers & Humans
 
Artsy ♥ ASCII ART
Artsy ♥ ASCII ARTArtsy ♥ ASCII ART
Artsy ♥ ASCII ART
 
The Other Side of Your Interview
The Other Side of Your InterviewThe Other Side of Your Interview
The Other Side of Your Interview
 
Hiring Engineers (the Artsy Way)
Hiring Engineers (the Artsy Way)Hiring Engineers (the Artsy Way)
Hiring Engineers (the Artsy Way)
 
Mentoring 101 - the Artsy way
Mentoring 101 - the Artsy wayMentoring 101 - the Artsy way
Mentoring 101 - the Artsy way
 
Building and Scaling a Test Driven Culture
Building and Scaling a Test Driven CultureBuilding and Scaling a Test Driven Culture
Building and Scaling a Test Driven Culture
 
Introducing Remote Install Framework
Introducing Remote Install FrameworkIntroducing Remote Install Framework
Introducing Remote Install Framework
 
HackYale 0-60 in Startup Tech
HackYale 0-60 in Startup TechHackYale 0-60 in Startup Tech
HackYale 0-60 in Startup Tech
 
Taming the Testing Beast - AgileDC 2012
Taming the Testing Beast - AgileDC 2012Taming the Testing Beast - AgileDC 2012
Taming the Testing Beast - AgileDC 2012
 
GeneralAssemb.ly Summer Program: Tech from the Ground Up
GeneralAssemb.ly Summer Program: Tech from the Ground UpGeneralAssemb.ly Summer Program: Tech from the Ground Up
GeneralAssemb.ly Summer Program: Tech from the Ground Up
 
Making Agile Choices in Software Technology
Making Agile Choices in Software TechnologyMaking Agile Choices in Software Technology
Making Agile Choices in Software Technology
 
From Zero to Mongo, Art.sy Experience w/ MongoDB
From Zero to Mongo, Art.sy Experience w/ MongoDBFrom Zero to Mongo, Art.sy Experience w/ MongoDB
From Zero to Mongo, Art.sy Experience w/ MongoDB
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 

Tiling and Zooming ASCII Art @ iOSoho

  • 1. Tiling and Zooming ASCII Art iOS SOHO! June 9th, 2014 Daniel Doubrovkine @dblockdotorg
  • 2. Francisco De Goya Y Lucientes, Señora Sabasa Garcia, ca. 1806/1811 https://artsy.net/artwork/francisco-jose-de-goya-y-lucientes-senora-sabasa-garcia courtesy of the National Gallery of Art, Washington D.C.
  • 3.
  • 4. UIScrollView + UIImageView UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds]; [self.view addSubview:scrollView]; ! UIImage *image = [UIImage imageNamed:@"boy.jpg"]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; [scrollView addSubview:imageView]; ! scrollView.contentSize = image.size;
  • 5. CenterOnPoint - (void)centerOnPoint:(CGPoint)point { CGFloat x = point.x - (self.view.frame.size.width / 2.0f); CGFloat y = point.y - (self.view.frame.size.height / 2.0f); [self.scrollView setContentOffset:CGPointMake(round(x), round(y)); } ! ! { [self centerOnPoint:CGPointMake(image.size.width / 2, image.size.height / 2)]; }
  • 6. Zoom on Tap ! { UITapGestureRecognizer *doubleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)]; [doubleTap setNumberOfTapsRequired:2]; [self.view addGestureRecognizer:doubleTap]; } ! - (void)handleDoubleTap:(UIGestureRecognizer *)gestureRecognizer { [UIView animateWithDuration:0.3 animations:^{ self.imageView.frame = CGRectMake(0, 0, self.imageView.frame.size.width + 100, self.imageView.frame.size.height + 100); self.scrollView.contentSize = self.imageView.frame.size; }]; }
  • 7. Pinch Zoom { scrollView.delegate = self; scrollView.minimumZoomScale = 0.5; scrollView.maximumZoomScale = 2; } ! - (void)scrollViewDidZoom:(UIScrollView *)scrollView { self.imageView.frame = CGRectMake(0, 0, self.image.size.width * self.scrollView.zoomScale, self.image.size.height * self.scrollView.zoomScale); self.scrollView.contentSize = self.imageView.frame.size; } ! - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return self.imageView; }
  • 8. Different Images at Different Zoom Levels?
  • 9. ARTiledImageDataSource - (UIImage *)imageTileForLevel:(NSInteger)level x:(NSInteger)x y:(NSInteger)y; - (CGSize)tileSize; - (CGSize)imageSize; - (NSInteger)minimumImageZoomLevel; - (NSInteger)maximumImageZoomLevel;
  • 10. - (void)drawRect:(CGRect)rect • Translate the CGRect into the tile coordinate system at this scale. ! NSInteger firstCol = floor(CGRectGetMinX(rect) / tileSize.width); … ! for (NSInteger row = firstRow; row <= lastRow; row++) { for (NSInteger col = firstCol; col <= lastCol; col++) { ! • Fetch each tile & draw with drawInRect:blendMode.
  • 11. ARTiledImageView ARTiledImageScrollView https://github.com/dblock/ARTiledImageView + All The Size Maths + Scroll & Zoom Gestures + In-Memory Tile Cache + Local vs. Remote Tiles
  • 13. UIImage to Text to UIImage static const NSString * UIImageViewASCII_CharacterMap = @" .,;_-`*”; ! … ! int r = rawData[byteIndex] & 0xff; int g = (rawData[byteIndex] >> 8) & 0xff; int b = (rawData[byteIndex] >> 16) & 0xff; ! NSInteger characterIndex = 7 - (((int)(r + g + b)/3) >> 5) & 0x7; ! [UIImageViewASCII_CharacterMap characterAtIndex:characterIndex];
  • 14. // // UIImage+ASCII.h // Pods // // Created by Daniel Doubrovkine on 3/23/14. // // ! #import <UIKit/UIKit.h> ! @interface UIImage (ASCII) ! /** * Convert an image to ASCII. * * @param font ASCII font. * @param color Text color. * * @return Returns an image with the ASCII text. */ - (UIImage *)asciiImage:(UIFont *)font color:(UIColor *)color; ! /** * Convert an image to ASCII. * * @return Returns the ASCII text. */ - (NSString *)asciiText; ! @end
  • 15. Zoom Tiled ASCII Art? Daniel Doubrovkine @dblockdotorg! dblock@dblock.org! ! http://iphone.artsy.net