xxxxxxxxxx141
let ball, sikaku; //動かす物体//ballの動きlet ballEnter, ballExit, ballPress, ballRelease;//sikakuの動きlet sikakuEnter, sikakuExit, sikakuPress, sikakuRelease;let cnv; //キャンバスfunction setup() { cnv = createCanvas(windowWidth, windowHeight); cnv.mouseOver(mouseEnterd); cnv.mouseOut(mouseExited); colorMode(HSB, 360, 100, 100, 100); rectMode(CENTER); //初期値を設定 ball = { diameter: height / 8, col: color(0, 50, 100, 60), }; sikaku = { size: height / 8, col: color(180, 50, 100, 60), rot: 0, }; //マウスが画面に入ったとき ballEnter = gsap.to(ball, { diameter: height / 6, col: color(60, 50, 100, 80), duration: 1, ease: "sine.inOut", repeat: 100, //くりかえし yoyo: true, //行って戻って paused: true, }); sikakuEnter = gsap.to(sikaku, { size: height / 4, col: color(200, 50, 100, 80), rot: 180, duration: 2, ease: "sine.inOut", repeat: 100, //くりかえし yoyo: true, paused: true, }); //マウスが画面から出たとき ballExit = gsap.to(ball, { diameter: height / 8, col: color(255, 63, 31), duration: 0.5, ease: "sine.inOut", paused: true, }); sikakuExit = gsap.to(sikaku, { size: height / 8, col: color(180, 50, 100, 60), rot: 0, duration: 0.5, ease: "sine.inOut", paused: true, }); //マウスボタンを押したとき ballPress = gsap.to(ball, { diameter: height / 2, col: color(31, 127, 255), duration: 0.25, ease: "sine.Out", paused: true, }); sikakuPress = gsap.to(sikaku, { size: width * 1.5, col: color(180, 50, 100, 100), rot: 360, duration: 0.5, ease: "sine.inOut", paused: true, }); //マウスボタンを離したとき ballRelease = gsap.to(ball, { diameter: height / 1.5, col: color(31, 127, 255, 0), duration: 1.0, ease: "sine.Out", paused: true, }); sikakuRelease = gsap.to(sikaku, { size: 0, col: color(180, 50, 100, 10), rot: 0, duration: 0.5, ease: "sine.inOut", paused: true, });}function draw() { background(0); noStroke(); translate(width / 2, height / 2); //四角 push(); rotate(radians(sikaku.rot)); fill(sikaku.col); rect(0, 0, sikaku.size, sikaku.size); pop(); //丸 fill(ball.col); //設定した色で circle(0, 0, ball.diameter);}//マウスが画面に入ったらfunction mouseEnterd() { ballEnter.restart(); sikakuEnter.restart();}//マウスが画面に入ったらfunction mouseExited() { ballEnter.pause(); ballExit.restart(); sikakuEnter.pause(); sikakuExit.restart();}//マウスを押したらfunction mousePressed() { ballEnter.pause(); ballPress.restart(); sikakuEnter.pause(); sikakuPress.restart();}//マウスを離したらfunction mouseReleased() { ballPress.pause(); ballRelease.restart(); sikakuPress.pause(); sikakuRelease.restart();}