1

(ジャバスクピクト) 20200830

© 2020 Kazunari Ito

2

io h i p h

nn eg n Y h o

G G h Y g

o n i g h g P l

n n l n n J

i P l eg

3

ho l O egy

h n t gScY o d

h Ii h g g h

https://pictogramming.org

n P Y b PC PC h

o !(JavaScpict ) In gScY

h Y g n ho PC

g

o i PJ

i n Il P

g h PC n o

https://pictogramming.org/editor/javascpict.html

n o

https://pictogramming.org/editor/javascpictsp.html

4

h

JavaScpict n

o l 3 fn O Y g n l g

o n o

lo n

P Y g n l Y g

nP h

5

Yg o n Il n l gy

pic.R("LUA", -120);

g gy o

P P b

n n

o l R Ro R A A In h Rl S n

o Jih

n pic o h y Y n P

J m n" "o i p h " "nJin h

o R i pic.Rh picP Rn Ii

l i P Ii i

l n LUAi no n g n LUA L A U

A n h

Y l b n ho l-120

f l 120 Y g Y l RLL R A L L

l 37 l g BODY l-52

f l 52 Y g

pic.R("LUA", -120);

pic.R("RLL", 37);

pic.R("BODY", -52);

a n statement i r f ih J b

P n l g h lo PJ n

n n l

6

pic.R(arg1, arg2); arg1 ta S

arg2 a S

n R P n h R 命令c h S G P

g n arg1 arg2o A i O

n i .3 3A ho J bPJ bn

hJ l nh ioJ bn ih

R i bc ho n n iO

niO i f S b l

ho RLLiO 37iO n i i h

h 1 f n A arg1 o n i

y b P 1 fi P a fn 9

n O Y Il BODY

n n o 3 h g 1 o L A O R A

2 o U O L ,3 o A O L Oh

n 2f n arg2o g P n l

n eg n h

7

d yl n n o d h eg

pic.r("rll", 37);

pic.R("Body", -52);

l

lo n PJ SD i ih O h S O

b n iPh

pic.FR(); l

pic.SD(); l

pic.C(); n l

[ ]

(1)O 3 n a lf g i gScY

(1) (2) (3)

8

2

pic.R("LUA", -140);

i g o P P

b

ho n n-140nJil"," y Y l 1i

n l g

pic.R("LUA", -140, 1);

bO Gl P P b o 1 O g

l l-140 i h i h 140 i

h ho Y l O "," h 3i g

pic.R("LUA", -140, 1, 3);

n o P Y b O P n p So

3 O 1 O g l-140 b

o R o 2 fn fi bP o R o 4 f h

f iPh n Rn o n h

pic.R(arg1, arg2, arg3, arg4); arg4 Sarg1 t

a S arg2 arg3

a S arg4 A

8arg4 S 0 A8arg38

arg4 A 0

A r

9

ho l n 2 O g gy

pic.R("LUA", -140, 1);

pic.R("RUA", 140, 1);

1 O g n l l P

Y

ho P egO l lo p h

nb n i g RW Rotate Wait: d PJ

v n n Rni RWl g gygScY f

n h

pic.RW("LUA", -140, 1);

pic.RW("RUA", 140, 1);

RW o R i h P A

Ii n h

pic.RW(arg1, arg2, arg3); arg1 ta S

arg2 arg3 a S

A

R o S Ii PJ nh R

ho P l P b R o S Ii

i p p

pic.R("LUA", -140, 1);

pic.RW("LUA", 140, 1);

10

i g o o

l 140 1 h i l-140 1 h

P l Y b lo P Y O h ho l

pic.R("LUA", 40, 1);

pic.R("LUA", 40, 1);

pic.R("LUA", 40, 1);

i i h o pic.R("LUA", 120, 1); i

l

pic.RW("LUA", 40, 1);

pic.RW("LUA", 40, 1);

