Viewing Program

Program Data

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

Title	Text Breaker!
ID	6707445741256704
Created	10 years ago, 1430595579522
Updated	10 years ago, 1431037796132
Code	/* * NAME: Text breaker AUTHOR: Matthew Kestenbaum RELEASE DATE: May 1st, 2015 * HOW TO USE: Once the program is loaded (which can take a varied amount of time), just move your mouse over the text! It creates a cool effect * ABOUT: This program is just a demonstration of what I can do with the text splicing framework that I made. I'll definetely do more with it in the future. * LOADING: The loading in this program is necessary, because what it does is get the data of the text and adds that to the "data" array, which then is used to display the text at the right location. The 'Pixels Updated' section is how many pixels the program has iterated through (it first goes through all the pixels in the first column, then the second column, and so on, until it gets to the bottom). The 'Pixels Pushed' section is how many pixels it's added to the data array. For it to be added to the data array, the pixel has to be any color EXCEPT for white. So, technically you could create drawings with this - not just text! The "FPS" is pretty self explanatory - it's just the framerate you're getting in the loading screen. Generally it'll be pretty low, since it has to do a lot of iterating over pixels (It has to go over 40,000 pixels, and check the color of each one). * MANIPULATING THE CODE: The "txt" variable changes what the text says. The "quality" variable changes how high quality the text is. Setting it to "1" should be pixel perfect, but the loading screen would take longer (twice as long) and it would be MUCH laggier. The "Particle" constructor is what the data of each rectangle is, so all of the pixel movement and such is inside of that. I didn't add any code comments, so it may be pretty hard to understand (sorry!) Also, if you want something other than text, just change the content of DRAW_PROGRAM_QUALITY function to whatever drawing you what. * ATTENTION! I also made a version of this that doesn't have any loading screen. It can't be customized, since I took the data directly from what the program generated with this, but if you just want to play around with the "Cool" text, then this is for you: https://www.khanacademy.org/computer-programming/text-breaker-without-loading/6593857118666752 *** USAGE: Many people have asked me if they could use some of this code in their own programs, so I've just decided to put this on the program. You can use this program without credit, however I wouldn't like you lying or pretending the code is yours. (e.g you don't have to say that I made it inside of the code, but if someone asks who made it, you can't lie and take credit). / var txt = "Cool"; //This code determines what should be displayed. It doesn't have to be text! It can be anything you want in processing.js var DRAW_PROGRAM_QUALITY = function(){ background(255, 255, 255); textAlign(CENTER,CENTER); fill(0, 0, 0); textFont(createFont('impact',70)); text(txt,200,200); textAlign(TOP,LEFT); }; var realfps; var loading = true; var pos = { x: 0, y: 0 }; var imp = { x: 0, y: 0 }; var quality = 2; var data = []; var totalUpdated = 0; var Particle = function(x,y,col){ this.pos = new PVector(x,y); this.vel = 0; this.acc = new PVector(0,0); this.col = col; //This is the position that the particle will try to go to when not effected by the mouse this.staticPos = new PVector(x,y); this.mouseEffect = false; this.vel2 = 0; this.draw = function() { fill(this.col); rect(this.pos.x,this.pos.y,quality,quality); line(this.pos.x,this.pos.y+quality+1,this.pos.x+quality,this.pos.y+quality+1); }; this.goto = function(){ var d = dist(this.pos.x,this.pos.y,mouseX,mouseY); if(d<=40){ this.vel += (0.14+(d-0.0007)) / (realfps / 30); } else{ this.vel2 += 0.05/(realfps/30); } this.vel /= 1.04; this.vel2 /= 1.04; var a; a = atan2(this.pos.y-mouseY,this.pos.x-mouseX); if((this.vel<0.1&&this.vel>0)\|\|(this.vel>-0.1&&this.vel<0)){ this.vel = 0; } if(dist(this.pos.x,this.pos.y,this.staticPos.x,this.staticPos.y)<=2&&this.vel===0){ this.vel2 = 0; this.pos.x = this.staticPos.x; this.pos.y = this.staticPos.y; } if(this.vel!==0){ this.pos.x += this.vel * cos(a); this.pos.y += this.vel * sin(a); } else{ a = atan2(this.pos.y-this.staticPos.y,this.pos.x-this.staticPos.x); this.pos.x -= this.vel2 * cos(a); this.pos.y -= this.vel2 * sin(a); } }; }; frameRate(0); var cur = 0; var last = 0; draw = function() { last = cur; cur = millis(); realfps = 1000 / (cur - last); background(255,255,255); if(loading){ DRAW_PROGRAM_QUALITY(); for(var i = 0; i < 400; i += quality){ if(get(i,pos.y)!==color(255,255,255)){ data.push(new Particle(i,pos.y,color(0,0,0))); } totalUpdated ++; if(i>=396){ pos.y += quality; } } if(pos.y>=400){ loading = false; } background(0, 0, 0); fill(255, 255, 255); textSize(40); text("Loading: " + pos.y/4 +"%",50,200); textSize(20); text("Pixels updated: " + totalUpdated,50,250); text("Pixels pushed: " + data.length,50,300); text("FPS: " + round(realfps),50,350); } else{ for(var i in data){ var dl = data[i]; dl.draw(); dl.goto(); } fill(0, 0, 0); textSize(10); text("FPS: "+round(realfps),360,390); } };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIjGroz1Cww
Votes	266
Spin-Offs	45
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Matthew Kestenbaum
Author Name	MattKestenbaum
Author ID	kaid_58592348354166028666799
Author Profile Access	COACH

Archive Data

Added	6 months ago, 1739460984095
Updated	4 months ago, 1744845419434
Source Deleted	unknown