kkeeth
November 19, 2022
150

# JavaScript × Mathematics go to Digital Art

## kkeeth

November 19, 2022

## Transcript

1. JavaScript × Mathematics

go to Digital Art
19 Nov, 2022 Front-end Conference Okinawa
@kkeeth @kuwahara_jsri @kkeeth

2. Who am I

3. Who am I

4. Image By: https://openprocessing.org/user/299354?o=13&view=sketches

5. Introductory Remark1 💁

The title says "Digital Art”,

but I'm talking about "Generative Art”.

6. 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 👍

7. Let’s start 😆

8. What’s the

Generative Art

9. Do you know Generative Art?

Let's look at some specific pieces!😁

10. Complex and unpredictable art created using
algorithmic and mathematical methods 💁

11. ✕ Mathematics
JavaScript

12. ✕ Mathematics
JavaScript
😆

13. ✕ Mathematics
JavaScript
Frequently used 😆

• ɾBasics(function, variables,
scope, if, for…)

• ɾrandom() function

•ɾclass

14. JavaScript Mathematics
😱

15. JavaScript Mathematics
Don’t worry 😆

ɾBasic trigonometric functions

ɾPolar coordinate system

ɾVector Concepts

16. Polar Coordinate System

17. Vector Concepts

18. Tool/Library

19. URL: https://p5js.org/

20. URL: https://editor.p5js.org/

21. Sample & Code

22. r = sin(θ
n
d
)

23. core code 👉

only 10 lines!!

24. At the end

25. Statements

26. Matt Pearson (ஶ), ԭ ܒհ (຋༁),ʮδΣωϥςΟϒɾΞʔτʕProcessingʹΑΔ࣮ફΨΠυʯ
2014 ংจ
“δΣωϥςΟϒɾΞʔτ͸ίʔσΟϯάΛָ
͠ΉͨΊͷ΋ͷͰ͢ɻϓϩάϥϛϯά͸ɺྑ
͍࣮ફɺߏ଄ɺޮ཰ͷͨΊ͚ͩͷ΋ͷͰ͸͋
Γ·ͤΜɻͦΕ͸ࣗ༝ɺ૝૾ྗɺදݱʹ͍ͭ
ͯͷ΋ͷͰ΋͋Γ·͢ɻ”

27. Have fun with

“Generative Art” 😆

28. 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