pic.RW("LUA", 40, 1);

i i h o pic.RW("LUA", 120, 3);i

l

n l R i RW S y ih l

G P i

l gy o XY X i Y n y

g h P X h n-320O n 320 h

P Y h n-320O n 320 h i f P 0,0

P -320,-320 8 P 320,-320 8 P -320,320 8 P 320,320 8

f X P Y P i n i Y c

nh g Y n n n l i

P Y nh n do n P i

h

n n n l

11

b n

o M bo MW g h lf g W

O Oh n l O P h n P

Y OP

pic.M(arg1, arg2, arg3, arg4); arg4 S arg3 x

S arg1 , y S arg2

a

arg4 A 8arg4 S 0 A8

arg3, arg4 A

0 A

r

pic.MW(arg1, arg2, arg3); arg3 x S arg1

, y S arg2

a A

12

[ ]

1 n gScY

0 O 1 O g

1 O 1 O g

2 O 1 O g

(2) eb gy

13

3

pic.RW("LUA", -140, 1);

i g o P P b

ho l egy i gygScY

pic.RW("LUA", -140, 1);

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3);

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3);

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3);

3 LLA l iPh b 10 20 l h

bc Pig S eg g eg

nO T i S h n S h

y o n h

for (let i = 0; i < arg1; i++){ } a arg1

i n l S iPh

pic.RW("LUA", -140, 1);

for (let i = 0; i < 3; i++){

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3); }

ho pic.RW("LLA", -60, 0.3); i pic.RW("LLA", 60, 0.3); P

14

l

[ ]

1 n g Y bc eg Y

1 O g g g 1 O g r p i i 10

2 eb l gy

15

b

pic.RW("LUA", -140, 1);

for (let i = 0; i < 3; i++){

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3); }

n b i p n p h m

pic.RW("LUA", -120, 1);

for (let i = 0; i < 5; i++){

pic.RW("LLA", -90, 0.8);

pic.RW("LLA", 90, 0.8); }

h i i 2 P g n h

o 2 h P l ego i J h

h variable gy io n n

l eg Ih y Y Sn g

P h m

tn n o = n o n h h i

= o i P i P Sn ho

arg1 = arg2 arg1 S arg2 a

16

p

waveAngle = 60;

o waveAngle l 60 Ii i waveAngle

n n i g l n n

b 60n n c p h

waveAngle = 60;

pic.RW("LUA", -140, 1);

for (let i = 0; i < 3; i++){

pic.RW("LLA", -waveAngle, 0.3);

pic.RW("LLA", waveAngle, 0.3); }

Y l J h h

n P

raiseAngle = 140;

raiseTime = 1;

waveAngle = 60;

waveTime = 0.3;

numOfWave = 3;

pic.RW("LUA", -raiseAngle, raiseTime);

for (let i = 0; i < numOfWave; i++){

pic.RW("LLA", -waveAngle, waveTime);

pic.RW("LLA", waveAngle, waveTime); }

17

[ ]

(1)

n raiseAngle, raiseTime, waveAngle, waveTime,

numOfWaven l g J bP n I egSc

Y

(2)

n raiseAngle, raiseTime, waveAngle, waveTime,

numOfWaven l g I n

l gScY b n n gScY

18

5

JavaScpict( )ho n n O ih

S iPh o n gy

pic.pen_hold("LH"); // l f

pic.R("LUA", 360, 1); // S

o h n eb b h n

pic.pen_hold("LH");o l fi h n n

o n h f n o n l l SfO

h n h // o n P P O S

b n hJ i g h nh n o"//" r

"//" n oJ

pic.PEN_HOLD(arg1); k a N k a N t a R,RW

arg1 S B arg1 A

BODY A

pic.PEN_RELEASE(arg1); k a k a N t a R,RW

arg1 S B arg1 A

BODY A

pic.PENW(arg1); k a arg1 S

f iPh n

19

ho gy

