Viewing Program

Program Data

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

Title	Chubby Cat 3-D Practice Run
ID	6223183463055360
Created	11 years ago, 1399159205193
Updated	11 years ago, 1408506704946
Code	//Based off of Peter Collingridge's 3-D grid program //http://www.khanacademy.org/cs/3d-checkerboard/972365924 //&& featuring ROBERT.B.LYON's Rounded Triangle Function //http://www.khanacademy.org/cs/rounded-triangle-function/1345770138 //UP for jumping, DOWN for sitting, LEFT & RIGHT are just place-holders until I get this bad boy rotating... //barimonsterbk /*FOR FANS WHO ARE INTERESTED - I AM WORKING ON AN UPDATED VERSION HERE: http://www.khanacademy.org/cs/chubby-cat-hunts/5018443234934784/ frameRate(30); var roundTri = function(ax, ay, bx, by, cx, cy, curvatureRadius) { var ab = dist(ax, ay, bx, by); var bc = dist(bx, by, cx, cy); var ac = dist(ax, ay, cx, cy); if (curvatureRadius <= 0 \|\| ab === 0 \|\| bc === 0 \|\| ac === 0) { triangle(ax, ay, bx, by, cx, cy); return; } var p = []; p.push({ x: ax, y: ay, next_dist: ab, dx: bx - ax, dy: by - ay, next_x: 0, next_y: 0, prev_x: 0, prev_y: 0 }); p.push({ x: bx, y: by, next_dist: bc, dx: cx - bx, dy: cy - by }); p.push({ x: cx, y: cy, next_dist: ac, dx: ax - cx, dy: ay - cy }); var triVertex = function(A) { var d; var C = (A + 2) % 3; var theta = atan2(p[A].dy, p[A].dx); var gamma = atan2(-p[C].dy, -p[C].dx); var alpha = (gamma - theta); alpha /= 2; var i = abs(curvatureRadius / sin(alpha)); d = p[A].next_dist; p[A].next_x = p[A].x + i/d * p[A].dx; p[A].next_y = p[A].y + i/d * p[A].dy; d = p[C].next_dist; p[A].prev_x = p[A].x - i/d * p[C].dx; p[A].prev_y = p[A].y - i/d * p[C].dy; }; beginShape(); for (var i = 0; i < p.length; i++) { triVertex(i); vertex(p[i].prev_x, p[i].prev_y); bezierVertex(p[i].x, p[i].y, p[i].x, p[i].y, p[i].next_x, p[i].next_y); } endShape(CLOSE); }; //Create Player Object var ChubbyCat = function(x, y, size, speed, color){ this.x = x; this.y = y; this.y2 = y; this.tailx = x; this.taily = y; this.dotX = x; this.dotY = y; this.dotXL = x; this.dotYL = y; this.size = size; this.speed = speed; this.theta = 0%360; this.jumpTheta = 0; this.center = 200; this.radius = 150; this.color = color; this.reset = 0; }; //Create Player Moves ChubbyCat.prototype.trot = function(){ this.reset = 0; //Cat Movement Engine Right this.dotX = this.center + this.radius * cos(this.theta * 2); this.dotY = this.center + this.radius * sin(this.theta * 2); //Cat Movement Engine Left this.dotXL = this.center + this.radius * cos(this.theta * 2 + 150); this.dotYL = this.center + this.radius * sin(this.theta * 2 + 150); //Tail Movement Engine this.tailx = this.center + this.radius * cos(this.theta); this.taily = this.center + this.radius * sin(this.theta); //Shadow noStroke(); fill(0, 0, 0, 45); roundTri(this.x, this.y + this.size, this.x - this.size * 14 - this.x * (this.size * 0.01), this.y + this.size * 26, this.x + this.size * 14 + this.x * (this.size * 0.01), this.y + this.size * 26, this.size * 13); //Head noStroke(); fill(this.color[0] - 8, this.color[1] - 8, this.color[2] - 8); ellipse(this.x - this.size * 1.5 + this.dotX * (this.size * 0.007), this.y - this.size * 2, this.size * 12, this.size * 10); //Left ear roundTri(this.x - this.size * 8.5 + this.dotX * (this.size * 0.007), this.y - this.size * 9, this.x - this.size * 6.5 + this.dotX * (this.size * 0.007), this.y - this.size * 2, this.x - this.size + this.dotX * (this.size * 0.007), this.y - this.size * 5.6, this.size * 2); //Right ear roundTri(this.x + this.size * 4.5 + this.dotX * (this.size * 0.007), this.y - this.size * 9, this.x + this.size * 3.5 + this.dotX * (this.size * 0.007), this.y - this.size * 2, this.x - this.size * 3 + this.dotX * (this.size * 0.007), this.y - this.size * 5.6, this.size * 2); //Front Feets fill(this.color[0] - 25, this.color[1] - 25, this.color[2] - 25); //Left Paw ellipse(this.x - this.size * 1.4, this.y + this.size * 18 - this.dotXL * (this.size * 0.025), this.size * 5, this.size * 5); //Right Paw ellipse(this.x + this.size * 1.4, this.y + this.size * 18 - this.dotX * (this.size * 0.025), this.size * 5, this.size * 5); //Left Toes fill(this.color[0] + 60, this.color[1] + 15, this.color[2] + 10); ellipse(this.x - this.size * 1.4, this.y + this.size * 18.2 - this.dotXL * (this.size * 0.015), this.size * 3, this.size); ellipse(this.x - this.size * 1.4, this.y + this.size * 20 - this.dotXL * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x - this.size * 0.2, this.y + this.size * 19.6 - this.dotXL * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x - this.size * 2.6, this.y + this.size * 19.6 - this.dotXL * (this.size * 0.025), this.size * 1.2, this.size * 0.8); //Right Toes ellipse(this.x + this.size * 1.4, this.y + this.size * 18.2 - this.dotX * (this.size * 0.015), this.size * 3, this.size); ellipse(this.x + this.size * 1.4, this.y + this.size * 20 - this.dotX * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x + this.size * 0.2, this.y + this.size * 19.6 - this.dotX * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x + this.size * 2.6, this.y + this.size * 19.6 - this.dotX * (this.size * 0.025), this.size * 1.2, this.size * 0.8); //Back Feets fill(this.color[0] - 1, this.color[1] - 3, this.color[2] - 2); //Right Leg roundTri(this.x + this.size * 12 - this.dotX * (this.size * 0.001), this.y + this.size * 5 + this.dotX * (this.size * 0.021), this.x + this.size * 3.6 + this.dotX * (this.size * 0.001), this.y + this.size * 17 + this.dotX * (this.size * 0.021), this.x - this.size * 2 + this.dotX * (this.size * 0.001), this.y + this.size * 7.6 + this.dotX * (this.size * 0.021), this.size * 5.6); //Right Foot ellipse(this.x + this.size * 3.5 + this.dotX * (this.size * 0.001), this.y + this.size * 11.2 + this.dotX * (this.size * 0.029), this.size * 5.6, this.size * 4); //Left Leg roundTri(this.x - this.size * 12 + this.dotXL * (this.size * 0.001), this.y + this.size * 5 + this.dotXL * (this.size * 0.021), this.x - this.size * 3.6 - this.dotXL * (this.size * 0.001), this.y + this.size * 17 + this.dotXL * (this.size * 0.021), this.x + this.size * 2 - this.dotXL * (this.size * 0.001), this.y + this.size * 7.6 + this.dotXL * (this.size * 0.021), this.size * 5.6); //Left Foot ellipse(this.x - this.size * 3.5 - this.dotXL * (this.size * 0.001), this.y + this.size * 11.2 + this.dotXL * (this.size * 0.029), this.size * 5.6, this.size * 4); //Haunches fill(this.color[0] - 1, this.color[1] - 3, this.color[2] - 2); //Left ellipse(this.x - this.size * 5, this.y + this.size * 7 + this.dotXL * (this.size * 0.004), this.size * 12, this.size * 19); //Right ellipse(this.x + this.size * 5, this.y + this.size * 7 + this.dotX * (this.size * 0.004), this.size * 12, this.size * 19); //Body fill(this.color[0], this.color[1], this.color[2]); ellipse(this.x, this.y + this.size * 6, this.size * 19, this.size * 21); //Tail noFill(); strokeWeight(this.size * 4); stroke(this.color[0] + 8, this.color[1] + 9, this.color[2] + 8); bezier(this.x + (this.size) - this.dotX * (this.size * 0.004), this.y, this.x - this.size + this.dotXL * 0.03, this.y - this.size * 5, this.x - this.size * 20 + this.taily * (this.size * 0.1), this.y + this.tailx * (this.size * 0.008) - this.size * 9, this.x + this.size * 21 - this.tailx * (this.size * 0.1), this.y - this.size * 13 + this.tailx * (this.size * 0.007)); //Engine update this.theta += this.speed; }; ChubbyCat.prototype.jump = function(){ if(this.reset === 0){ this.y2 = this.y; this.jumpTheta = 0%360; this.reset = 1; } this.y2 += (-(this.dotY - 200) * (this.speed * 0.005)); //Cat Movement Engine this.dotX = this.center + this.radius * cos(this.jumpTheta * 2); this.dotY = this.center + this.radius * sin(this.jumpTheta * 2); //Cat Movement Engine Front this.dotXF = this.center + this.radius * cos(this.jumpTheta * 2 + 45); this.dotYF = this.center + this.radius * sin(this.jumpTheta * 2 + 45); //Tail Movement Engine this.tailx = this.center + this.radius * cos(this.theta); this.taily = this.center + this.radius * sin(this.theta); //Shadow noStroke(); fill(0, 0, 0, 5 + this.dotX/8); roundTri(this.x, this.y + this.size, this.x - this.size * 18 + this.dotX * (this.size * 0.01), this.y + this.size * 26, this.x + this.size * 18 - this.dotX * (this.size * 0.01), this.y + this.size * 26, this.size * 13); //Head noStroke(); fill(this.color[0] - 8, this.color[1] - 8, this.color[2] - 8); ellipse(this.x, this.y2 - this.size - this.dotX * (this.size * 0.007), this.size * 12, this.size * 10); //Left ear roundTri(this.x - this.size * 6, this.y2 - this.size * 8 - this.dotX * (this.size * 0.007), this.x - this.size * 5, this.y2 - this.size - this.dotX * (this.size * 0.007), this.x + this.size * 3, this.y2 - this.size * 3.6 - this.dotX * (this.size * 0.007), this.size * 2); //Right ear roundTri(this.x + this.size * 6, this.y2 - this.size * 8 - this.dotX * (this.size * 0.007), this.x + this.size * 5, this.y2 - this.size - this.dotX * (this.size * 0.007), this.x - this.size * 3, this.y2 - this.size * 3.6 - this.dotX * (this.size * 0.007), this.size * 2); //Front Feets fill(this.color[0] - 25, this.color[1] - 25, this.color[2] - 25); //Left Paw ellipse(this.x - this.size * 2.4, this.y2 + this.size * 17 - this.dotXF * (this.size * 0.025), this.size * 5, this.size * 5); //Right Paw ellipse(this.x + this.size * 2.4, this.y2 + this.size * 17 - this.dotXF * (this.size * 0.025), this.size * 5, this.size * 5); //Left Toes fill(this.color[0] + 60, this.color[1] + 15, this.color[2] + 10); ellipse(this.x - this.size * 2.4, this.y2 + this.size * 17.2 - this.dotXF * (this.size * 0.015), this.size * 3, this.size); ellipse(this.x - this.size * 2.4, this.y2 + this.size * 19 - this.dotXF * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x - this.size * 1.2, this.y2 + this.size * 18.6 - this.dotXF * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x - this.size * 3.6, this.y2 + this.size * 18.6 - this.dotXF * (this.size * 0.025), this.size * 1.2, this.size * 0.8); //Right Toes ellipse(this.x + this.size * 2.4, this.y2 + this.size * 17.2 - this.dotXF * (this.size * 0.015), this.size * 3, this.size); ellipse(this.x + this.size * 2.4, this.y2 + this.size * 19 - this.dotXF * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x + this.size * 1.2, this.y2 + this.size * 18.6 - this.dotXF * (this.size * 0.025), this.size * 1.2, this.size * 0.8); ellipse(this.x + this.size * 3.6, this.y2 + this.size * 18.6 - this.dotXF * (this.size * 0.025), this.size * 1.2, this.size * 0.8); //Back Feets fill(this.color[0] - 1, this.color[1] - 3, this.color[2] - 2); //Right Leg roundTri(this.x + this.size * 12 - this.dotX * (this.size * 0.004), this.y2 + this.size * 4 + this.dotX * (this.size * 0.029), this.x + this.size * 3.6 + this.dotX * (this.size * 0.004), this.y2 + this.size * 13.6 + this.dotX * (this.size * 0.029), this.x - this.size * 2 + this.dotX * (this.size * 0.004), this.y2 + this.size * 5.6 + this.dotX * (this.size * 0.029), this.size * 4.6); //Right Foot ellipse(this.x + this.size * 3.4 + this.dotX * (this.size * 0.004), this.y2 + this.size * 9.2 + this.dotX * (this.size * 0.034), this.size * 5.6, this.size * 4); //Left Leg roundTri(this.x - this.size * 12 + this.dotX * (this.size * 0.004), this.y2 + this.size * 4 + this.dotX * (this.size * 0.029), this.x - this.size * 3.6 - this.dotX * (this.size * 0.004), this.y2 + this.size * 13.6 + this.dotX * (this.size * 0.029), this.x + this.size * 2 - this.dotX * (this.size * 0.004), this.y2 + this.size * 5.6 + this.dotX * (this.size * 0.029), this.size * 4.6); //Left Foot ellipse(this.x - this.size * 3.4 - this.dotX * (this.size * 0.004), this.y2 + this.size * 9.2 + this.dotX * (this.size * 0.034), this.size * 5.6, this.size * 4); //Haunches fill(this.color[0] - 1, this.color[1] - 3, this.color[2] - 2); //Left ellipse(this.x - this.size * 5, this.y2 + this.size * 5 + this.dotX * (this.size * 0.011), this.size * 12, this.size * 19); //Right ellipse(this.x + this.size * 5, this.y2 + this.size * 5 + this.dotX * (this.size * 0.011), this.size * 12, this.size * 19); //Body fill(this.color[0], this.color[1], this.color[2]); ellipse(this.x, this.y2 + this.size * 6, this.size * 19, this.size * 21); //Tail noFill(); strokeWeight(this.size * 4); stroke(this.color[0] + 8, this.color[1] + 9, this.color[2] + 8); bezier(this.x, this.y2 - this.size * 3 + this.dotX * (this.size * 0.02), this.x, this.y2 - this.size * 5, this.x - this.size * 20 + this.taily * (this.size * 0.1), this.y2 + this.tailx * (this.size * 0.008) - this.size * 9, this.x + this.size * 21 - this.tailx * (this.size * 0.1), this.y2 - this.size * 13 + this.tailx * (this.size * 0.007)); //Engine update this.theta += this.speed; this.jumpTheta += this.speed; }; ChubbyCat.prototype.sit = function(){ this.reset = 0; //Tail Movement Engine this.tailx = this.center + this.radius * cos(this.theta); this.taily = this.center + this.radius * sin(this.theta); //Shadow noStroke(); fill(0, 0, 0, 50); ellipse(this.x, this.y + this.size * 22, this.size * 26, this.size * 11); //Head noStroke(); fill(this.color[0] - 5, this.color[1] - 5, this.color[2] - 5); ellipse(this.x, this.y - this.size * 0.5, this.size * 14, this.size * 13); //Left ear roundTri(this.x - this.size * 7, this.y - this.size * 9, this.x - this.size * 6, this.y - this.size, this.x + this.size * 2, this.y - this.size * 4.6, this.size * 2); //Right ear roundTri(this.x + this.size * 7, this.y - this.size * 9, this.x + this.size * 6, this.y - this.size, this.x - this.size * 2, this.y - this.size * 4.6, this.size * 2); //Back Feets fill(this.color[0] - 1, this.color[1] - 3, this.color[2] - 2); //Right Foot ellipse(this.x + this.size * 8.5, this.y + this.size * 21, this.size * 7, this.size * 5); //Left Foot ellipse(this.x - this.size * 8.5, this.y + this.size * 21, this.size * 7, this.size * 5); //Haunches fill(this.color[0] - 1, this.color[1] - 3, this.color[2] - 2); //Left ellipse(this.x - this.size * 5, this.y + this.size * 13 + this.x * (this.size * 0.011), this.size * 14, this.size * 20); //Right ellipse(this.x + this.size * 5, this.y + this.size * 13 + this.x * (this.size * 0.011), this.size * 14, this.size * 20); //Body fill(this.color[0], this.color[1], this.color[2]); ellipse(this.x, this.y + this.size * 12.5, this.size * 20, this.size * 27); //Tail noFill(); strokeWeight(this.size * 4.5); stroke(0, 0, 0, 30); bezier(this.x, this.y + this.size * 25, this.x, this.y + this.size * 26, this.x - this.size * 21 + this.taily * (this.size * 0.1), this.y + this.tailx * (this.size * 0.008) + this.size * 28, this.x + this.size * 22 - this.tailx * (this.size * 0.1), this.y + this.size * 37 + this.tailx * (this.size * 0.007)); stroke(this.color[0] + 9, this.color[1] + 10, this.color[2] + 9); bezier(this.x, this.y + this.size * 24, this.x, this.y + this.size * 25, this.x - this.size * 20 + this.taily * (this.size * 0.1), this.y + this.tailx * (this.size * 0.008) + this.size * 27, this.x + this.size * 21 - this.tailx * (this.size * 0.1), this.y + this.size * 28 + this.tailx * (this.size * 0.007)); //Engine update this.theta += this.speed; }; //Create Player var player1 = new ChubbyCat(200, 200, 6, 10, [110, 96, 90]); //var turnSpeed = PI; var perspect = 275; var horizon = 36; var tileWidth = 100; var nodes = []; var distance = 1200; var meSpeed = 5; var meX = 200; var meZ = 30; var drawGrid = function() { strokeWeight(1); //stroke(0); for (var x = -900; x < 1300; x += tileWidth) { for (var y = -100; y < distance; y += tileWidth) { if (y - meZ > -tileWidth - 150){ if ((x/tileWidth + y/tileWidth) % 2===0) { fill(166, 163, 100); } else { fill(220, 230, 193); } var p1 = perspect / (perspect + y - meZ); var x1 = 200 + p1 * (x - meX); var y1 = horizon + p1 * 200; var p2 = perspect / (perspect + y + tileWidth - meZ); var x2 = 200 + p2 * (x - meX); var y2 = horizon + p2 * 200; quad(x1, y1, x1 + tileWidth * p1, y1, x2 + tileWidth * p2, y2, x2, y2); } } } }; //Check for key pressed var keyState = []; var keyPressed = function(){ keyState[keyCode] = true; }; var keyReleased = function(){ keyState[keyCode] = false; }; //Draw Running Cat per buttons pressed var kittyRun = function(){ if (keyState[UP]){ player1.speed = 7; player1.jump(); meZ += meSpeed + 3; distance += meSpeed + 3; } else if (keyState[DOWN]){ player1.speed = 4; player1.sit(); } else { player1.speed = 10; player1.trot(); meZ += meSpeed; distance += meSpeed; } if (keyState[LEFT] && player1.x > (player1.size * 10) && !keyState[DOWN]){ player1.x -= 3; } if ((keyState[RIGHT]) && player1.x < (width - player1.size * 10) && !keyState[DOWN]){ player1.x += 3; } }; //Game Loop var draw = function() { background(99, 168, 154); //stroke(0, 0, 0); noStroke(); drawGrid(); stroke(98, 153, 124); strokeWeight(4); line(0, horizon * 2, width, horizon * 2); kittyRun(); };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgMD9vP6GCww
Votes	258
Spin-Offs	26
Type	PJS
Width	400
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Becky
Author Name	barimonsterbk
Author ID	kaid_857727321320908352169808
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739455027155
Updated	10 months ago, 1739455033998
Source Deleted	unknown