SlideShare a Scribd company logo
My name sounds like
Gin & Juice.
Jinju Jang
@arle13
G’day m8!
I make apps @ Sportsmate
• Follow AFL, EPL, NBA, Cricket, and more 

with our apps! Check them out after this talk. 😎
I like to Create 💩 for fun!
• Generative art, doodling, and writing stories.
• Follow @arle13 on Twitter, Medium & Dribbble!
The topic
MATHS & GEOMETRY
with Framer
• Part 1: Mathematics for designers
‣ Why code, why maths?
‣ Basic trigonometry

• Part 2: Live Demos
‣ How to create geometric animations
‣ Save time with layer.copy() + layer.props
Demo #1
Demo #2
Why code, why maths?
Should designers learn
maths too?!😩
I gave up maths in year 8.
I thought designers don’t need maths at all.
(..That’s why I chose design 🙄)
You can still create practical prototypes
without learning maths.
Concept
for AIA Vitality
(2016)
But, creativity wise…
Something was always missing.
In my case, it was the animation.Hue
rotation
(2016)
Choctop
(2015)
Beautiful things are often made with maths.
✨ Apple ✨
✨ Pinterest ✨ ✨ Path ✨
Maths & geometry are the foundation 

for art, design and engineering.
–Johnny Appleseed
“Type a quote here.”
Maths
Creative
Mind
Beautiful
Things!
Let’s try out something fun with maths!
Basic trigonometry
Radial layout
✨ Keezy ✨
https://framer.cloud/cplKP
Keezy-ish
(2015)
Only 4 lines of code
were added.
Hmm… ?!
*Deep Breath*
First part = easy!
SECOND part = 😱?!
Radius
Math.cos / Math.sin
Math.PI
Small
Large
Cos for midX
Sin for midY
(Vice versa is also okay)
Thank you
@jagarikin
The angle
Points on
a circle
(Radians)
Offset
(Radians)
360° = 2 * Math.PI 💡
180° = 1 * Math.PI 💡
90° = 0.5 * Math.PI
45° = 0.25 * Math.PI
…or…
23° = (23/180) * Math.PI 💡
2 PI
0/5
2/5
3/5
4/5
1/5
In a for loop..!
Starts from
here
+ Offset
2 PI
0/5
2/5
3/5
4/5
1/5
Adjusting By adding
offset angle!
It may seem tricky…,
but you’ll find it easier with a live example! 😆
Demo Time
Time to explore more
with demos!
✨Download demos ✨
Demo 1
https://framer.cloud/FxGNP
Demo 2
https://framer.cloud/UgLwE/
Thank you!
& Let’s keep in touch. :)
@arle13
jinju.io

More Related Content

Similar to Generative art! Math & Geometry with Framer

The Shape of Things to Come: Learning in 3D
The Shape of Things to Come: Learning in 3DThe Shape of Things to Come: Learning in 3D
The Shape of Things to Come: Learning in 3D
Karen Bosch
 
Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...
Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...
Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...
Codemotion
 
Game tech using kodu adarsha
Game tech using kodu adarshaGame tech using kodu adarsha
Game tech using kodu adarsha
Adarsha Datta
 
Graphics design presentation
Graphics design presentationGraphics design presentation
Graphics design presentation
Chalkboard Cosmos
 
Open creative toolkit_apps_3
Open creative toolkit_apps_3Open creative toolkit_apps_3
Open creative toolkit_apps_3
Jessica Campbell
 
Open /// Creative Toolkit
Open /// Creative ToolkitOpen /// Creative Toolkit
Open /// Creative Toolkit
Adrian Franks
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
Christian Heilmann
 
FETC 2015 Advanced Game Design Presentation - Workshop
FETC 2015 Advanced Game Design Presentation - WorkshopFETC 2015 Advanced Game Design Presentation - Workshop
FETC 2015 Advanced Game Design Presentation - Workshop
Mike Ploor
 
Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)
Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)
Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)
Karen Bosch
 
Why design sprints are awesome
Why design sprints are awesomeWhy design sprints are awesome
Why design sprints are awesome
Alison Boncha
 
