made by zoey
This is my crazyDog.js. I've been working on it all semester. The hardest thing was to learn how to animate the dogs. I'm proud of it because I have never coded anything before so I feel like I accomplished a lot from doing this. The code for my artwork is below.
The animation code is released under the GNU Lesser General Public License v2.1.
let circleY = 10; function setup() { createCanvas(1800, 780); } class Dog { constructor (xposition, yposition, size, dColor, dPosition) { this.yposition = yposition; this.xposition = xposition; this.dogSize = size; this.dogColor = dColor; this.dogPosition = dPosition; } draw () { //BODY// fill(color("beige")) //Ears// fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+115, circleY+this.yposition+165, circleY+80); fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+275, circleY+this.yposition+165,circleY+80); fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+115, circleY+this.yposition+165,circleY+50); fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+275, circleY+this.yposition+165,circleY+50); //Face// fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+200, circleY+this.yposition+230, circleY+200); //Eyes// fill(0,0,0); circle(circleY+this.xposition+160, circleY+this.yposition+215, circleY+40); fill(0,0,0); circle(circleY+this.xposition+250, circleY+this.yposition+215,circleY+40); fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+165, circleY+this.yposition+215,circleY+20); fill(Math.random()*255,Math.random()*255,Math.random()*225); circle(circleY+this.xposition+245, circleY+this.yposition+215,circleY+20); // Mouth // noFill() stroke(0,0,0) arc(circleY+this.xposition+190, circleY+this.yposition+270, circleY+40, 40, 0, PI); arc(circleY+this.xposition+220, circleY+this.yposition+270, circleY+40, 40, 0, PI); // Nose// fill(0,0,0) rect(circleY+this.xposition+193, circleY+this.yposition+262, circleY+25, 18, 5); //hat// fill(Math.random()*255,Math.random()*255,Math.random()*255); rect(circleY+this.xposition+165, circleY+this.yposition+30,circleY+70,100); ellipse(circleY+this.xposition+200, circleY+this.yposition+130, circleY+100,20); } } class Background { constructor (xposition, yposition, size, bColor, bposition) {this.yposition = yposition; this.xposition = xposition; this.backgroundSize = size; this.backgroundColor = bColor; this.backgroundposition = bposition; } draw () { fill(color("beige")) fill(Math.random()*255,Math.random()*255,Math.random()*225); rect(this.xposition+30,circleY+this.yposition+20,circleY+300,300); fill(Math.random()*255,Math.random()*255,Math.random()*225); rect(this.xposition+40,circleY+this.yposition+30,circleY+280,280); } } function dogRow (n, x, y) { let outputArray = []; for (let i = 0; i < n ; i++) { outputArray.push(new Dog (x + (i*300), 0 + y, 1000, 1000)) } return outputArray } function backgroundRow (n, x, y) { let outputArray = []; for (let i = 0; i < n ; i++) { outputArray.push(new Background (x + (i*300), 70 + y, 1000, 1000)) } return outputArray } function allDogs (startingX, startingY, numberOfRows, rowLength) { for(let i = 0; i < numberOfRows ; i++){ let myDogs = dogRow (rowLength, startingX, startingY+(i*350)); for(let i = 0; i < myDogs.length ; i++){ myDogs[i].draw() } } } function allBackground (startingX, startingY, numberOfRows, rowLength) { for(let i = 0; i < numberOfRows ; i++){ let myBackground = backgroundRow (rowLength, startingX, startingY+(i*350)); for(let i = 0; i < myBackground.length ; i++){ myBackground[i].draw() } } } function draw() { background(220); //let background2 = new Background (200,100, 1000,1000); //background2.draw(); //for(let i = 0; i < myBackgrounds.length ; i++){ // myBackgrounds[i].draw() //} //let dog2 = new Dog (200,100, 1000, 1000); //dog2.draw(); //for(let i = 0; i < myDogs.length ; i++){ // myDogs[i].draw(); // } allBackground (50, 50, 5, 5) allDogs (50, 50, 5, 5); circleY = circleY + 10; circleY = (frameCount*25) % height }