pic.PENW(1);

pic.PEN_HOLD("LH");

for(let i = 0; i < 4; i++){ // 4

pic.RW("LUA",90,0);

}

h Si l n h g

n P O lSS iPJ nh l SK

J O b i o N gScY b hl

b o CS Clear Screen

pic.SK(); ed n ,0 1 S

pic.N(); l n + 5 -1 S

pic.CS(); k S a

v n n 1 l pic.SK(); b P

l nh b P S

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

for(let i = 0; i < 4; i++){

pic.RW("LUA",90,0);

}

5 n n 0 1l gy

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

for(let i = 0; i < 4; i++){

20

pic.RW("LUA",90,1);

}

o l b o n n eg

l p n o l

bc P 0n o h JavaScpict ho

b o i i eg n

ho P nh

l 5 n RW Rl gy

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

for(let i = 0; i < 4; i++){

pic.R("LUA",90,0);

}

P O S b o n 2 fn PJ O h

1 0n R M o n i R M O n

n g bJin i

2 0n RW MW o n i n bJin

i

n l

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

pic.RW("LUA", 45);

pic.RW("LUA", 45);

o n l n O

l 45 b h Y l

l 45 b h n

21

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

pic.R("LUA", 45);

pic.RW("LUA", 45);

o n l n O

l 90 =45+45 b h

eg v n o i

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

pic.R("LUA",90,0);

pic.R("LUA",90,0);

pic.R("LUA",90,0);

pic.RW("LUA",90,0);

i P o

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

pic.RW("LUA",360,0);

i O h

����

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

pic.MW(100, 0);

pic.MW(0, 100);

o n l P

22

pic.SK();

pic.PENW(1);

pic.PEN_HOLD("LH");

pic.M(100, 0);

pic.MW(0, 100);

o n l

n n O i R, RW, M, MW S

ih G S iPh p o f n h

pic.PEN_HOLD("LH");

pic.PENW(1);

pic.R("LUA", 360, 5);

pic.RW("LLA", -1080, 5);

pic.MW(0,300);

[ ]

(1) a gy

2 f n n g s f n

gy

23

(3 f n n n On nJ

c h n S iPh e

gy

(4) n gy

(A) P a 90

60 30 n (B) (C)

(D) (E) P 120 n (F)

24

6 n gy n n gy

let order = ['LUA', 'LUL', 'RUA', 'RUL'];

for(let parts of order){

pic.RW(parts, -45, 0.5);

pic.R(parts, 45, 0.5);

}

i l I I I I

h n g i b n : A i

n ho P l

['LUA', 'LUL', 'RUA', 'RUL']

n tn i eg

let order = ['LUA', 'LUL', 'RUA', 'RUL'];

order l g

n a n n i i o nJil Oe i

h o n P 0h l 1,2,3i g

let order = ['LUA', 'LUL', 'RUA', 'RUL']; n

order[0] o 'LUA' order[1] o 'LUL' order[2] o 'RUA'

order[3] o 'RUL' i n o h h

p v n l g

let order = ['LUA', 'LUL', 'RUA', 'RUL'];

order[2] = 'LUA';

for(let parts of order){

25

pic.RW(parts, -45, 0.5);

pic.R(parts, 45, 0.5);

}

i g gy

[ ]

J bP iPh eg gy

26

n y n i i i o hl g

b p

angle = 60;

o angle l 60 i h b io n

i p lJ + -, *, /, % h l nb l

nh i p g

A + B ) a

A - B ) a

A * B ) a

A / B ) a

A % B ) a =

A ** B ) a B

