Slide 1
Slide 1 text
Rediscover the joy of coding
with Creative Coding
26 Sep, 2023 We Are JavaScripters! @42nd
@kkeeth @kuwahara_jsri @kkeeth
Slide 2
Slide 2 text
Who am I
Slide 3
Slide 3 text
Who am I
Slide 4
Slide 4 text
Who am I
Slide 5
Slide 5 text
Introductory Remark 💁
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 👍
Slide 6
Slide 6 text
Let’s start 😆
Slide 7
Slide 7 text
About a year ago
Slide 8
Slide 8 text
🤔
Is there anything that combines
programming, mathematics and art ?
Slide 9
Slide 9 text
✕ Mathematics
JavaScript Art works
Slide 10
Slide 10 text
✕ Mathematics
JavaScript Art works
Creative Coding, Generative Art
Slide 11
Slide 11 text
I tryed it !!
Slide 12
Slide 12 text
URL: https://p5js.org/
Slide 13
Slide 13 text
URL: https://p5js.org/
👉
Slide 14
Slide 14 text
Processing
p5.js
Programming Language Java / (JavaScript) JavaScript
Operating Environment mainly PC Web Browser
Performance Normal little slow
Slide 15
Slide 15 text
URL: https://editor.p5js.org/
Slide 16
Slide 16 text
setup
This function is called once.
It's used to define initial
environment properties.
draw
Called directly after setup,
continuously executes the lines
of code contained inside its
block until the program is
stopped.
Slide 17
Slide 17 text
draw
Called directly after setup,
continuously executes the lines
of code contained inside its
block until the program is
stopped.
setup
This function is called once.
It's used to define initial
environment properties.
Slide 18
Slide 18 text
https://github.com/processing/p5.js/blob/v1.7.0/src/core/main.js#L418
Slide 19
Slide 19 text
✕
JavaScript Mathematics
Don’t worry 😆
ɾBasic trigonometric functions
ɾPolar coordinate system
ɾVector Concepts
Slide 20
Slide 20 text
Polar Coordinate System
Slide 21
Slide 21 text
Vector Concepts
Slide 22
Slide 22 text
Sample & Code
Slide 23
Slide 23 text
https://zenn.dev/kkeeth/articles/rose-curve-variations
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
r = sin(θ
n
d
)
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
core code 👉
only 7 lines!!
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
🤩 What fun !!
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Image By: https://openprocessing.org/user/299354?o=13&view=sketches
Slide 35
Slide 35 text
Have fun with p5.js 😆
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
No content