JavaScript × Mathematics go to Digital Art

Slide 1

Slide 1 text

JavaScript × Mathematics go to Digital Art 19 Nov, 2022 Front-end Conference Okinawa @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

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

Slide 5

Slide 5 text

Introductory Remark1 💁 The title says "Digital Art”, but I'm talking about "Generative Art”.

Slide 6

Slide 6 text

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 👍

Slide 7

Slide 7 text

Let’s start 😆

Slide 8

Slide 8 text

What’s the Generative Art

Slide 9

Slide 9 text

Do you know Generative Art? Let's look at some specific pieces!😁

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Complex and unpredictable art created using algorithmic and mathematical methods 💁

Slide 14

Slide 14 text

✕ Mathematics JavaScript

Slide 15

Slide 15 text

✕ Mathematics JavaScript 😆

Slide 16

Slide 16 text

✕ Mathematics JavaScript Frequently used 😆 • ɾBasics(function, variables, scope, if, for…) • ɾrandom() function •ɾclass

Slide 17

Slide 17 text

✕ JavaScript Mathematics 😱

Slide 18

Slide 18 text

✕ JavaScript Mathematics Don’t worry 😆 ɾBasic trigonometric functions ɾPolar coordinate system ɾVector Concepts

Slide 19

Slide 19 text

Polar Coordinate System

Slide 20

Slide 20 text

Vector Concepts

Slide 21

Slide 21 text

Tool/Library

Slide 22

Slide 22 text

URL: https://p5js.org/

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Sample & Code

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

r = sin(θ n d )

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

core code 👉 only 10 lines!!

Slide 30

Slide 30 text

At the end

Slide 31

Slide 31 text

Statements

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Have fun with “Generative Art” 😆

Slide 34

Slide 34 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 35

Slide 35 text

No content