Yuna Wu's crazyDog.js
about my crazyDog.js
This is my code. I have been working on it a long time. I think programing is very hard to me, but in this code the hardest one is the animation. I'm proud of my code, because I have been working on my code the whole semester and I have try so hard to do it. I hope everyone will like my code!!!
The animation code is released under the GNU Lesser General Public License v2.1.
the code for my crazyDog.js
let x, y;
function setup() {
createCanvas(1800,780)
// Starts in the middle
x = width / 2;
y = height / 2;
//noLoop();
}
class Sun {
constructor (sSize, sColor, cColor, startingX, startingY)
{ this.sunSize = sSize;
this.sunColor = sColor;
this.center = cColor;
this.positionX = startingX;
this.positionY = startingY;
}
draw () {
push();
noStroke();
fill(255, 244, 25);
translate(this.positionX+103, this.positionY+100);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15); // start from 75 (tip of ellipse, 150/2), since ellipse is 150 wide
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
rotate(radians(40));
ellipse(this.positionX+75, this.positionY+0, 45, 15);
pop();
//center of Sun
noStroke();
fill(255, 174, 13);
ellipse(this.positionX+100, 107, 80, 80);
}
}
class CrazyDog {
constructor (cSize, cColor, colorarr, numberarr, startingX, startingY)
{ this.crazyDogSize = cSize;
this.crazyDogColor = cColor;
this.colorarr = colorarr;
this.numberarr = numberarr;
this.positionX = startingX;
this.positionY = startingY;
}
draw (bodyColor,earColor,eyeSize1,eyeSize2) {
//dog
for (let i = 0; i < 1; i++){
this.colorarr= [255, 500, 200]
let r = random(this.colorarr);
strokeWeight(2);
stroke(0);
//let myRandoms = [Math.random()*r, Math.random()*r, Math.random()*r]
//fill(myRandoms[0], myRandoms[1], myRandoms[2]);
fill(bodyColor);
//front left side feet
rect(this.positionX + 60, this.positionY+298, 10, 35, 20);
//front right side feet
rect(this.positionX + 65, this.positionY+298, 10, 35, 20);
//back left side feet
rect(this.positionX + 110, this.positionY+298, 10, 35, 20);
//back right side feet
rect(this.positionX + 115, this.positionY+298, 10, 35, 20);
//tail
for (let i = 0; i < 1; i++){
this.numberarr = [0, 15, 10, 5]
let r = random(this.numberarr)
rect(this.positionX + 130, this.positionY+283,40+r,8);
}
//body
rect(this.positionX + 50, this.positionY+253, 85, 55);
//head
circle(this.positionX + 50, this.positionY+253, 40);
//Left side ear
fill(earColor);
circle(this.positionX + 25, this.positionY+236, 20);
fill(earColor.map(x => x*3));
//fill((frameCount*10) % 255, frameCount % 255, frameCount % 255)
circle(this.positionX + 25, this.positionY + 236, 10);
//Right side ear
fill(earColor);
//fill(myRandoms[0], myRandoms[1], myRandoms[2]);
circle(this.positionX + 65,this.positionY + 228, 20);
fill(earColor.map(x => x*3));
//fill((frameCount*10) % 255, frameCount % 255, frameCount % 255)
circle(this.positionX + 65, this.positionY+229, 10);
}
for (let i = 0; i < 1; i++){
this.numberarr = [0, 15, 10, 5]
let r = random(this.numberarr)
fill(0)
//Left eyes(black)
circle(this.positionX + 40, this.positionY+253, 7+eyeSize1);
//Right eyes(black)
circle(this.positionX + 60, this.positionY+253, 7+eyeSize2);
fill(255)
//Left eyes(white)
circle(this.positionX + 40, this.positionY+253, 3+eyeSize1);
//Right eyes(white)
circle(this.positionX + 60, this.positionY+253, 3+eyeSize2);
}
}
}
function dogArray (n, y) {
let outputArray = [];
for (let i = 0; i < n ; i++) {
outputArray.push(new CrazyDog (10, Math.random(), 10, 10, 10+(i*150), 10 + y))
}
return outputArray
}
class Ground {
constructor (gSize, gColor, startingX, startingY)
{ this.groundSize = gSize;
this.groundColor = gColor;
this.positionX = startingX;
this.positionY = startingY;
}
draw () {
//ground
strokeWeight(2);
stroke(0);
fill(162, 232, 181);
rect(1, 344, 15400, 55);
rect(1, 644, 15400, 55);
}
}
class Cloud {
constructor (cSize, cColor, startingX, startingY)
{ this.cloudSize = cSize;
this.cloudColor = cColor;
this.positionX = startingX;
this.positionY = startingY;
}
draw () {
noStroke();
fill(color(this.cloudColor));
ellipse(this.positionX+250,50,60,50);
ellipse(this.positionX+280,40,60,50);
ellipse(this.position+230,50,60,50);
ellipse(this.positionX+270,70,60,50);
ellipse(this.positionX+300,65,60,50);
}
}
function cloudArray (n) {
let outputArray = [];
for (let i = 0; i < n ; i++) {
outputArray.push(new Cloud (100, "white", 20+(i*130), 20))
}
return outputArray
}
let myClouds = cloudArray(114);
function randomColorArray(n) {
let output = [];
for (let i = 0; i < n; i++){
output.push([Math.floor(255* Math.random()),Math.floor(255* Math.random()),Math.floor(255* Math.random())])
}
return output
}
function randomNumberArray(n, max) {
let output = [];
for (let i = 0; i < n; i++){
output.push(max * Math.random())
}
return output
}
let dogColors = randomColorArray(12);
let dogEyeSizes1 = randomNumberArray(12,10);
let dogEyeSizes2 = randomNumberArray(12,10);
function draw() {
background(187, 226, 242);
let sun1 = new Sun (10, "yellow", "orange", 10, 10)
sun1.draw();
let ground1 = new Ground (10, "green", 10, 20);
ground1.draw();
//let cloud1 = new Cloud (100, "white", 20, 20);
//cloud1.draw();
//let crazyDog1 = new CrazyDog (10, Math.random(), 10, 10, 10, 10);
// crazyDog1.draw();
x = 150;
// THE IMPORTANT LINE CONTROLLING THE ANIMATION UP AND DOWN!
// the center point the speed the range
y = -240 + (height * (1/2)) + (Math.sin(frameCount/10) * (height/5));
let myDogs = dogArray(12, y);
for(let i = 0; i < myDogs.length ; i++){
myDogs[i].draw((dogColors[i]),(dogColors[i].map(x => x/2)),dogEyeSizes1[i],dogEyeSizes2[i])
}
for(let i = 0; i < myClouds.length ; i++){
myClouds[i].draw()
}
}