xxxxxxxxxx
//Q how to make the only one shape to have its trace?
/*
animate character ; moves around the creen,
has internal moving parts
use p5 graphics transformation(rotate, translate, scale) command,
object literal/ custom function to draw it self & maintain its state
*/
var headposition = 30
var headincr = 1
var a = 0
var b = 0
var angleincr = 1
var bincr=1
var size = 100
function preload() {
leftwing = loadImage("leftwing.jfif")
rightwing = loadImage("rightwing.jfif")
feet = loadImage("feet.png")
crow = loadSound("crow.mp3")
face = loadImage("face.png")
}
function setup() {
createCanvas(windowWidth, windowHeight);
angleMode(DEGREES)
rectMode(CENTER)
}
function draw() {
translate(mouseX, mouseY)
background(255);
//wings
//image source
/*data:image/jpeg;base64,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*/
push(); // move up one level IN THE DRAWING STACK
translate(0, 40);
a = a+angleincr;
if(a>20) angleincr = -angleincr; // reverse it
if(a<-20) angleincr = -angleincr; // reverse it
rotate(a);
image(leftwing, -130, -30, 100, 40)
pop();
push(); // move up one level IN THE DRAWING STACK
b = b+bincr;
translate(0, 40);
if(b>20) bincr = -bincr; // reverse it
if(b<-20) bincr = -bincr; // reverse it
rotate(-b);
image(rightwing, 30, -30, 100, 40)
pop();
//feet
//image source
/*https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPlBfha1AJSuS5hepQUWFeA5XpNpuF_58c-A&usqp=CAU*/
image(feet, -50, 70, size, size)
size = size + 0.5
if(size>120) size = 90
//body
fill(0)
ellipse(0, 50, 70, 100)
//head
//image source
/*https://www.google.com/imgres?imgurl=https%3A%2F%2Fcreazilla-store.fra1.digitaloceanspaces.com%2Fcliparts%2F68150%2Fraven-face-clipart-sm.png&imgrefurl=https%3A%2F%2Fcreazilla.com%2Fsections%2F4-clipart%2Ftags%2F2337-crow&tbnid=p-a6yEepgkrZzM&vet=12ahUKEwjD18H1zJHzAhUgrXIEHXiBAMwQMygXegUIARDVAQ..i&docid=vwnMg-2fDJ6TiM&w=300&h=270&q=crow%20face%20png&ved=2ahUKEwjD18H1zJHzAhUgrXIEHXiBAMwQMygXegUIARDVAQ*/
push();
translate(headposition, -50);
fill("teal")
image(face, -50, -20, 100, 100)
pop();
headposition+=headincr;
if(headposition>30) headincr*=-1;
if(headposition<-30) headincr*=-1;
//sound
if(a==20) crow.play()
}