Jonathan Ive
Jonathan IveJonathan Ive
Jonathan Ive
samonji13
 
How ESUP-Portail contributes to open source software for higher ed
How ESUP-Portail contributes to open source software for higher edHow ESUP-Portail contributes to open source software for higher ed
How ESUP-Portail contributes to open source software for higher ed
matguerin
 
Android User Interface Design
Android User Interface Design Android User Interface Design
Android User Interface Design
Ahmad Firoz
 
AI for Nonprofits What You Need to Know-.pdf
AI for Nonprofits What You Need to Know-.pdfAI for Nonprofits What You Need to Know-.pdf
AI for Nonprofits What You Need to Know-.pdf
TechSoup
 
Ace the Tech Interviews - www.hiredintech.com
Ace the Tech Interviews - www.hiredintech.comAce the Tech Interviews - www.hiredintech.com
Ace the Tech Interviews - www.hiredintech.com
Anton Dimitrov
 
Quality on Tap
Quality on TapQuality on Tap
Quality on Tap
Liz Myers
 
Creative Design
Creative DesignCreative Design
Creative Design
louismcmanus
 
MSP 7th - Gayoung Ryoo (English)
MSP 7th - Gayoung Ryoo (English)MSP 7th - Gayoung Ryoo (English)
MSP 7th - Gayoung Ryoo (English)
가영 류
 

Similar to Generative art! Math & Geometry with Framer (18)

The Shape of Things to Come: Learning in 3D
The Shape of Things to Come: Learning in 3DThe Shape of Things to Come: Learning in 3D
The Shape of Things to Come: Learning in 3D
 
Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...
Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...
Christian Heilmann - Building human interfaces powered by AI - Codemotion Ber...
 
Game tech using kodu adarsha
Game tech using kodu adarshaGame tech using kodu adarsha
Game tech using kodu adarsha
 
Graphics design presentation
Graphics design presentationGraphics design presentation
Graphics design presentation
 
Open creative toolkit_apps_3
Open creative toolkit_apps_3Open creative toolkit_apps_3
Open creative toolkit_apps_3
 
Open /// Creative Toolkit
Open /// Creative ToolkitOpen /// Creative Toolkit
Open /// Creative Toolkit
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
FETC 2015 Advanced Game Design Presentation - Workshop
FETC 2015 Advanced Game Design Presentation - WorkshopFETC 2015 Advanced Game Design Presentation - Workshop
FETC 2015 Advanced Game Design Presentation - Workshop
 
Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)
Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)
Knowing and Showing: Creating Digital Learning Artifacts (update 11/17)
 
Why design sprints are awesome
Why design sprints are awesomeWhy design sprints are awesome
Why design sprints are awesome
 
Jonathan Ive
Jonathan IveJonathan Ive
Jonathan Ive
 
How ESUP-Portail contributes to open source software for higher ed
How ESUP-Portail contributes to open source software for higher edHow ESUP-Portail contributes to open source software for higher ed
How ESUP-Portail contributes to open source software for higher ed
 
Android User Interface Design
Android User Interface Design Android User Interface Design
Android User Interface Design
 
AI for Nonprofits What You Need to Know-.pdf
AI for Nonprofits What You Need to Know-.pdfAI for Nonprofits What You Need to Know-.pdf
AI for Nonprofits What You Need to Know-.pdf
 
Ace the Tech Interviews - www.hiredintech.com
Ace the Tech Interviews - www.hiredintech.comAce the Tech Interviews - www.hiredintech.com
Ace the Tech Interviews - www.hiredintech.com
 
Quality on Tap
Quality on TapQuality on Tap
Quality on Tap
 
Creative Design
Creative DesignCreative Design
Creative Design
 
MSP 7th - Gayoung Ryoo (English)
MSP 7th - Gayoung Ryoo (English)MSP 7th - Gayoung Ryoo (English)
MSP 7th - Gayoung Ryoo (English)
 

Recently uploaded

International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
DakshGudwani
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 

Recently uploaded (20)

International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
LGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation TemplateLGBTQIA Pride Month presentation Template
LGBTQIA Pride Month presentation Template
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 

Generative art! Math & Geometry with Framer