Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Amazing Optical Illusions
ID	6092089407586304
Created	5 years ago, 1583282563187
Updated	5 years ago, 1583609778663
Code	/*** * Remember to read the description below the optical illusion! * Press Enter for the next illusion and Shift for the previous illusion * Special thanks to Advanced JS: Games and Visuliztions for home page background * If you would like to be notified whenever I release a program, go to http://tiny.cc/pseudonymous * Enjoy Amazing Optical Illusions! Please let me know what you liked or to improve on in the T&T. I am always open for feedback. * Be sure to leave in the comments what your favorite illusion is! * By Pseudonymous Coder **/ // Second on the hot list! 44 Votes! 3/4/20 // First on the hot list! 98 votes! 3/5/20 // Still First! 171 votes! 3/7/20 //Code { var scene = "Home"; var y = 0; var flashColor = color(0, 0, 0); var flashSpeed = 0; var colorX1 = 60; var colorX2 = 540; var rotateAnimal = 0; var animalColor = color(255); var animalText = ""; var rotateSquare = 0; var addLines = 0; var moveRectangles = 147; var rectanglesX; var keys = []; var nineDots = { description: true, hint: true, answer: true }; var drawWhiteCircle = function(diameter) { fill(43, 43, 43); ellipse(0,0,diameter,diameter); }; var drawBlackCircle = function(diameter) { fill(0, 0, 0); ellipse(0,0,diameter,diameter); }; var buttonClicked = function(x, y, w, h) { return x > mouseX - w / 2 && x < mouseX + w / 2 && y > mouseY - h / 2 && y < mouseY + h / 2; }; textFont(createFont("cursive")); var ydif = 0; var ydif2 = 200; var ydifinc = 0; var ydif2inc = 0; draw = function() { noStroke(); rectMode(CENTER); background(255, 255, 255); if (scene === "Home") { var diameter = 1200; var decreaseAmt = 0.02; var scaleF = 1.0; textAlign(CENTER,CENTER); while (scaleF > 0){ //black circles pushMatrix(); translate(300,300); scale(scaleF); drawBlackCircle(diameter); scaleF -= decreaseAmt; popMatrix(); //white circles pushMatrix(); translate(300,300); scale(scaleF); drawWhiteCircle(diameter); scaleF -= decreaseAmt; popMatrix(); } fill(0); arc(175, 105, 100, 63, 0, 360); fill(255, 255, 255); ellipse(175, 105, 40, 40); fill(0); ellipse(175, 105, 20, 20); fill(255); textSize(40); text("ptical Illusions",361, 100); text("Click Anywhere to Start",300,300); } else if (scene === 0) { textAlign(CORNER,CORNER); if (!mouseIsPressed) { for (var i = 30; i < height; i += 67) { fill(0, 0, 0); rect(300, i, width, 30); } } fill(253, 255, 184); rect(200, y, 80, 80); //rect(160,y,60,60); fill(5, 0, 43); //rect(90,y,60,60); rect(400, y, 80, 80); y += 2; if (y >= 400) { y = 0; } textSize(15); if (!mouseIsPressed) { fill(255); rect(300, 545, width, 140); fill(0); text("The Stepping Feet Illusion\nThe two squares might look like they are moving seperately, but are they? Hold \ndown the mouse to find out!", 10, 509); } else { fill(0); rect(300, 545, width, 140); fill(255); text("Amazingly, the two squares are perfectly in sync!\nPress Enter for the next illusion.", 10, 509); } } else if (scene === 1) { background(166, 188, 255); if (!mouseIsPressed) { fill(0); ellipse(170, 300, 200, 200); fill(255, 255, 255); ellipse(400, 300, 200, 200); rect(300, 545, width, 140); textSize(15); fill(0); text("The Flashing Circles Illusion\nThe two flashing circles might look like they are flashing back and forth, but if you\nhold down the mouse, you'll see that the two circles are actually flashing at the\nsame time!", 10, 509); } else { fill(0); rect(300, 545, width, 140); fill(255); text("Press Enter for the next illusion.", 10, 509); } fill(flashColor); ellipse(170, 300, 125, 125); ellipse(400, 300, 125, 125); flashSpeed++; if (flashSpeed >= 20) { if (flashColor === color(0, 0, 0)) { flashColor = color(255, 255, 255); flashSpeed = 0; } else { flashColor = color(0); flashSpeed = 0; } } } else if (scene === 2) { background(255, 119, 0); for (var i = 0; i < height; i += 45) { if (!mouseIsPressed) { fill(255, 0, 174); rect(300, i + 45, width, 20); } fill(0, 255, 157); rect(colorX1, i + 67, 100, 25); rect(colorX2, i + 45, 100, 20); } colorX1++; colorX2--; if (colorX1 > 600) { colorX1 = 0; } if (colorX2 < 0) { colorX2 = 600; } if (!mouseIsPressed) { fill(255, 255, 255); rect(300, 545, width, 140); textSize(15); fill(0); text("The Colored Rectangles Illusion\nPut your device on a table top and walk 5 feet away from it. One seems teal and the\nother seems green, but when they come closer together, you can see that they are\nexactly the same color! Hold down the mouse to prove it.", 10, 509); } else { fill(0); rect(300, 545, width, 140); fill(255); text("Press Enter for the next illusion.", 10, 509); } } else if (scene === 3) { strokeWeight(1); stroke(0); fill(animalColor); // draw the duck/rabbit pushMatrix(); translate(200, 200); rotate(rotateAnimal); translate(-200, -200); pushMatrix(); ellipse(137, 178, 150, 150); rotate(75); arc(216, -150, 46, 232, 180, 360); popMatrix(); pushMatrix(); translate(200, 200); rotate(106); arc(8, -1, 46, 232, 180, 360); fill(0); ellipse(-31, 88, 15, 15); translate(-200, -200); popMatrix(); popMatrix(); textSize(30); text(animalText, 28, 374); rotateAnimal++; if (!mouseIsPressed) { noStroke(); fill(255, 255, 255); rect(300, 545, width, 140); textSize(15); fill(0); text("The Duck and Rabbit Illusion\nSometimes it's a rabbit, and sometimes it is a duck!\nPress Enter for the next illusion.", 10, 509); } else { textSize(15); text("Holding down the mouse dosen't do anything for this illusion.",10,509); } if (rotateAnimal >= 360 /degrees/ ) { rotateAnimal = 0; } if (rotateAnimal >= 0 && rotateAnimal <= 170) { animalColor = color(251, 255, 0); animalText = "Which one do you see?\nA duck?"; } else { animalColor = color(255, 255, 255); animalText = "Which one do you see?\nA rabbit?"; } } else if (scene === 4) { fill(255, 255, 0); rect(300, 300, 400, 400); fill(0, 0, 140); pushMatrix(); translate(300, 300); rotate(rotateSquare); rect(0, 0, 175, 175); popMatrix(); rotateSquare++; if (!mouseIsPressed) { fill(0, 106, 255); rect(195,405,190,190); rect(405,405,190,190); rect(195,195,190,190); rect(405,195,190,190); fill(255, 255, 255); rect(300, 545, width, 140); textSize(15); fill(0); text("The Breathing Square Illusion\nDoes the navy blue square look like it is getting bigger and smaller, as if it were\nbreathing? But if you hold down the mouse, what do you see now?", 10, 509); } else { fill(0); textSize(15); text("As you can see, the square is only rotating! Press Enter for the next illusion.",10,525); } } else if (scene === 5) { stroke(100); strokeWeight(2); fill(255); rect(300, 300, 375, 250); for (var i = 175; i < 425; i += 25 ){ line(113, i , 487, i); } for (var i = 187; i < 420; i += 50) { for (var j =moveRectangles; j < 470; j+= 55) { fill(0, 0, 0); rect(j, i, 30, 25); } } for (var i = 212; i < 420; i += 50) { for (var j = 165; j < 470; j+=55) { rect(j,i,30,25); } } noStroke(); fill(255); rect(300, 545, width, 140); fill(0); text("The Wedged Lines Illusion\nSquint at the picture above, and it looks like the lines are all slanted, but if you\nmove the arrow keys and match up all of the rectangles, you will see that the lines \nare perfectly straight! Press Enter for the next illusion.", 10, 509); } else if (scene === 6) { background(0, 0, 255); fill(255, 145, 0); ellipse(200, 300, 40, 40); ellipse(400, 300, 40, 40); if (mouseIsPressed) { fill(0); text("As you can see, the circles are exactly the same size!\nPress enter for the next illusion.",10,509); } else { fill(151, 141, 176); for (var i = 0; i < 6; i ++) { pushMatrix(); translate(200, 300); rotate(((360/6) i) + 7.5); translate(-200, -300); ellipse(155, 240, 70, 70); popMatrix(); } for (var i = 0; i < 8; i ++) { pushMatrix(); translate(400, 300); rotate(((360/8) * i)); translate(-400, -300); ellipse(366, 300, 20, 20); popMatrix(); } fill(0); text("The Two Circles Illusion\nEven though the orange circle on the right looks bigger than the circle on the left,\nthey are exactly the same size! Click the screen to prove it!", 10, 509); } } else if (scene === 7) { noFill(); strokeWeight(30); stroke(255,0,0); arc(300,207+ydif,380,124,180,360); arc(300,293+ydif,340,124,200,340); line(109,207+ydif,131,267+ydif); line(493,207+ydif,465,267+ydif); strokeWeight(75); arc(300,243+ydif,340,124,200,340); strokeWeight(30); stroke(255, 247, 0); arc(300,207+ydif2,380,124,180,360); arc(300,293+ydif2,340,124,200,340); line(109,207+ydif2,131,267+ydif2); line(493,207+ydif2,465,267+ydif2); strokeWeight(75); arc(300,243+ydif2,340,124,200,340); if (ydif <= 0){ ydifinc = 1; } else if (ydif === 200) { ydifinc = -1; } if (ydif2 <= 0){ ydif2inc = 1; } else if (ydif2 === 200) { ydif2inc = -1; } ydif += ydifinc; ydif2 += ydif2inc; noStroke(); fill(255); rect(300, 545, width, 140); fill(0); text("The Bigger Shape Illusion\nThe top one always looks smaller than the bottom one, but they are exactly\nthe same size!", 10, 509); } else if (scene === 8) { background(255, 255, 255); fill(0); for (var i = 0; i < 3; i ++) { for (var j = 0; j < 3; j++) { ellipse(i90+220, j90+220,70,70); } } if (nineDots.description === true){ textSize(15); fill(0); text("The 9 Dots Challenge\nEven though this isn't an illusion, it is a cool challenge! Can you try to draw 4 connected lines\nso that it connects all of the dots? The line can be vertical, horizontal, or diagonal.", 10, 509); rect(60,575,90,30); rect(540,575,90,30); fill(255); text("Hint",43,578); text("Answer",514,578); } else if (nineDots.hint === true) { fill(0); text("Hint: Think outside of the box (literally).",10,509); rect(60,575,90,30); rect(540,575,90,30); fill(255); text("Back",43,578); text("Answer",514,578); } else if (nineDots.answer === true) { fill(0); text("Here is the answer! Pretty tricky!",10,530); rect(60,575,90,30); fill(255); text("Back",43,578); stroke(81, 76, 224); strokeWeight(9); /Line 1/ line(220,200,220,500); /Line 2/ line(220,500,500,205); /Line 3/ line(500,200,220,200); /Line 4/ line(220,200,400,408); } } else if (scene === 9) { textAlign(CENTER,CENTER); var diameter2 = 1200; var decreaseAmt2 = 0.02; var scaleF2 = 1.0; while (scaleF2 > 0){ //black circles pushMatrix(); translate(300,300); scale(scaleF2); drawBlackCircle(diameter2); scaleF2 -= decreaseAmt2; popMatrix(); //white circles pushMatrix(); translate(300,300); scale(scaleF2); drawWhiteCircle(diameter2); scaleF2 -= decreaseAmt2; popMatrix(); } fill(255); textSize(40); text("Hope you enjoyed!",300,71); textSize(20); text("Be sure to leave in the comments what your favorite illusion is!",300,146); textSize(35); text("Click anywhere to restart the program",300,300); } if (keys[RIGHT] && moveRectangles <= 164) { moveRectangles ++; } else if (keys[LEFT] && moveRectangles >= 147) { moveRectangles --; } }; keyPressed = function() { keys[keyCode] = true; // Can't put this in draw function if (keys[ENTER] && scene < 9) { scene ++; } if (keys[SHIFT] && scene > 0) { scene --; } }; keyReleased = function() { keys[keyCode] = false; }; mouseReleased = function() { if (scene === "Home") { scene = 0; } if (scene === 8){ if(buttonClicked(60,575,90,30) && nineDots.hint === false && nineDots.answer === false){ nineDots.description = false; nineDots.hint = true; nineDots.answer = false; } else if(buttonClicked(60,575,90,30) && (nineDots.hint === true)){ nineDots.description = true; nineDots.hint = false; nineDots.answer = false; } else if(buttonClicked(60,575,90,30) && (nineDots.answer === true)) { nineDots.description = true; nineDots.hint = false; nineDots.answer = false; } if(buttonClicked(540,575,90,30)) { nineDots.answer = true; nineDots.description = false; nineDots.hint = false; } } if (scene === 9) { scene = "Home"; } }; //}
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgNHIkZfpCgw
Votes	221
Spin-Offs	12
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Pseudonymous Coder
Author Name	AnonymousCoding
Author ID	kaid_671284082836744650204676
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739453438521
Updated	10 months ago, 1739453446897
Source Deleted	unknown