xxxxxxxxxx
let x1_muller_lyer, x2_muller_lyer, y1_muller_lyer, y2_muller_lyer, length_muller_lyer, count;
let x_cafe_wall, y_cafe_wall, width_cafe_wall, height_cafe_wall;
let x_circle, x_footstep, y_footstep, x_line, y_line;
let footstep = [];
let screen_mode = 0;
let mode, mode_count;
function setup() {
createCanvas(800, 600);
width_muller_lyer = 40;
length_muller_lyer = 200;
x1_muller_lyer = width/2-length_muller_lyer/2;
y1_muller_lyer = height/2-70;
x2_muller_lyer = width/2-length_muller_lyer/2;
y2_muller_lyer = height/2+70;
count = 0;
x_cafe_wall = 0;
y_cafe_wall = 0;
width_cafe_wall = 50;
height_cafe_wall = 50;
x_line = 0;
y_line = 0;
x_footstep = 0;
y_footstep = 0;
mode = 0;
frameRate(60);
}
function draw() {
//初期画面
if(count == 0){
start();
option();
//オプション画面
if(screen_mode == 1){
option_screen();
}
}
//手動切り替え
if(mode == 0){
//各錯視画面
if(count == 1){
muller_lyer();
next_button();
x_circle = width/2;
}else if(count == 2){
cafe_wall();
next_button();
x_circle = width/2;
}else if (count == 3){
ebbinghaus();
next_button();
x_circle = width/2.3;
}else if(count == 4){
kanizsa_triangle();
next_button();
x_circle = width/2;
}else if(count == 6){
ebbinghaus2();
next_button();
x_circle = width/2.3;
}else if(count == 8){
ebbinghaus3();
next_button();
x_circle = width/2.3;
}
if(count == 5){
white_screen();
restart();
}
if(count == 7){
white_screen_ebbinghaus2();
restart();
}
if(count == 9){
white_screen_ebbinghaus3();
restart();
}
}
//自動点滅
if(mode == 1){
if(frameCount % 120 == 0){
mode_count = frameCount / 120;
}
//各錯視画面
if(count == 1){
x_circle = width/2;
if(mode_count % 2 == 0){
muller_lyer();
}else{
white_screen();
}
restart();
}else if(count == 2){
x_circle = width/2;
if(mode_count % 2 == 0){
cafe_wall();
}else{
white_screen();
}
restart();
}else if (count == 3){
x_circle = width/2.3;
if(mode_count % 2 == 0){
ebbinghaus();
}else{
white_screen();
}
restart();
}else if(count == 4){
x_circle = width/2;
if(mode_count % 2 == 0){
kanizsa_triangle();
}else{
white_screen();
}
restart();
}else if(count == 6){
x_circle = width/2.3;
if(mode_count % 2 == 0){
ebbinghaus2();
}else{
white_screen_ebbinghaus2();
}
restart();
}else if(count == 8){
x_circle = width/2.3;
if(mode_count % 2 == 0){
ebbinghaus3();
}else{
white_screen_ebbinghaus3();
}
restart();
}
}
}
/////////////////////////////////////////////////////////////////////////////
//ここから下は関数
//初期画面
function start(){
background(220);
//初期画面背景
for(let i = 0; i < 10; i++){
footstep.push(random()*height);
}
strokeWeight(40);
stroke(230);
for(let i = 0; i < 10; i++){
line(x_line, y_line+(80*i), width, y_line+(80*i))
}
noStroke();
for(let i = 0; i < 10; i++){
if(i % 2 == 0){
fill(230);
}else{
fill(220);
}
rect(x_footstep+(80*i), y_footstep-footstep[i], 50, 80);
}
y_footstep += 2;
if(y_footstep > height*2){
y_footstep = 0;
}
//文字
textAlign(CENTER);
noStroke();
fill(0);
textSize(80);
let welcome = "Welcome!!";
let muller_lyer = "ミュラーリヤー錯視";
let cafe_wall = "カフェウォール錯視";
let ebbinghaus = "エビングハウス錯視";
let kanizsa_triangle = "カニッツァの三角形";
let ebbinghaus2 = "エビングハウス錯視2";
let ebbinghaus3 = "エビングハウス錯視3";
text(welcome, width/2, height/4);
textSize(20);
text(muller_lyer, width/3, height/2);
text(cafe_wall, width/3+width/3, height/2);
text(ebbinghaus, width/3, height/2+height/5);
text(kanizsa_triangle, width/3+width/3, height/2+height/5);
text(ebbinghaus2, width/3, height/2+height/5+30);
text(ebbinghaus3, width/3, height/2+height/5+60);
if(mouseX <= width/2-40 && mouseX >= 175 && mouseY <= height/2 && mouseY >= height/2-20){
fill(255, 0, 200);
text(muller_lyer, width/3, height/2);
if(mouseIsPressed && mouseButton == LEFT){
count = 1;
}
}
if(mouseX >= width/2+40 && mouseX <= 625 && mouseY <= height/2 && mouseY >= height/2-20){
fill(255, 0, 200);
text(cafe_wall, width/3+width/3, height/2);
if(mouseIsPressed && mouseButton == LEFT){
count = 2;
}
}
if(mouseX <= width/2-40 && mouseX >= 175 && mouseY <= height/2+height/5 && mouseY >= height/2+height/5-20){
fill(255, 0, 200);
text(ebbinghaus, width/3, height/2+height/5);
if(mouseIsPressed && mouseButton == LEFT){
count = 3;
}
}
if(mouseX >= width/2+40 && mouseX <= 625 && mouseY <= height/2+height/5 && mouseY >= height/2+height/5-20){
fill(255, 0, 200);
text(kanizsa_triangle, width/3+width/3, height/2+height/5);
if(mouseIsPressed && mouseButton == LEFT){
count = 4;
}
}
if(mouseX <= width/2-40 && mouseX >= 170 && mouseY <= height/2+height/5+30 && mouseY >= height/2+height/5+10){
fill(255, 0, 200);
text(ebbinghaus2, width/3, height/2+height/5+30);
if(mouseIsPressed && mouseButton == LEFT){
count = 6;
}
}
if(mouseX <= width/2-40 && mouseX >= 170 && mouseY <= height/2+height/5+60 && mouseY >= height/2+height/5+40){
fill(255, 0, 200);
text(ebbinghaus3, width/3, height/2+height/5+60);
if(mouseIsPressed && mouseButton == LEFT){
count = 8;
}
}
}
//次へ進む
function next_button(){
strokeWeight(5);
stroke(0);
line(width-30, height-90, width-10, height-50);
line(width-10, height-50, width-30, height-10);
line(width-60, height-90, width-40, height-50);
line(width-40, height-50, width-60, height-10);
line(width-90, height-90, width-70, height-50);
line(width-70, height-50, width-90, height-10);
if(mouseX <= width-10 && mouseX >= width-90 && mouseY <= height-10 && mouseY >= height-90){
strokeWeight(5);
stroke(0, 200, 200);
line(width-30, height-90, width-10, height-50);
line(width-10, height-50, width-30, height-10);
line(width-60, height-90, width-40, height-50);
line(width-40, height-50, width-60, height-10);
line(width-90, height-90, width-70, height-50);
line(width-70, height-50, width-90, height-10);
if(count < 5){
if(mouseIsPressed && mouseButton == LEFT){
count = 5;
}
}else if(count == 6){
if(mouseIsPressed && mouseButton == LEFT){
count = 7;
}
}else if(count == 8){
if(mouseIsPressed && mouseButton == LEFT){
count = 9;
}
}
}
}
//初期画面に戻る
function restart(){
let restart = "restart";
noStroke();
fill(0);
textAlign(CENTER);
textSize(30);
text(restart, width-60, 40);
if(mouseX <= width-10 && mouseX >= 50 && mouseY <= 40 && mouseY >= 10){
fill(0, 200, 200);
text(restart, width-60, 40);
if(mouseIsPressed && mouseButton == LEFT){
count = 0;
}
}
}
//ミュラーリヤー錯視
function muller_lyer (){
background(255, 0, 0);
strokeWeight(7)
stroke(0, 255, 0);
//外向き
line(x1_muller_lyer, y1_muller_lyer, x1_muller_lyer+length_muller_lyer, y1_muller_lyer);
line(x1_muller_lyer, y1_muller_lyer, x1_muller_lyer-width_muller_lyer, y1_muller_lyer-width_muller_lyer);
line(x1_muller_lyer, y1_muller_lyer, x1_muller_lyer-width_muller_lyer, y1_muller_lyer+width_muller_lyer);
line(x1_muller_lyer+length_muller_lyer, y1_muller_lyer, x1_muller_lyer+length_muller_lyer+width_muller_lyer, y1_muller_lyer-width_muller_lyer);
line(x1_muller_lyer+length_muller_lyer, y1_muller_lyer, x1_muller_lyer+length_muller_lyer+width_muller_lyer, y1_muller_lyer+width_muller_lyer);
//内向き
line(x2_muller_lyer, y2_muller_lyer, x2_muller_lyer+length_muller_lyer, y2_muller_lyer);
line(x2_muller_lyer, y2_muller_lyer, x2_muller_lyer+width_muller_lyer, y2_muller_lyer-width_muller_lyer);
line(x2_muller_lyer, y2_muller_lyer, x2_muller_lyer+width_muller_lyer, y2_muller_lyer+width_muller_lyer);
line(x2_muller_lyer+length_muller_lyer, y2_muller_lyer, x2_muller_lyer+length_muller_lyer-width_muller_lyer, y2_muller_lyer-width_muller_lyer);
line(x2_muller_lyer+length_muller_lyer, y2_muller_lyer, x2_muller_lyer+length_muller_lyer-width_muller_lyer, y2_muller_lyer+width_muller_lyer);
//凝視点
noStroke();
fill(0);
circle(width/2, height/2, 10);
}
//カフェウォール錯視
function cafe_wall(){
for(let i = 0; i < 20; i++){
for(let j = 0; j < 20; j++){
if(j % 2 == 0){
fill(255, 0, 0);
}else{
fill(255, 255, 0);
}
if(i % 2 == 0){
x_cafe_wall = -25;
}else{
x_cafe_wall = 0;
}
noStroke();
rect(x_cafe_wall+(width_cafe_wall*j), y_cafe_wall+(height_cafe_wall*i), width_cafe_wall, height_cafe_wall);
}
strokeWeight(3);
stroke(255, 130, 0);
line(x_cafe_wall, y_cafe_wall+(height_cafe_wall*i), width, y_cafe_wall+(height_cafe_wall*i))
}
//凝視点
noStroke();
fill(0);
circle(width/2, height/2, 10);
}
//エビングハウス錯視
function ebbinghaus(){
background(255, 255, 0);
noStroke();
fill(0, 0, 255);
push();
translate(width/4, height/2);
circle(0, 0, 70);
for(let i = 0; i < 8; i++){
push();
translate(60*cos(PI*2*i/8), 60*sin(PI*2*i/8));
rotate(PI*2/8*i);
circle(0, 0, 30);
pop();
}
translate(width/2.3, 0);
circle(0, 0, 70);
for(let i = 0; i < 6; i++){
push();
translate(110*cos(PI*2*i/6), 110*sin(PI*2*i/6));
rotate(PI*2/6*i);
fill(0, 0, 255);
circle(0, 0, 100);
pop();
}
pop();
//凝視点
noStroke();
fill(0);
circle(width/2.3, height/2, 10);
}
//エビングハウス錯視 周囲の図形だけ残像
function ebbinghaus2(){
background(255, 255, 0);
noStroke();
fill(0, 0, 255);
push();
translate(width/4, height/2);
circle(0, 0, 70);
for(let i = 0; i < 8; i++){
push();
translate(60*cos(PI*2*i/8), 60*sin(PI*2*i/8));
rotate(PI*2/8*i);
circle(0, 0, 30);
pop();
}
translate(width/2.3, 0);
circle(0, 0, 70);
for(let i = 0; i < 6; i++){
push();
translate(110*cos(PI*2*i/6), 110*sin(PI*2*i/6));
rotate(PI*2/6*i);
fill(0, 0, 255);
circle(0, 0, 100);
pop();
}
pop();
//凝視点
noStroke();
fill(0);
circle(width/2.3, height/2, 10);
}
//エビングハウス錯視 中心の図形だけ残像
function ebbinghaus3(){
background(255, 255, 0);
noStroke();
fill(0, 0, 255);
push();
translate(width/4, height/2);
circle(0, 0, 70);
for(let i = 0; i < 8; i++){
push();
translate(60*cos(PI*2*i/8), 60*sin(PI*2*i/8));
rotate(PI*2/8*i);
circle(0, 0, 30);
pop();
}
translate(width/2.3, 0);
circle(0, 0, 70);
for(let i = 0; i < 6; i++){
push();
translate(110*cos(PI*2*i/6), 110*sin(PI*2*i/6));
rotate(PI*2/6*i);
fill(0, 0, 255);
circle(0, 0, 100);
pop();
}
pop();
//凝視点
noStroke();
fill(0);
circle(width/2.3, height/2, 10);
}
//カニッツァの三角形
function kanizsa_triangle(){
background(0, 0, 255);
noStroke();
fill(0, 255, 0);
push();
translate(width/2, height/2);
for(let i = 0; i < 3; i++){
push();
translate(120*cos(PI*2*i/3+PI/6), 120*sin(PI*2*i/3+PI/6));
rotate(PI*2/3*i);
fill(0, 255, 0);
arc(0, 0, 80, 80, PI+PI/3, PI);
pop();
}
strokeWeight(5);
for(let i = 0; i < 3; i++){
push();
translate(95*cos(PI*2*i/3+PI/3+PI/6), 95*sin(PI*2*i/3+PI/3+PI/6));
rotate(PI*2/3*i);
stroke(255, 255, 0)
line(0, 0, 20, -35);
line(0, 0, -20, -35);
pop();
}
pop();
//凝視点
noStroke();
fill(0);
circle(width/2, height/2, 10);
}
//白画面 普通バージョン
function white_screen(){
background(255);
noStroke();
fill(0);
circle(x_circle, height/2, 10);
}
//白画面 エビングハウス錯視2バージョン
function white_screen_ebbinghaus2(){
background(255);
noStroke();
fill(0);
circle(x_circle, height/2, 10);
fill(0, 0, 255);
push();
translate(width/4, height/2);
circle(0, 0, 70);
translate(width/2.3, 0);
circle(0, 0, 70);
pop();
}
//白画面 エビングハウス錯視3バージョン
function white_screen_ebbinghaus3(){
background(255);
noStroke();
fill(0);
circle(x_circle, height/2, 10);
fill(0, 0, 255);
push();
translate(width/4, height/2);
for(let i = 0; i < 8; i++){
push();
translate(60*cos(PI*2*i/8), 60*sin(PI*2*i/8));
rotate(PI*2/8*i);
circle(0, 0, 30);
pop();
}
translate(width/2.3, 0);
for(let i = 0; i < 6; i++){
push();
translate(110*cos(PI*2*i/6), 110*sin(PI*2*i/6));
rotate(PI*2/6*i);
fill(0, 0, 255);
circle(0, 0, 100);
pop();
}
pop();
}
function option(){
push();
translate(50, 50);
strokeWeight(1);
stroke(180);
fill(190);
circle(0, 0, 80);
noStroke();
fill(230);
circle(0, 0, 40);
fill(190);
circle(0, 0, 20);
for(let i = 0; i < 8; i++){
push();
fill(230);
translate(17*cos(PI*2*i/8), 17*sin(PI*2*i/8));
rotate(PI*2*i/8);
rect(0, -5, 10, 10);
pop();
}
pop();
if(mouseX <= 90 && mouseX >= 10 && mouseY <= 90 && mouseY >= 10){
push();
translate(50, 50);
strokeWeight(1);
stroke(160);
fill(170);
circle(0, 0, 80);
noStroke();
fill(210);
circle(0, 0, 40);
fill(170);
circle(0, 0, 20);
for(let i = 0; i < 8; i++){
push();
fill(210);
translate(17*cos(PI*2*i/8), 17*sin(PI*2*i/8));
rotate(PI*2*i/8);
rect(0, -5, 10, 10);
pop();
}
pop();
if(mouseIsPressed && mouseButton == LEFT){
screen_mode = 1;
}
}
}
function option_screen(){
let back = "もどる";
let option_letter = "オプション";
let mode1 = "手動切り替え";
let mode2 = "自動点滅";
strokeWeight(5);
stroke(180);
fill(210);
rect(100, 30, 600, height/3);
noStroke();
fill(100);
textSize(30);
textAlign(CENTER);
text(option_letter, width/2, 70);
textSize(25);
text(mode1, width/2-100, 150);
text(mode2, width/2+120, 150);
if(mouseX <= width/2-25 && mouseX >= width/2-175 && mouseY <= 150 && mouseY >= 125){
fill(0, 200, 200);
text(mode1, width/2-100, 150);
if(mouseIsPressed && mouseButton == LEFT){
mode = 0;
screen_mode = 0;
}
}
if(mouseX <= width/2+190 && mouseX >= width/2+70 && mouseY <= 150 && mouseY >= 125){
fill(0, 200, 200);
text(mode2, width/2+120, 150);
if(mouseIsPressed && mouseButton == LEFT){
mode = 1;
screen_mode = 0;
}
}
fill(100);
textSize(20);
text(back, 655, height/3+20);
if(mouseX <= 685 && mouseX >= 625 && mouseY <= height/3+20 && mouseY >= height/3){
fill(0, 200, 200);
text(back, 655, height/3+20);
if(mouseIsPressed && mouseButton == LEFT){
screen_mode = 0;
}
}
}