A++, ++A ) a )() 8) (

A--, --A ) a )() 8) (

P io n y h ho

angle + 10

o l n lo h

angle l angle + 10 i no

angle = angle + 10

i f anglen 10 l

let order = ['LUA', 'LUL', 'RUA', 'RUL']

angle = 30;

27

for(let i = 0; i < 3; i++){

for(parts of order){

pic.RW(parts, -angle, 0.5)

pic.R(parts, angle, 0.5)

}

angle = angle + 30;

}

i l I I I I 1 i g 30 60

90

ho n i h v io angle n

c P

let order = ['LUA', 'LUL', 'RUA', 'RUL']

angle = 30;

for(let i = 0; i < 3; i++){

for(parts of order){

pic.RW(parts, -angle, 0.5)

pic.R(parts, angle, 0.5)

angle = angle + 30;

}

}

[ ]

o i cebnl Gl Rg g S egy

28

8

l g o l eg eb

p p l I n l 5000

J I h f l eg b i h

n o if

if (exp1) { } exp1 A a

if n lo eb lo n

nPJ

A > B ) A B

A >= B ) A B

A < B ) A

A <= B ) A

A == B ) A

A != B ) A

p n h

pic.RW("LUA", -140, 1);

if (Math.random() < 0.5){

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3);

}

h Math.random()o 0 1 n O l

f Math.random() < 0.5 o{}n n P 50%n h Y

29

pic.RW("LUA", -140, 1);

if (Math.random() < 0.3){

for(let i = 0; i < 3; i++){

pic.RW("LLA", -60, 0.3);

pic.RW("LLA", 60, 0.3);

}

}

o 30%n h 3 gy

if (exp1) { } exp1 A a

else if (exp2) { } if else if A

8 N exp2 A

a

else { } if else if A

8 a

p n o n O a 30%, 35% ( (1-

0.3)×0.5)) 35%((1-0.3)×(1-0.5)) n h O i 20

for(let i = 0; i < 20; i++){ // 20

if (Math.random() < 0.3){ // 30%n h

pic.RW("LUL", 90, 0.2);

pic.RW("LUL", -90, 0.2);

} else if (Math.random() < 0.5){ // h 50%n h

pic.RW("RUA", 90, 0.2);

pic.RW("RUA", -90, 0.2);

} else { // h

pic.RW("LUA", 90, 0.2);

pic.RW("LUA", -90, 0.2);

}

}

30

[ ]

4 h eb n h Si nPJ b l S

n n l b g gy

31

- -

n i i h bS PJ p hl g b

n h

num = 3;

angle = 90;

pic.RW("LUA", -140, 1);

for(let i = 0; i < num; i++){

pic.RW("LLA", -angle, 0.3);

pic.RW("LLA", angle, 0.3);

}

pic.RW("LUA", 140, 1);

n i i l g ih n n

S b n n l g h nh O S

h i n

name = function(arg1, .. ,argN){ } arg1 argN N

a name a

ho waveHand

waveHand = function(angle, num){

pic.RW("LUA", -140, 1);

for(let i = 0; i < num; i++){

pic.RW("LLA", -angle, 0.3);

pic.RW("LLA", angle, 0.3);

}

pic.RW("LUA", 140, 1);

}

waveHand(60, 3);

waveHand(30, 10);

32

1 O 8 hP waveHandn h o anglei

numh

9 10 h a waveHand r g

eg n i 3 60 eg

10 30 eg Ii n

[ ]

P S walk h g g r g

y

33

10 - -

h h G g bi o n

l f i n gy n o

h Y g h Y l n 4 l

n Y g n l S

g o l eg Y g

h o lh S i nh ho

n l n b n 6fn

g

pic.P(); 2 A l

pic.A(); AA A l

pic.I(); ) A 3A l l

b n o i i

pic.S(); . AE l l b

n o i i

