Viewing Program

Program Data

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

Title	FLIP TAP
ID	6044245667823616
Created	4 years ago, 1615307667863
Updated	4 years ago, 1617998218331
Code	var scene = 'logo'; var frames = 0; var clicked = false; mouseClicked = function(){ clicked = true; }; var logo = function(){ background(20); frames++; pushMatrix(); translate(width / 2, height / 2); scale(width / 175); stroke(20); strokeWeight(10); fill(255, 100, 0, frames * 10 - 50); quad(0, -50, -45, -25, 0, 0, 45, -25); fill(0, 200, 255, frames * 10 - 170); quad(0, 0, -45, -25, -45, 25, 0, 50); fill(150, 0, 200, frames * 10 - 290); quad(0, 0, 45, -25, 45, 25, 0, 50); popMatrix(); if(clicked \|\| frames > 100){ scene = 'menu'; } }; var c1 = color(202, 46, 85); var c2 = color(27, 152, 224); var curcol = c1; var score = 0; var achs = [false, false, false, false, false, false]; var notifTimer = 0; var Notif = function(tit, txt){ this.y = -100; this.tit = tit; this.content = txt; this.a = 1000; this.spd = 5; }; Notif.prototype.all = function() { noStroke(); fill(255, this.a); rect(150, this.y, 300, 100, 10); textAlign(LEFT); fill(48, 50, 61, this.a); textFont(createFont("Avenir Next Bold"), 35); text(this.tit, 160, this.y + 40); textFont(createFont("Avenir Next"), 20); text(this.content, 160, this.y + 65); textAlign(CENTER, CENTER); this.y += this.spd; this.spd /= 1.048; this.a -= 5; if(this.a > 10){ notifTimer = 0; } }; var notifications = []; var button = function(x, y, txt, nxt){ fill(255); noStroke(); ellipse(x, y, 80, 80); fill(48, 50, 61); if(txt === ''){ stroke(48, 50, 61); strokeWeight(5); line(x - 10, y - 10, x - 10, y + 17); line(x, y - 20, x, y + 17); line(x + 10, y, x + 10, y + 17); } else if(txt === '↻'){ textFont(createFont("Avenir Next Bold"), 75); text(txt, x, y - 16); } else { textFont(createFont("Avenir Next"), 65); text(txt, x, y - 8); } if(dist(x, y, mouseX, mouseY) < 40){ cursor(HAND); if(clicked){ scene = nxt; score = 0; } } }; var lastclickframes = 0; var highscore = 0; var delag = false; var menu = function(){ background(48, 50, 61); textAlign(CENTER, CENTER); textFont(createFont("Avenir Next Bold"), 100); fill(202, 46, 85); text("FLIP", 193, 130); fill(27, 152, 224); text("TAP", 415, 130); textFont(createFont("Avenir Next"), 30); fill(230); text("Click to switch colors", 300, 200); if(!delag){ // these two lines basically tell the code, // "alright, I want to edit the screen pixel // by pixel". Most cases would have you use // both of these lines together loadPixels(); var pixels = imageData.data; // x, y and radius of sphere var cx = 300, cy = 300, r = 60, // variables to be used later, usually I like // to define them at the start, but it doesn't // matter much x, y, _x, _y, _z, lx, ly, lz, lh, m, _m, l, d; // this is the light vector. Like I said // before, it can be anything as long as // it has the same number of dimensions // as the normal vector. So x, y and z. // As an example, I'm setting it to the // mouse coordinates relative to the sphere. // Note that I divide it by the hypotenuse // of the entire thing. That's called // normalizing, it just makes the vector // have a length of 1. Remember this, // because it's pretty important in 3D lx = mouseX-cx; ly = mouseY-cy; lz = 200; lh = sqrt(lxlx+lyly+lzlz); // hypotenuse lx /= lh; ly /= lh; lz /= lh; // start at the top of the sphere and end at // the bottom for(y = -r;y < r; y++) { // these two lines are used to find the // width of a circle at a specific y // level. It's some fancy math that I // doubt you'd understand yet* m = y/r; m = sqrt(1-mm)r; // for the width of the circle at the // y level, we calculate the light values for(x = -m; x < m; x++) { // this is another imageData thing, it // tells the code which part of the // array of pixels corresponds to the x // and y, since pixels are stored on an // array. The equation by itself is // l = x+ywidth << 2, where x and y are // the coordinates of that pixel l = (x+cx)+(y+cy)width << 2; // the following code finds the normal, // I won't bother explaining it because // even I couldn't understand it when I // was explained it. Tinkering is your // best bet. Just note that this calc- // ulates a vector, where _x, _y, and _z // are the x, y and z's of the normal // vector. _x = x/r; _y = y/r; _z = sqrt(rr-xx-yy)/r; // finally, dot product. It's a lot // simpler that it seems. This small // equation gets you the light value // of that pixel d = _xlx+_yly+_zlz; d = (d+1)/2; // Like I said, the pixel data is stored // in an array. However, the format's // pretty dumb, so it's stored like: // [r,g,b,a, r,g,b,a, r,g,b,a] where // r, g and b are red, green and blue, just // like your normal colors. a is alpha, which // is just transparency, but it doesn't // work with imageData I'm pretty sure. // and the way you would access the data is // like this. pixels[l] is red, pixels[l+1] // is blue, and pixels[l+2] is green pixels[l] = red(curcol)d; pixels[l+1] = green(curcol)d; pixels[l+2] = blue(curcol)d; } } updatePixels(); } else { fill(curcol); ellipse(300, 300, 120, 120); } if(clicked && dist(mouseX, mouseY, 68, 50) > 100){ scene = 'game'; lastclickframes = frameCount; } button(150, 420, "©", 'credit'); button(250, 420, "?", 'how'); button(350, 420, "☆", 'achievements'); button(450, 420, "", 'lead'); textFont(createFont("Avenir Bold"), 35); fill(c2); text("HIGH SCORE:", 300, 490); textSize(70); fill(255); text(highscore, 300, 535); stroke(255, 100); strokeWeight(20); line(50, 50, 85, 50); noStroke(); fill(255); textFont(createFont("Avenir Next Bold"), 30); text("Delag:", 155, 45); textFont(createFont("Avenir Next"), 30); if(!delag){ ellipse(50, 50, 35, 35); text("Off", 230, 45); } else if(delag){ ellipse(85, 50, 35, 35); text("On", 230, 45); } if(clicked && dist(mouseX, mouseY, 68, 50) < 100){ if(!delag){ delag = true; } else if(delag){ delag = false; } } if(keyIsPressed){ if(!achs[4]){ notifications.push(new Notif("Hmmm...", "Find the easter egg.")); } achs[4] = true; filter(INVERT); } }; var boosttime = 0; var boostcount = 5; keyPressed = function(){ if(scene === 'game'){ boostcount = 5; boosttime = 0; if(curcol === c1){ curcol = c2; } else { curcol = c1; } } }; var py = 300; var externals; var wall = createGraphics(width, height, P3D); wall.lights(); var char = createGraphics(width, height, P3D); char.lights(); var circleInRect = function(x, y, r, rx, ry, rw, rh) { return dist(x, y, constrain(x, rx, rx+rw), constrain(y, ry, ry+rh)) < r; }; var wallpartart = function(x, y, c){ wall.pushMatrix(); wall.noStroke(); wall.background(0, 0, 0, 0); if(c === 1){ wall.fill(c1); } else { wall.fill(c2); } wall.translate(x, y); wall.box(30, 200, 200); wall.popMatrix(); externals.context.drawImage(wall.externals.canvas, 0, 0); }; var parts = []; for(var i = 0; i < 100; i++){ parts.push([-10, -10, -10, -10, -10, -10]); } var screenshot; var timer = 0; var Wall = function(){ this.x = 800; this.topsection = floor(random(1,3)); this.bottomsection = floor(random(1,3)); this.topgone = false; this.bottomgone = false; }; Wall.prototype.all = function(){ if(!delag){ if(!this.topgone){ wallpartart(this.x, 175, this.topsection); } if(!this.bottomgone){ wallpartart(this.x, 425, this.bottomsection); } } else { if(!this.topgone){ fill(c2); if(this.topsection === 1){ fill(c1); } rect(this.x - 15, 75, 30, 200); } if(!this.bottomgone){ fill(c2); if(this.bottomsection === 1){ fill(c1); } rect(this.x - 15, 325, 30, 200); } } if(!this.topgone){ if(circleInRect(300, py, 60, this.x, 75, 28, 195)){ this.topgone = true; if(this.topsection === 1){ if(curcol === c1){ if(!delag){ for(var i = 0; i < 100; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(70, 270), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; } else if(boosttime > 200 && boostcount > 0){ if(!delag){ for(var i = 0; i < 100; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(70, 270), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; boostcount--; if(!achs[3]){ notifications.push(new Notif("Fast Forward", "Blast through a wall at\ntop speed.")); } achs[3] = true; } else{ timer = 1; } } if(this.topsection === 2){ if(curcol === c2){ if(!delag){ for(var i = 0; i < 100; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(70, 270), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; } else if(boosttime > 200 && boostcount > 0){ if(!delag){ for(var i = 0; i < 100; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(70, 270), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; boostcount--; if(!achs[3]){ notifications.push(new Notif("Fast Forward", "Blast through a wall at top speed.")); } achs[3] = true; } else{ timer = 1; } } } } if(!this.bottomgone){ if(circleInRect(300, py, 60, this.x, 325, 28, 195)){ this.bottomgone = true; if(this.bottomsection === 1){ if(curcol === c1){ if(!delag){ for(var i = 0; i < 50; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(320, 520), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; } else if(boosttime > 200 && boostcount > 0){ if(!delag){ for(var i = 0; i < 50; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(320, 520), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; boostcount--; if(!achs[3]){ notifications.push(new Notif("Fast Forward", "Blast through a wall at top speed.")); } achs[3] = true; } else{ timer = 1; } } if(this.bottomsection === 2){ if(curcol === c2){ if(!delag){ for(var i = 0; i < 50; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(320, 520), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; boostcount--; } else if(boosttime > 200 && boostcount > 0){ if(!delag){ for(var i = 0; i < 50; i++){ parts[i] = [random(this.x - 19, this.x + 11), random(320, 520), random(5, 20), lerpColor(0, curcol, random(0.5, 1)), random(-3, 3), -0.5]; } } score++; boostcount--; if(!achs[3]){ notifications.push(new Notif("Fast Forward", "Blast through a wall at top speed.")); } achs[3] = true; } else{ timer = 1; } } } } this.x -= 4; if(boosttime > 300){ this.x -= 3; } if(this.x < -200){ this.gone = true; } }; var walls = []; var timerthingy = 0; var game = function(){ if(round(sin((frameCount - lastclickframes) 7.2) * 200) === 200 && timerthingy > 10){ if(random(0, 1) < 0.7){ walls.push(new Wall()); } timerthingy = 0; } timerthingy++; background(48, 50, 61); fill(255, 100); textFont(createFont("Avenir Next Bold"), 100); textAlign(LEFT, CENTER); text(score, 20, 50); textAlign(CENTER, CENTER); for(var i = 0; i < walls.length; i++){ walls[i].all(); } noStroke(); for(var i = 0; i < parts.length; i++){ if(parts[i][1] < 650){ fill(parts[i][3]); ellipse(parts[i][0], parts[i][1], parts[i][2], parts[i][2]); parts[i][0] += parts[i][4]; parts[i][1] += parts[i][5]; parts[i][5] += parts[i][2] / 8; } } noStroke(); if(!delag){ // these two lines basically tell the code, // "alright, I want to edit the screen pixel // by pixel". Most cases would have you use // both of these lines together loadPixels(); var pixels = imageData.data; // x, y and radius of sphere var cx = 300, cy = round(py), r = 60, // variables to be used later, usually I like // to define them at the start, but it doesn't // matter much x, y, _x, _y, _z, lx, ly, lz, lh, m, _m, l, d; // this is the light vector. Like I said // before, it can be anything as long as // it has the same number of dimensions // as the normal vector. So x, y and z. // As an example, I'm setting it to the // mouse coordinates relative to the sphere. // Note that I divide it by the hypotenuse // of the entire thing. That's called // normalizing, it just makes the vector // have a length of 1. Remember this, // because it's pretty important in 3D lx = mouseX-cx; ly = mouseY-cy; lz = 200; lh = sqrt(lxlx+lyly+lzlz); // hypotenuse lx /= lh; ly /= lh; lz /= lh; // start at the top of the sphere and end at // the bottom for(y = -r;y < r; y++) { // these two lines are used to find the // width of a circle at a specific y // level. It's some fancy math that I // doubt you'd understand yet* m = y/r; m = sqrt(1-mm)r; // for the width of the circle at the // y level, we calculate the light values for(x = -m; x < m; x++) { // this is another imageData thing, it // tells the code which part of the // array of pixels corresponds to the x // and y, since pixels are stored on an // array. The equation by itself is // l = x+ywidth << 2, where x and y are // the coordinates of that pixel l = (x+cx)+(y+cy)width << 2; // the following code finds the normal, // I won't bother explaining it because // even I couldn't understand it when I // was explained it. Tinkering is your // best bet. Just note that this calc- // ulates a vector, where _x, _y, and _z // are the x, y and z's of the normal // vector. _x = x/r; _y = y/r; _z = sqrt(rr-xx-yy)/r; // finally, dot product. It's a lot // simpler that it seems. This small // equation gets you the light value // of that pixel d = _xlx+_yly+_zlz; d = (d+1)/2; // Like I said, the pixel data is stored // in an array. However, the format's // pretty dumb, so it's stored like: // [r,g,b,a, r,g,b,a, r,g,b,a] where // r, g and b are red, green and blue, just // like your normal colors. a is alpha, which // is just transparency, but it doesn't // work with imageData I'm pretty sure. // and the way you would access the data is // like this. pixels[l] is red, pixels[l+1] // is blue, and pixels[l+2] is green pixels[l] = red(curcol)d; pixels[l+1] = green(curcol)d; pixels[l+2] = blue(curcol)d; } } updatePixels(); } else { fill(curcol); ellipse(300, py, 120, 120); } boosttime++; if(boosttime > 300){ fill(255, 20); noStroke(); rect(0, 0, width, height); } if(clicked){ boostcount = 5; boosttime = 0; if(curcol === c1){ curcol = c2; } else { curcol = c1; } } if(boostcount <= 0){ boosttime = 0; } py = 300 + sin((frameCount - lastclickframes) 1.2) * 200; if(timer === 1){ scene = 'dead'; screenshot = get(0, 0, width, height); } if(score >= 20){ if(!achs[0]){ notifications.push(new Notif("Good Start", "Get a score of 20 or more.")); } achs[0] = true; } if(score >= 50){ if(!achs[1]){ notifications.push(new Notif("Fantastic", "Get a score of 50 or more.")); } achs[1] = true; } if(score >= 100){ if(!achs[2]){ notifications.push(new Notif("Incredible", "Get a score of 100 or more.")); } achs[2] = true; } }; var credits = function(){ background(48, 50, 61); textFont(createFont("Avenir Next Bold"), 100); fill(255); text("CREDITS", 300, 100); textFont(createFont("Avenir Next"), 30); fill(230); text("Thanks to Ethan Kim for helping out with\nthe sphere's shading, A Random Coder\nfor the circle-to-rectangle collision code,\nand Willard for delagging my P3D walls!\nThey are @I2I0, @ARandomCoder123,\nand @willllard, respectively.\nAll other code is by Cubic Coding.", 300, 330); button(60, 540, "←", 'menu'); }; var how = function(){ background(48, 50, 61); textFont(createFont("Avenir Next Bold"), 100); fill(255); text("HELP", 300, 100); textFont(createFont("Avenir Next"), 30); fill(255); text("to switch colors.", 346, 207); text("touch the other color.", 352, 289); text("the same color to get a boost.", 338, 371); text("all the achievements.", 344, 453); textFont(createFont("Avenir Next Bold"), 30); fill(c1); text("CLICK", 186, 207); text("STAY", 91, 371); fill(c2); text("DON'T", 149, 289); text("EARN", 153, 453); button(60, 540, "←", 'menu'); }; var dead = function(){ background(48, 50, 61); textFont(createFont("Avenir Next Bold"), 100); fill(255); text("YOU DIED!", 300, 100); textFont(createFont("Avenir Next"), 30); fill(230); text("You smashed through " + score + " walls!", 300, 450); pushMatrix(); translate(300, 290); rotate(-10); imageMode(CENTER); fill(255); noStroke(); rect(-100, -100, 200, 200); image(screenshot, 0, 0, 190, 190); popMatrix(); button(60, 540, "↻", 'menu'); if(score > highscore){ highscore = score; } walls = []; timerthingy = 0; parts = []; for(var i = 0; i < 50; i++){ parts.push([-10, -10, -10, -10, -10, -10]); } timer = 0; }; var leaderboard = function(){ background(48, 50, 61); textFont(createFont("Avenir Next Bold"), 100); fill(255); text("SCORES", 300, 100); textFont(createFont("Avenir Next"), 30); fill(230); text("1. Dr. Strange: 305\n2. GamingGirt: 216\n3. BrenErso: 203\n4. TheDoughSmith: 195\n5. The Lightning Programmer: 194", 300, 330); button(60, 540, "←", 'menu'); }; var achsnip = function(x, y, tit, txt, num){ if(achs[num]){ fill(255); } else { noFill(); } noStroke(); rect(x - 125, y - 45, 250, 90, 10); textFont(createFont("Avenir Next Bold"), 35); if(achs[num]){ fill(48, 50, 61); } else { fill(255); } textAlign(LEFT, CENTER); text(tit, x - 118, y - 25); textFont(createFont("Avenir Next"), 17); textAlign(LEFT); text(txt, x - 118, y + 13); textAlign(CENTER, CENTER); }; var achievements = function(){ background(48, 50, 61); textFont(createFont("Avenir Next Bold"), 100); fill(255); text("AWARDS", 300, 100); textFont(createFont("Avenir Next"), 30); button(60, 540, "←", 'menu'); achsnip(164, 220, "Good Start", "Get a score of 20 or more.", 0); achsnip(436, 220, "Fantastic", "Get a score of 50 or more.", 1); achsnip(164, 330, "Incredible", "Get a score of 100 or more.", 2); achsnip(436, 330, "Fast Forward", "Blast through a wall at top\nspeed.", 3); achsnip(164, 440, "Hmmm...", "Find the easter egg.", 4); achsnip(436, 440, "Overachiever", "Get every achievement.", 5); }; var fps; var prevMil; var prevF; //jshint ignore: start draw = function() { cursor(ARROW); switch(scene){ case 'logo': logo(); break; case 'menu': menu(); break; case 'game': game(); break; case 'credit': credits(); break; case 'how': how(); break; case 'dead': dead(); break; case 'lead': leaderboard(); break; case 'achievements': achievements(); break; } for(var i = 0; i < notifications.length; i++){ notifications[i].all(); } clicked = false; fps = Math.round((frameCount - prevF) / (millis() - prevMil) * 1000); if(frameCount%100 === 0){ // println("FPS: " + fps); } prevMil = millis(); prevF = frameCount; if(achs[0] && achs[1] && achs[2] && achs[3] && achs[4] && notifTimer > 10){ if(!achs[5]){ notifications.push(new Notif("Overachiever", "Get every achievement.")); } achs[5] = true; } notifTimer++; };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN3f2abeCgw
Votes	297
Spin-Offs	5
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Cubic Coding
Author Name	CubicCoding
Author ID	kaid_286229724490605800583292
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739452927875
Updated	8 months ago, 1744844957866
Source Deleted	unknown