Viewing Program

Program Data

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

Title	3D Illusion Graphic [Slightly Animated]
ID	6163306853335040
Created	7 years ago, 1539353261739
Updated	6 years ago, 1550518293962
Code	//Hope you guys like it! //-Paradox //Setup{ frameRate(60);//Just an attempt to get the desired framerate smooth(); //} //3d{ var TD = function(x,y,z){ var st = sqrt(3)/2; var oh = 1/2; var realX = x; var realZ = z; var X = (realX)st-(realZ)st; var Y = y-(realXoh+realZoh); return {x: X,y: Y}; }; var g = { matrix: [[]], pushMatrix: function(){ this.matrix.push([]); }, popMatrix: function(){ this.matrix.pop(); }, resetMatrix: function(){ this.matrix = [[]]; }, translate: function(x,y,z){ var endOfMatrix = this.matrix.length-1; this.matrix[endOfMatrix].push({type: "translate", data: {x: x, y: y, z: z}}); }, scale: function(x,y,z){ var endOfMatrix = this.matrix.length-1; this.matrix[endOfMatrix].push({type: "scale", data: {x: x, y: y, z: z}}); }, rotate: function(x,y,z){ var endOfMatrix = this.matrix.length-1; this.matrix[endOfMatrix].push({type: "rotate", data: {x: x, y: y, z: z}}); }, r: function(x,y,z){ var X = x; var Y = y; var Z = z; for(var i = this.matrix.length-1; i > -1; i --){ for(var j = this.matrix[i].length-1; j > -1; j --){ var type = this.matrix[i][j].type; var data = this.matrix[i][j].data; if(type==="translate"){ X+=data.x; Y+=data.y; Z+=data.z; } else if(type==="scale"){ X=data.x; Y=data.y; Z=data.z; } else if(type==="rotate"){ if(data.x!==0){ var dummyY = Y; Y = cos(data.x) Y - sin(data.x) * Z; Z = cos(data.x) * Z + sin(data.x) * dummyY; } if(data.y!==0){ var dummyX = X; X = cos(data.y) * X - sin(data.y) * Z; Z = cos(data.y) * Z + sin(data.y) * dummyX; } if(data.z!==0){ var dummyX = X; X = cos(data.z) * X - sin(data.z) * Y; Y = cos(data.z) * Y + sin(data.z) * dummyX; } } } } return TD(X,Y,Z); }, point: function(x,y,z){ point(this.r(x,y,z).x,this.r(x,y,z).y); }, line: function(x1,y1,z1,x2,y2,z2){ var p1 = this.r(x1,y1,z1); var p2 = this.r(x2,y2,z2); var c = {x: (p1.x+p2.x)/2, y: (p1.y+p2.y)/2}; line(p1.x,p1.y,p2.x,p2.y); }, triangle: function(x1,y1,z1,x2,y2,z2,x3,y3,z3){ var point1 = this.r(x1,y1,z1); var point2 = this.r(x2,y2,z2); var point3 = this.r(x3,y3,z3); var c = {x:(point1.x+point2.x+point3.x)/3,y:(point1.y+point2.y+point3.y)/3}; triangle(point1.x,point1.y,point2.x,point2.y,point3.x,point3.y); }, xrect: function(x,y,z,h,d){ this.quad(x,y,z,x,y+h,z,x,y+h,z+d,x,y,z+d); }, yrect: function(x,y,z,w,d){ this.quad(x,y,z, x+w,y,z, x+w,y,z+d, x,y,z+d); }, zrect: function(x,y,z,w,h){ this.quad(x,y,z, x+w,y,z, x+w,y+h,z, x,y+h,z); }, quad: function(x1,y1,z1,x2,y2,z2,x3,y3,z3,x4,y4,z4){ var point1 = this.r(x1,y1,z1); var point2 = this.r(x2,y2,z2); var point3 = this.r(x3,y3,z3); var point4 = this.r(x4,y4,z4); var c = {}; c.x = (point1.x+point2.x+point3.x+point4.x)/4; quad(point1.x,point1.y,point2.x,point2.y,point3.x,point3.y,point4.x,point4.y); }, cube: function(x,y,z,w,h,d,c1,c2,c3){ fill(c3); this.quad(x,y,z,x+w,y,z,x+w,y+h,z,x,y+h,z); fill(c1); this.quad(x,y,z,x,y,z+d,x,y+h,z+d,x,y+h,z); fill(c2); this.quad(x,y,z,x+w,y,z,x+w,y,z+d,x,y,z+d); }, beginShape: function(MODE){ beginShape(MODE); }, vertex: function(x,y,z){ vertex(this.r(x,y,z).x,this.r(x,y,z).y); }, v: function(x,y,z){ this.vertex(x,y,z); }, bezierVertex: function(cx1,cy1,cz1,cx2,cy2,cz2,x,y,z){ var c1 = this.r(cx1,cy1,cz1); var c2 = this.r(cx2,cy2,cz2); var p = this.r(x,y,z); bezierVertex(c1.x,c1.y,c2.x,c2.y,p.x,p.y); }, bv: function(cx1,cy1,cz1,cx2,cy2,cz2,x,y,z){ this.bezierVertex(cx1,cy1,cz1,cx2,cy2,cz2,x,y,z); }, endShape: function(MODE){ if(!MODE){ endShape(); } else { endShape(MODE); } }, };//G short for graphics //Available functions /do "g." before each of these. Example: "g.line(-25,0,0,25,0,0);" pushMatrix() popMatrix() resetMatrix() translate(x,y,z) scale(x,y,z) rotate(x,y,z) - recommended to do multiple in the order you desire point(x,y,z) line(x1,y1,z1,x2,y2,z2) triangle(x1,y1,z1,x2,y2,z2,x3,y3,z3) xrect(x,y,z,h,d) yrect(x,y,z,w,d) zrect(x,y,z,w,h) quad(x1,y1,z1,x2,y2,z2,x3,y3,z3,x4,y4,z4) cube(x,y,z,w,h,d,c1,c2,c3) beginShape(MODE) vertex(x,y,z) v(x,y,z) - an easier way of saying vertex bezierVertex(cx1,cy1,cz1,cx2,cy2,cz2,x,y,z) bz(cx1,cy1,cz1,cx2,cy2,cz2,x,y,z) - an easier way of saying bezierVertex endShape(MODE) + Please tell me any more I should include! / //} //Gradient{ var gradient = function(){ var lightBlue = color(34, 186, 161); var darkBlue = color(48, 69, 161); var darkGray = color(40); for(var i = 0; i < height/2; i ++){ stroke(lerpColor(lightBlue,darkBlue,i/200)); line(0,i,width,i); } for(var i = height/2; i < height; i++){ stroke(lerpColor(darkBlue,darkGray,(i-200)/200)); line(0,i,width,i); } }; gradient(); var gradientBackground = get(); //} var setMatrix = function(){ image(gradientBackground,0,0); pushMatrix(); translate(width/2,height/2); }; //Color Variables{ var c2 = color(219, 219, 182); var c3 = color(112, 112, 90); var c1 = lerpColor(c2,c3,0.5); var w2 = color(163, 197, 199); var w3 = color(72, 105, 107); var w1 = lerpColor(w2,w3,0.5); var seeThrough = 128; var waterColor = color(0, 123, 255,seeThrough); //} //Water Effects{ var waterSplatter = function(x,y,z,movement,vz,s,sv){ this.x = random(x-movement,x+movement); this.y = y; this.z = z; this.vz = random(vz-1,vz+1); this.s = random(2)+s-1; this.sv = random(sv-0.1,sv+0.2); this.done = false; }; waterSplatter.prototype.update = function(){ this.z+=this.vz; this.s-=this.sv; if(this.s<=0){ this.done = true; } }; waterSplatter.prototype.display = function(){ fill(255,255,255,100); g.yrect(this.x-this.s/2,this.y,this.z-this.s/2,this.s,this.s); }; waterSplatter.prototype.run = function(){ this.update(); this.display(); }; var waterDrop = function(x,y,z,movement,end){ this.x = random(x-movement,x+movement); this.y = y; this.h = random(5,10); this.vy =0; this.z = z; this.end = end; this.done = false; }; waterDrop.prototype.update = function(){ this.vy = min(this.vy+0.1,3); this.y+=this.vy; if(this.y+this.hthis.vy/3>this.end){ this.done = true; } }; waterDrop.prototype.display = function(){ strokeWeight(1); stroke(255,255,255,200); g.line(this.x,this.y,this.z,this.x,this.y+this.hthis.vy/3,this.z); noStroke(); }; waterDrop.prototype.run = function(){ this.update(); this.display(); }; var drops = []; //} //Paths{ var paths = function(){ g.pushMatrix(); noStroke(); //Beam up and down { //Beam var stickingOut = 65; g.cube(-100,-150-stickingOut,0,20,220+stickingOut,20,c1,c2,c3); //Dome on top var dome = {w: 3, h: 10}; var dh = -150-stickingOut+1;//Default height fill(lerpColor(c3,c2,0.2)); g.quad(-100,dh,0, -80,dh,0, -80-dome.w,dh-dome.h,dome.w, -100+dome.w,dh-dome.h,dome.w); fill(lerpColor(c1,c2,0.2)); g.quad(-100,dh,0, -100,dh,20, -100+dome.w,dh-dome.h,20-dome.w, -100+dome.w,dh-dome.h,dome.w); fill(c2); g.yrect(-100+dome.w,dh-dome.h,dome.w,20-dome.w2,20-dome.w2); //Door fill(40); var fromSides = 3; g.beginShape(); var dd = 30;//Door Drop g.vertex(-100+fromSides,-150,0); g.vertex(-100+20-fromSides,-150,0); g.vertex(-100+20-fromSides,-150-stickingOut+dd,0); g.vertex(-100+20-fromSides-4,-150-stickingOut+dd-5,0); g.vertex(-100+fromSides+4,-150-stickingOut+dd-5,0); g.vertex(-100+fromSides,-150-stickingOut+dd,0); g.endShape(); //underneath shadow var lh = 150; var inv; for(var i = 70; i < 70+lh; i ++){ inv = color(red(c3),green(c3),blue(c3),0); stroke(lerpColor(c3,inv,(i-70)/lh)); g.line(-100,i,0,-80,i,0); inv = color(red(c1),green(c1),blue(c1),0); stroke(lerpColor(c1,inv,(i-70)/lh)); g.line(-100,i,0,-100,i,20); } for(var i = 70; i < 70+lh; i ++){ inv = color(red(c3),green(c3),blue(c3),0); stroke(lerpColor(c3,inv,(i-70)/lh)); g.line(100,i,0,120,i,0); inv = color(red(c1),green(c1),blue(c1),0); stroke(lerpColor(c1,inv,(i-70)/lh)); g.line(100,i,0,100,i,20); } noStroke(); //} //First trestle{ var wos = 3; wos = constrain(wos,1,9);//Width of side fill(w2); g.beginShape(); g.v(-20,0,40); g.v(180,0,40); g.v(180,0,20); g.v(180-wos,0,20); g.v(180-wos,0,40-wos); g.v(-20,0,40-wos); g.endShape(); fill(w1); g.xrect(180-wos,0,20,20-wos,20-wos); fill(w3); g.zrect(-20+wos,0,40-wos,200-wos2,20-wos); fill(w2); g.yrect(-20+wos,20-wos,20,200-wos2,20-wos); g.yrect(160+wos,10,20,20-wos2,wos); fill(waterColor); g.yrect(-20+wos,0+wos,20,200-wos2,20-wos); fill(w1); g.xrect(160,40,20,-20,20); fill(w3); g.beginShape(); g.v(180,0,20); g.v(180,40,20); g.v(160,40,20); g.bv(160,40,20,160,20,20,140,20,20); g.v(140,20,20); g.v(-wos,20,20); g.v(-wos,0,20); g.v(160+wos,0,20); g.v(160+wos,10,20); g.v(180-wos,10,20); g.v(180-wos,0,20); g.endShape(); fill(w2); g.yrect(-wos,0,20,160+wos2,wos); lh = 100; var off = 40; for(var i = off; i < lh+off; i ++){ var inv = color(1,1,1,0); stroke(lerpColor(w3,inv,(i-off)/lh)); g.line(-20,i,20,0,i,20); stroke(lerpColor(w1,inv,(i-off)/lh)); g.line(-20,i,20,-20,i,40); } for(var i = off; i < lh+off; i ++){ var inv = color(1,1,1,0); stroke(lerpColor(w3,inv,(i-off)/lh)); g.line(160,i,20,180,i,20); stroke(lerpColor(w1,inv,(i-off)/lh)); g.line(160,i,20,160,i,40); } noStroke(); //} //Path back{ g.cube(-100,-150,-200,20,20,201,c1,c2,c3); g.cube(-300,-150,-200,201,20,20,c1,c2,c3); //Cover up fill(c1); g.xrect(-100,30,0,40,20); fill(c3); g.zrect(-100.5,29,0,20,40); //} //Second Trestle{ fill(w1); g.xrect(-wos,0,-170,20,190+wos); fill(w2); g.yrect(-wos,0,-170,wos,190+wos); g.yrect(-20+wos,20-wos,-170,20-wos2,190+wos); fill(waterColor); g.yrect(-20+wos,wos,-170+wos,20-wos2,190-wos); fill(waterColor); g.zrect(160+wos,wos,20,20-wos2,180); drops.push(new waterSplatter(-10,wos,-160,wos1.5,2,20-wos3,0.3)); if(frameCount%2===0){ drops.push(new waterDrop(-10,-180+wos,-160,5-wos+5,wos)); } for(var i = drops.length-1; i > -1; i --){ drops[i].run(); if(drops[i].done){ drops.splice(i,1); } } fill(w3); g.quad(-20,40,20,0,40,20,0,20,20,-20,0,20); fill(w1); g.beginShape(); g.v(-20,0,-170); g.v(-20,0,40); g.v(-20,40,40); g.v(-20,40,20); g.bv(-20,40,20, -20,20,20, -20,20,-10); g.v(-20,20,-140); g.bv(-20,20,-140, -20,20,-150, -20,40,-150); g.v(-20,40,-170); g.endShape(); fill(w3); g.zrect(-20,0,-170,20,40); fill(w2); g.beginShape(); g.v(0,0,-170+wos); g.v(-20+wos,0,-170+wos); g.v(-20+wos,0,40); g.v(-20,0,40); g.v(-20,0,-170); g.v(0,0,-170); g.endShape(); off = 40; for(var i = off; i < lh+50; i ++){ var inv = color(1,1,1,0); stroke(lerpColor(w3,inv,(i-off)/lh)); g.line(-20,i,-170,0,i,-170); stroke(lerpColor(w1,inv,(i-off)/lh)); g.line(-20,i,-170,-20,i,-150); } //} g.popMatrix(); }; //} draw = function() { if(this.__frameRate<10){ return; } //Actual draw setMatrix(); g.pushMatrix(); g.translate(0,sin(frameCount2)3+5,0);//The bobbing thing paths(); g.popMatrix(); popMatrix(); }; /😄/
Folds	3,6,8,171,173,189,191,195,197,206,208,261,263,475,477,493
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgIqd66_5Cgw
Votes	230
Spin-Offs	30
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Ƥᴀяᴀd͏σх Ƥɾσgʀᴀммíиɢ
Author Name	theParadox42
Author ID	kaid_526722911602758894723524
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739454220272
Updated	10 months ago, 1739454226268
Source Deleted	unknown