pic.SG(); . AE ( l l

b n o i i

pic.SR(); . AE l l

b n o i i

pic.N(); l n + 5 -1 S

34

5 h n l b g

n h S i r bP n n

l S l ego g Sn

P h h JavaScpict h

o n n g S L,LW i n

P Y g o n h

eg p pic.L(100, -150, 200, 300); o 100, -150 i

200, 300 i h pic.LW(50, 30, 100,

30 , 1);o 50, 30 O 100, 30 t g 1 O g

n o eb l Y

pic.L(arg1,arg2,arg3,arg4,arg5);

arg1,arg2 O

(arg3,arg4) h arg5 O g

S arg5P Y b o

arg5 l 0P Y g ni

g

pic.LW(arg1,arg2,arg3,arg4,arg5);

arg1,arg2 O

(arg3,arg4) h arg5 O g

S n P h

n o Y arg5 P

Y b o arg5 l 0 P Y

g ni g

pic.O(arg1,arg2,arg3,arg4,arg5);

arg1,arg2 arg3

Y arg4 l

l arg5 b

S arg5 P Y b o arg5

l P Y g ni g

35

S n iPh

n Y n g b l

pic.PENW(20);

pic.PEN_BUTT();

pic.L(200,-200,200,200);

pic.PEN_ROUND();

pic.L(100,-200,100,200);

pic.PENW(100);

pic.PEN_SQUARE();

pic.L(-200,-200,-200,-200);

pic.PEN_ROUND();

pic.L(-200,200,-200,200);

b n n Yn b l i h

pic.T(arg1, arg2, arg3, [arg4]); arg2 arg3 8 B arg4

arg1 a arg4 A

8arg4 S A

r

pic.PEN_SQUARE(); a S

pic.PEN_ROUND(); a S

pic.PEN_BUTT(); a S

pic.PEN_NORMAL(); a S

pic.PEN_ERASE(); a S

pic.PEN_XOR(); a S

8 S

36

Yg o n h S O n h

l i g b S iPh

l n f g Y l gy

Yg n l o h Y g nh

o h ho n l

h n Y iPh l

lo eg b o l eg l g

l On iPh l eg nh n

Y g iPh h

o c ho S n

iPh n ho S n

gy

o lI

p n o g P e nh

i n l n SfOf bi

i n b o O n lo PJ nho Oi

g i g eb g PJ o

l

37

o I

p n o g P l

In g o h ho

h i g nh NG h n o

l nh P b io 2m i h n

l P u hJ l l

38

[ ]

n lJ i S P

O n l g

39

11 --

n o n eb i b h

n i a n P P Tl h

n l ih O S

b n ho (infographics)i YOn

w p 20 h J h Jeb

o P n h P l i g

iP hJ i ). 0 ) A A :

.E A E 3A 3 A b ). 0

o n i g

ho eg egy

P Y hn ST i nPJ

i o ni h ST o A n h n

n h

40

pic.ST(); A oma

b l n P

l h l b i G

n P h p 8 n c

S n o n l

pic.SC(0.3);

pic.MW(-250, 0);

pic.RW("LUA", -20);

pic.RW("RUA", 20);

for(let i = 0; i < 8; i++){

pic.MW(60, 0);

pic.ST();

}

n ho gn o h P P Y hn

n P Y nh G n Y

i h

let data = [ ['Java', 7], ['Python', 4], ['C', 9], ['Ruby', 3] ];

pic.SC(0.2);

pic.M(-260, -200);

for(let [name, count] of data){

pic.T(name, 20);

pic.MW(60, 0, 0.06);

for(let i = 0; i < count; i++){

pic.MW(40, 0, 0.06);

pic.ST();

}

pic.M(-(40 * count + 60), 120);

}

41

pic.SC(0);

1 n o g

let data = [['Java', 7], ['Python', 4], ['C', 9], ['Ruby', 3]];

f n n l f n ( )l (,)h

o i n l c iPh

2 n pic.SC(0.2);o n Y n 0.2 l g

SCo scale n h

5 n lJ [name, count]lo ['Java', 7]n a n P Y

for(let [name, count] of data)

f name lo 'Java', countlo 7P Y il

P name, countl a Y

[ ]

g n g

i S P O n

l g

42