Viewing Program

Program Data

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

Title	Amazing Optical Illusions 2
ID	5203473198432256
Created	4 years ago, 1611597816272
Updated	4 years ago, 1611616376241
Code	/*** INSTRUCTIONS: * Welcome to Amazing Optical Illusions 2! * Many people asked me to make a second one, so here it is! * 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 and @VXS for the concept of the avatar illusion. * If you would like to be notified whenever I release a program, go to http://tiny.cc/pseudonymous * Enjoy Amazing Optical Illusions 2! Please let me know what you liked or to improve on in the T&T. I am always open for feedback. * By Pseudonymous Coder **/ // IMPORTANT NOTE: If the description text is too big, make this value smaller until all the text fits in the box: var descriptionSize = 15; // Code var keys = []; var increment = 0; var scene = "Logo"; var increment = 0; var poke = 0; var rotateLine = 0; var dropLine = 0; var moveCircles = 1; var rotateCircles = 0; var dropCircles = 0; var playingSound = false; var changeFilter = INVERT; var changeRectInc = 0; var drawGrayCircle = 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")); println("This is the sequel to Amazing Optical Illusions. If you haven't seen the original, go to https://www.khanacademy.org/computer-programming/amazing-optical-illusions/6092089407586304\n\nEnjoy!"); draw = function() { noStroke(); rectMode(CENTER); if (scene === "Logo") { var pText = ["............","------------","$$$$$$$$$$$$","$$€$Ⴇ0$$$0$$","9$€UႧ0MUN0D$","P$€UD0MYN0D$","P$EUD0MYN0U$","PSEUDOMYNOUS","PSEUDONYMOUS","PSEUDONYMOUS","PSEUDONYMOUS","PSEUDONYMOUS"]; textAlign(CENTER,CENTER); textFont(createFont("monospace")); background(0); fill(0, 255, 72); textSize(60); text(pText[floor(increment)],300,300); textSize(30); if (floor(increment) >= 8) { text("Coder",300,350); } increment += 0.04; if (floor(increment) >= 12) { scene = "Home"; } } if (scene === "Home") { textFont(createFont("cursive")); 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); drawGrayCircle(diameter); scaleF -= decreaseAmt; popMatrix(); } fill(0); arc(150, 105, 100, 63, 0, 360); fill(255, 255, 255); ellipse(150, 105, 40, 40); fill(0); ellipse(150, 105, 20, 20); fill(255); textSize(40); text("ptical Illusions",325, 100); text("Click Anywhere to Start",300,300); textSize(110); text("2",494,89); if (poke >= 3) { fill(255); textSize(20); // No peeking! text("You found the Easter Egg!\nType: 'Optical123'\nin the T&T to let me know you found it!",300,368); } } else if (scene === 0) { background(255); textAlign(CORNER,CORNER); strokeWeight(6); stroke(255, 0, 255); line(150,400,450,400); stroke(0); pushMatrix(); translate(300,250); rotate(rotateLine); translate(-300,-250); line(300,100,300,400); popMatrix(); textSize(descriptionSize); noStroke(); if (!mouseIsPressed) { rotateLine = 0; fill(255); rect(300, 545, width, 140); fill(0); text("The Perpendicular Lines Illusion\nWhich one looks longer, the black line or the pink line? It looks like the black line, but hold\ndown the mouse to find out!", 10, 509); } else { fill(0); rect(300, 545, width, 140); fill(255); text("As you can see, the lines are the same size!\nPress Enter for the next illusion.", 10, 509); if (rotateLine < 90) { rotateLine +=2; } } } else if (scene === 1) { background(100); fill(255, 0, 255,50); for (var i = 0; i < 11; i ++) { pushMatrix(); translate(300,230); rotate((30i)-(30floor(moveCircles))); translate(-300,-230); for (var j = 0; j < 60; j +=5) { ellipse(300,80,j,j); } popMatrix(); } moveCircles += 0.07; stroke(255); strokeWeight(3); line(300,225,300,235); line(295,230,305,230); fill(255); rect(300, 545, width, 140); textSize(descriptionSize); fill(0); text("The Vanishing Circle Illusion\nStare at the white plus. After a couple of seconds, do you see a green circle in the gap between the\npink circles? If you look away, the green circle dissapears, since it was never there!\nPress Enter for the next illusion.", 10, 509); } else if (scene === 2) { background(255, 255, 255); if (!mouseIsPressed) { for (var i = 0; i < 255; i ++) { fill(i); rect(i2.4,300,10,600); } } /* strokeWeight(1); stroke(255, 0, 0); for(var i = 0; i < 9; i ++) { line(10+i60,210,100+i60,360); } for (var i = 0; i < 5; i +=0.5) { line(10+i20,240+i30,30+i20,210+i30); }/ fill(100); pushMatrix(); translate(300,240); rotate(rotateCircles); translate(-300,-240); ellipse(150,240,100,100); ellipse(450,240,100,100); popMatrix(); noStroke(); if (!mouseIsPressed) { fill(255, 255, 255); rect(300, 545, width, 140); textSize(descriptionSize); fill(0); text("The Color-Changing Circles Illusion\nDoes it look like the circles are changing colors as they rotate? But they are actually the same\ncolor, and the color never changes! Hold down the mouse to prove it.", 10, 509); } else { fill(0); rect(300, 545, width, 140); fill(255); text("As you can see, the circles are exactly the same color and never change.\nPress Enter for the next illusion.", 10, 509); } rotateCircles ++; } else if (scene === 3) { background(255); stroke(255, 0, 0); strokeWeight(8); line(300,100,272,145); line(300,100,328,145); line(150,350,261,350); line(150,350,207,253); line(450,350,337,350); line(450,350,393,258); noStroke(); fill(0); arc(150,150,100,100,60,360); arc(450,150,100,100,180,480); arc(300,400,100,100,300,600); fill(255, 255, 255); rect(300, 545, width, 140); textSize(descriptionSize); fill(0); text("The Invisible Triangle Illusion\nHow many triangles are there? It might look like one, or even two, but there are no full triangles\nin this photo, not even one!\nPress Enter for the next illusion.", 10, 509); } else if (scene === 4) { background(232, 208, 208); stroke(255, 0, 0); noStroke(); fill(0, 77, 255); ellipse(30+dropCircles,30+dropCircles,50,50); ellipse(570-dropCircles,30+dropCircles,50,50); dropCircles+=3; if (dropCircles === 237 && playingSound === true) { playSound(getSound("rpg/hit-clop")); } if (dropCircles >= 500) { dropCircles = 0; if (playingSound === false) { playingSound = true; } else if (playingSound === true) { playingSound = false; } } noStroke(); if (playingSound === false) { textAlign(CENTER); textSize(30); text("Does it look like the two circles\nare going through each other?",300,40); } else if (playingSound === true) { textAlign(CENTER); textSize(30); text("Now does it look like the two circles\nare bouncing off of each other?",300,40); } textSize(15); text("Make sure your volume is above 50% for full effect.",300,110); textAlign(CORNER); fill(255, 255, 255); rect(300, 545, width, 140); textSize(descriptionSize); fill(0); text("The Two Circles Illusion\nWhen the sound is on, it looks like the two circles are bouncing off of each other, but when the\nsound isn't there, it looks like they're going through each other. But the animation never\nchanges!\nPress Enter for the next illusion.", 10, 509); } else if (scene === 5) { background(0); stroke(200); strokeWeight(2); line(93,279,126,169); line(125,169,481,171); fill(150, 0, 255); ellipse(477,185.5,21,31); line(153,199,477,201); line(153,199,141,255); line(142,256,463,258); line(170,226,459,228); line(153,199,170,226); line(170,226,163,256); fill(255, 0, 0); ellipse(459,243,21,31); fill(255, 255, 0); ellipse(440,297,21,31); line(94,280,443,282); line(93,279,95,309); line(95,309.5,440,311.5); noStroke(); fill(0, 0, 0); if (!mouseIsPressed) { if (changeRectInc < 80) { rect(457,235,125,200); textAlign(CENTER,CENTER); fill(255); textSize(50); text("Can Fit Two Prongs",300,400); } else { rect(146,235,125,200); textAlign(CENTER,CENTER); fill(255); textSize(50); text("Three Prongs?",300,400); } textSize(descriptionSize); textAlign(CORNER); noStroke(); fill(255); rect(300, 545, width, 140); fill(0); text("The Impossible Pitchfork Illusion\nWhen the right side of the object is covered, it looks like the pitchfork could only fit two prongs,\nbut when the left side is covered, it has three prongs. Hold down the mouse to see what the figure\nactually looks like. It might surprise you!", 10, 509); } else { noStroke(); fill(255); rect(300, 545, width, 140); fill(0); text("Is this what you expected? This object wouldn't be possible to create in real life. It's an impossible\npitchfork!\nPress Enter for the next illusion.", 10, 509); } changeRectInc++; if (changeRectInc > 160) { changeRectInc = 0; } } else if (scene === 6) { textFont(createFont("cursive")); textAlign(CORNER); background(255); imageMode(CENTER); image(getImage("avatars/avatar-team"),300,250,327,200); filter(changeFilter); if (mouseIsPressed) { textSize(descriptionSize); changeFilter = GRAY; fill(0); text("When you held down the mouse, it looked like the image was in normal color, at least for a\nsecond. But after a couple of seconds, you realize that the image was never in color, it was\nblack and white!\nPress Enter for the next illusion.",10,509); } else { changeFilter = INVERT; fill(255); rect(300, 545, width, 140); fill(0); textSize(descriptionSize); text("The Magical Colored Image Illusion\nStare at the X for about 30 seconds. Then hold down the mouse. You will be amazed at what\nhappens!", 10, 509); textSize(12); text("*Inspired by another program",10,583); strokeWeight(2); stroke(255); line(295,254,305,264); line(295,264,305,254); } } else if (scene === 7) { background(0); textAlign(CORNER); textFont(createFont("cursive")); textSize(descriptionSize); for (var i = 100; i < 600; i += 100) { fill(175); rect(i,300,15,height); rect(300,i,width,15); fill(255); } fill(255); for (var i = 100; i < 600; i += 100) { for (var j = 100; j < 600; j += 100) { ellipse(i,j,25,25); } } fill(255); rect(300, 545, width, 140); fill(0); text("The Blinkning Dots Illusion\nDoes it look like black dots are blinking inside the white circles, but then they vanish if you look\nat it? It turns out, the black dots are never there!", 10, 509); } else if (scene === 8) { textAlign(CORNER); background(87, 87, 255); fill(100); rect(300,400,width,500); fill(255,200); noStroke(); fill(255, 255, 0); rect(300,200,100,10); rect(300,450,100,10); if (mouseIsPressed) { fill(0); rect(300, 545, width, 140); textSize(descriptionSize); fill(255); text("As you can see, the two lines are the same size! The reason that your brain thought the\ntop one was bigger is because it looked like it was farther away.",10,509); } else { strokeWeight(3); stroke(0); line(280,180,210,450); line(320,180,390,450); for (var i = 0; i <= 240; i +=20) { line(270-(i/3),190+i,330+(i/3),190+i); } noStroke(); fill(255); rect(300, 545, width, 140); fill(0); textSize(descriptionSize); text("The Train Track Illusion\nWhich yellow line looks bigger, the top one, or the bottom one? It looks like the top one, but as\nyou might of guessed, they are exactly the same size! Hold down the mouse to prove it!", 10, 509); } } 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); drawGrayCircle(diameter2); scaleF2 -= decreaseAmt2; popMatrix(); } fill(255); textSize(40); text("Hope you enjoyed it!",300,71); textSize(20); text("Be sure to leave in the comments what your favorite illusion is!",300,146); textSize(32); text("Click anywhere to restart the program",300,300); } if (width < 600 && height < 600) { throw { message: "Thank you for making a spinoff! Please change the width and height to 600 in settings, then reload the page." }; } }; keyPressed = function() { keys[keyCode] = true; // Can't put this in draw function if (keys[ENTER]) { scene++; } else if (keys[SHIFT] && scene > 0) { scene --; } }; keyReleased = function() { keys[keyCode] = false; }; mouseReleased = function() { if (scene === "Home") { if (buttonClicked(150, 105, 20, 20)) { poke ++; } else { scene = 0; } } else if (scene === 9) { scene = "Home"; } };
Folds	48,51,53,57,59,65,71,573,575,585,587,589,591,607
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN2cgJGfCQw
Votes	235
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	6 months ago, 1739377116875
Updated	6 months ago, 1739377142693
Source Deleted	unknown