Viewing Program

Program Data

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

Title	Kitty Party
ID	5783791374647296
Created	4 years ago, 1612126728504
Updated	4 years ago, 1612416253560
Code	/ My first atempt for animation and cute? graphics. click to swicth, Enjoy! @Started 29/1/2020 @Finished 30/1/2020 @Released 1/2/2020 [ 0:30AM! ] @Time 4-5 hours @Help need help for a proper code for the tail. I'll give credit Subpage: https://www.khanacademy.org/computer-programming/new-suppage/6086006137503744 Working with animations https://www.pinterest.com/pin/737886720196242731/ / background(0, 0, 0); var colorNo = colorNo \|\| 0, total = 5, bgColor = color(154, 112, 158); var Cat = function(x,y){ this.x = x \|\| 0; this.y = y \|\| 0; this.mainColor = color(244, 235, 245); this.shadeColor = color(224, 215, 218); this.eyeColor = color(56, 46, 31); this.eyeColor2 = color(255, 255, 255); this.eyeColor3 = color(255, 255, 255); this.skinColor = color(230, 172, 145); this.mouthColor = color(184, 184, 184); this.headPhone = color(64, 64, 64); this.frame = 0; this.lock = false; }; Cat.prototype.drawHand = function(x,y,rot,sc,col){ pushMatrix(); translate(x,y); rotate(rot); scale(sc \|\| 1); var col = col \|\| color(this.mainColor); fill(col); noStroke(); ellipse(0,16,17,60); // rect(-8,14,15,30,0,0,6,30); popMatrix(); }; Cat.prototype.drawBody = function(x,y){ pushMatrix(); translate(x,y); fill(this.mainColor); noStroke(); beginShape(); vertex(0,0); vertex(100,0); bezierVertex(150,-120,-50,-120,0,0); endShape(); fill(this.shadeColor); beginShape(); vertex(-8,-43); vertex(-5,-43); vertex(-3,-30); vertex(-1,-37); vertex(0,-25); vertex(2,-32); bezierVertex(22,-21,38,-24,60,-32); bezierVertex(58,-24,65,-18,65,-15); bezierVertex(57,-15,44,-4,47,0); vertex(0,0); bezierVertex(-4,-6,-10,-30,-8,-43); endShape(); beginShape(); vertex(0,-65); vertex(20,-55); vertex(21,-58); vertex(30,-52); vertex(30,-57); vertex(55,-55); vertex(97,-70); bezierVertex(68,-100,22,-95,0,-65); endShape(); fill(this.mainColor); ellipse(60,0,30,3); popMatrix(); }; Cat.prototype.drawTail = function(x,y,spd){ var w = 10; var ang = sin(spd)50,ang2 = sin(spd)30,ang3 = sin(spd)10; var pos1 = {x:cos(ang)60,y:sin(ang)60}; var pos2 = {x:cos(ang2)40,y:sin(ang2)40}; var pos3 = {x:cos(ang3)30,y:sin(ang3)30}; pushMatrix(); translate(x,y); rotate(-50); noStroke(); fill(this.shadeColor); var ex1 = (spd%360 < 180) ? (sin(spd)w/2): -(-sin(spd)w/2)/1.5; var ex2 = (spd%360 > 180) ? (-sin(spd)w/2): -(sin(spd)w/2)/1.5; beginShape(); vertex(0,-w/2); bezierVertex(pos3.x,pos3.y-w/2,pos2.x+(sin(spd)w/2+w/2),pos2.y,pos1.x+ex1,pos1.y-w/2); vertex(pos1.x+ex2,pos1.y+w/2); bezierVertex(pos2.x+(-sin(spd)w/2+w/2),pos2.y,pos3.x,pos3.y+w/2,-10,w/2+10); endShape(); ellipse(pos1.x,pos1.y,w,w); popMatrix(); }; Cat.prototype.drawHead = function(x,y){ pushMatrix(); translate(x,y); scale(1.03); // headphone noFill(); stroke(0, 0, 0); strokeWeight(10); line(-43,-28,-41,-56); // ears { noStroke(); pushMatrix(); translate(-40,-60); rotate(-10); scale(0.8); fill(this.mainColor); triangle(0,-5,33,39,-17,57); fill(this.skinColor); triangle(0,0,13,42,-12,50); popMatrix(); pushMatrix(); translate(40,-60); rotate(10); scale(0.8); scale(-1,1); fill(this.mainColor); triangle(0,-5,33,39,-17,57); fill(this.skinColor); triangle(0,0,13,42,-12,50); popMatrix(); // } // head fill(this.mainColor); noStroke(); triangle(-34,-18,-38,-35,-26,-27); triangle(-34,-18,-33,-39,-24,-27); triangle(32,-18,38,-38,19,-27); triangle(34,-18,47,-34,19,-27); beginShape(); vertex(-43,-26); bezierVertex(-10,-43,10,-43,43,-26); bezierVertex(46,-26,47,-22,51,0); vertex(59,10); vertex(50,15); vertex(54,20); bezierVertex(6,50,-6,50,-54,20); vertex(-50,15); vertex(-59,10); vertex(-51,0); bezierVertex(-46,-26,-47,-22,-43,-26); endShape(); pushMatrix(); scale(0.9); // nose fill(this.skinColor); noStroke(); ellipse(0,13,9,5); // mouth noFill(); stroke(this.mouthColor); strokeWeight(2); arc(-7,22,14,9,0,180); arc(7,22,14,9,0,180); popMatrix(); pushMatrix(); translate(0,8); scale(1.3); fill(this.shadeColor); noStroke(); beginShape(); vertex(9,-29); vertex(-3,-13); vertex(-10,-13); vertex(-7,-19); vertex(-18,-20); vertex(-9,-28); vertex(-10,-22); vertex(-2,-25); vertex(-3,-19); vertex(9,-29); endShape(); popMatrix(); beginShape(); vertex(47,-34); vertex(35,-29); bezierVertex(44,-26,44,0,44,0); vertex(38,1); vertex(42,7); vertex(36,12); vertex(40,16); bezierVertex(38,24,12,34,12,34); vertex(15,40); bezierVertex(15,41,21,40,54,20); vertex(51,15); vertex(59,10); vertex(50,0); bezierVertex(47,-26,44,-28,44,-28); vertex(47,-34); endShape(); // headphone { // headphone right pad noStroke(); fill(0, 0, 0); beginShape(); vertex(48,-10); vertex(40,-10); bezierVertex(30,-20,36,-48,39,-54); vertex(48,-54); endShape(); // headphone arc noFill(); stroke(this.headPhone); strokeWeight(5); line(47,-13,47,-50); beginShape(); vertex(47,-13); bezierVertex(41,-23,42,-32,47,-52); bezierVertex(47,-100,-38,-108,-48,-61); endShape(); line(-48,-61,-53,-32); // headphone stroke(0, 0, 0); strokeWeight(8); line(-49,-28,-46,-48); strokeWeight(4); line(-49,-28,-45,-59); // headphone noStroke(); fill(36, 36, 36); ellipse(50,-30,14,29); fill(this.headPhone); ellipse(52,-30,10,28); //} popMatrix(); }; Cat.prototype.drawEyes = function(x,y,speed){ pushMatrix(); translate(x,y); fill(this.eyeColor); noStroke(); ellipse(0,0,14,14); pushMatrix(); rotate(sin(speed)50); fill(this.eyeColor2); var w = 8,d = 3; ellipse(0,-d,w,w); fill(this.eyeColor3); ellipse(0,-d-3,w/4,w/4); popMatrix(); popMatrix(); }; Cat.prototype.setColor = function(arr){ this.mainColor = arr[0] \|\| color(244, 235, 245); this.shadeColor = arr[1] \|\|color(224, 215, 218); this.eyeColor = arr[2] \|\|color(56, 46, 31); this.eyeColor2 = arr[3] \|\|color(255, 255, 255); this.eyeColor3 = arr[4] \|\|color(255, 255, 255); this.skinColor = arr[5] \|\|color(230, 172, 145); this.mouthColor = arr[6] \|\|color(184, 184, 184); this.headPhone = arr[7] \|\|color(64, 64, 64); }; Cat.prototype.draw = function(){ var speed = 90 + (sin(frameCount3) 90 + 90); pushMatrix(); translate(this.x,this.y); this.drawHand(-33,35,(sin(speed)10)+30,1,color(this.shadeColor)); this.drawTail(70,13,speed); this.drawBody(-30,75); this.drawHand(0,35,-(sin(speed)10)+15,1,color(this.mainColor)); pushMatrix(); rotate(sin(speed)24); this.drawHead(-10,-26); this.drawEyes(-35,-21,-speed); this.drawEyes(15,-21,-speed); popMatrix(); popMatrix(); }; var cat = new Cat(width/2-10,height/2+20); var setCatColor = function(colorNo){ switch(colorNo){ case 1: bgColor = color(65, 156, 94); cat.setColor([ color(36, 36, 36), color(26, 26, 26), color(245, 245, 245), color(8, 97, 18), color(255, 255, 255), color(79, 62, 54), color(64, 64, 64), color(209, 209, 209) ]); break; case 2: bgColor = color(232, 109, 90); cat.setColor([ color(222, 148, 64), color(181, 109, 33), color(255, 255, 255), color(92, 91, 97), color(255, 255, 255), color(82, 51, 37), color(74, 3, 1), color(212, 51, 51) ]); break; case 3: bgColor = color(63, 41, 186); cat.setColor([ color(49, 100, 189), color(106, 189, 177), color(46, 227, 255), color(17, 9, 71), color(17, 255, 0), color(178, 232, 255), color(18, 18, 18), color(0, 60, 255) ]); break; case 4: bgColor = color(232, 115, 255); cat.setColor([ color(214, 60, 204), color(161, 61, 156), color(255, 255, 255), color(0, 0, 0), color(0, 0, 0), color(255, 105, 250), color(158, 0, 158), color(255, 97, 244) ]); break; default: bgColor = color(154, 112, 158); cat.setColor([]); break; } }; draw = function(){ background(bgColor); cat.draw(); setCatColor(colorNo); pushStyle(); fill(255); textSize(32); textAlign(CENTER,TOP); text("Click", width/2, 10); popStyle(); if(keyPressed && keyCode === 84){ var img = get(); var w = img.width; background(0); image(img,(w-w1.5)/2,0,w*1.5,0); } }; mouseClicked = function(){ colorNo = (colorNo+1 < total) ? colorNo+1: 0; };
Folds	19,32,33,44,45,82,83,104,105,250,251,266,267,276,277,293,296,355,356,373,374,376
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN3yvYqjCgw
Votes	277
Spin-Offs	10
Type	PJS
Width	600
Height	400
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	CtmGamer
Author Name	MuhamedFazl
Author ID	kaid_680149812623529957566993
Author Profile Access	PUBLIC

Archive Data

Added	6 months ago, 1739448971682
Updated	4 months ago, 1744845118247
Source Deleted	unknown