Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JavaScript × Mathematics go to Digital Art
kkeeth
November 19, 2022
Programming
1
94
JavaScript × Mathematics go to Digital Art
kkeeth
November 19, 2022
Tweet
Share
More Decks by kkeeth
See All by kkeeth
In-house study group at YUMEMI
clown0082
0
30
Playing Ionic Logo by p5.js
clown0082
0
36
Skills that employers recommend students to acquire
clown0082
0
110
Walking through the source code of an OSS Library(ESLint))
clown0082
0
130
Web components these days
clown0082
1
85
Walking through the source code of an OSS library(ESLint)
clown0082
0
56
A story of achievements after repeating various challenges
clown0082
1
3.7k
Let's play with Cypress
clown0082
0
53
Get Started "Firebase"
clown0082
0
80
Other Decks in Programming
See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
低レイヤーから始める GUI
fadis
18
9.2k
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
550
%q is for Quine
koic
0
400
Hasura の Relationship と権限管理
karszawa
0
160
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
110
ペパカレで入社した私が感じた2つのギャップと向き合い方
kosuke_ito
0
140
An Advanced Introduction to R
nicetak
0
1.7k
Gradle build: The time is now
nonews
1
390
ipa-medit: Memory search and patch tool for IPA without Jailbreaking/ipa-medit-bh2022-europe
tkmru
0
130
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.1k
Featured
See All Featured
Building an army of robots
kneath
301
40k
Designing for Performance
lara
600
65k
The Cult of Friendly URLs
andyhume
68
5.1k
Rails Girls Zürich Keynote
gr2m
87
12k
A better future with KSS
kneath
230
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
226
130k
How STYLIGHT went responsive
nonsquared
89
4.2k
Six Lessons from altMBA
skipperchong
15
2.3k
Design by the Numbers
sachag
271
18k
The Art of Programming - Codeland 2020
erikaheidi
35
11k
Transcript
JavaScript × Mathematics go to Digital Art 19 Nov, 2022
Front-end Conference Okinawa @kkeeth @kuwahara_jsri @kkeeth
Who am I
Who am I
Image By: https://openprocessing.org/user/299354?o=13&view=sketches
Introductory Remark1 💁 The title says "Digital Art”, but I'm
talking about "Generative Art”.
Introductory Remark2 💁 This slide is written in English. However,
I’m still learning English, and there may be some inappropriate expressions. So, please give me MASAKARI for my expressions 👍
Let’s start 😆
What’s the Generative Art
Do you know Generative Art? Let's look at some specific
pieces!😁
None
None
None
Complex and unpredictable art created using algorithmic and mathematical methods
💁
✕ Mathematics JavaScript
✕ Mathematics JavaScript 😆
✕ Mathematics JavaScript Frequently used 😆 • ɾBasics(function, variables, scope,
if, for…) • ɾrandom() function •ɾclass
✕ JavaScript Mathematics 😱
✕ JavaScript Mathematics Don’t worry 😆 ɾBasic trigonometric functions ɾPolar
coordinate system ɾVector Concepts
Polar Coordinate System
Vector Concepts
Tool/Library
URL: https://p5js.org/
URL: https://editor.p5js.org/
None
Sample & Code
None
r = sin(θ n d )
None
core code 👉 only 10 lines!!
At the end
Statements
Matt Pearson (ஶ), ԭ ܒհ (༁),ʮδΣωϥςΟϒɾΞʔτʕProcessingʹΑΔ࣮ફΨΠυʯ 2014 ংจ “δΣωϥςΟϒɾΞʔτίʔσΟϯάΛָ ͠ΉͨΊͷͷͰ͢ɻϓϩάϥϛϯάɺྑ
͍࣮ફɺߏɺޮͷͨΊ͚ͩͷͷͰ͋ Γ·ͤΜɻͦΕࣗ༝ɺ૾ྗɺදݱʹ͍ͭ ͯͷͷͰ͋Γ·͢ɻ”
Have fun with “Generative Art” 😆
References P5.js Tutorial | Create a generative art using image
data • https://youtu.be/me04ZrTJqWA p5.js Get Started • https://p5js.org/get-started/ δΣωϥςΟϒɾΞʔτɹProcessingʹΑΔ࣮ફΨΠυ • https://www.amazon.co.jp/dp/4861009634 Pinterst Search(generativeart) • https://onl.tw/2bhH4ZD Openprocessing • https://openprocessing.org/user/299354?o=13&view=sketches
None