For the very first time a simple task, make Zoog using function
https://editor.p5js.org/billybil30/full/bwupJOOUY
using this code:
function setup() {
// Create drawing canvas
createCanvas(400, 400);
// Dark gray background
background(120);
Face();
Eye();
Pupil();
EyeBrows();
Antenna();
Mouth();
Arms();
Body();
}
function Face(){
fill(127, 0, 127);
ellipse(200, 200, 150, 200);
}
function Eye(){
fill(0, 200, 127);
ellipse(150, 150, 70, 40);
ellipse(250, 150, 40, 60);
}
function Pupil(){
fill(0);
ellipse(170, 150, 5, 5);
ellipse(270, 150, 10, 10);
}
function EyeBrows(){
stroke(255, 100, 100);
strokeWeight(15);
line(130, 110, 170, 120);
line(230, 105, 270, 100);
}
function Antenna(){
// Antenna
stroke(255);
strokeWeight(5);
line(200, 125, 200, 50);
}
function Mouth(){
noFill();
ellipse(200, 40, 20, 20);
noStroke();
fill(255, 0, 127);
ellipse(200, 250, 50, 20);
}
function Arms(){
stroke(0);
strokeWeight(30);
line(150, 350, 300, 300);
}
function Body(){
noStroke();
fill(255, 255, 0);
rect(150, 275, 100, 200);
}
State the value on the function
https://editor.p5js.org/billybil30/full/UVtAKGRlK
function setup() {
// Create drawing canvas
createCanvas(400, 400);
// Dark gray background
background(120);
Face(200,200,150,200);
Eye(0,200,127);
Pupil();
EyeBrows(255, 100, 100);
Antenna(200, 125, 200, 50);
Mouth(200, 250, 50, 20);
Arms(150, 350, 300, 300);
Body(150, 275, 100, 200);
}
function Face(x,y,w,h){
fill(127, 0, 127);
ellipse(x,y,w,h);
}
function Eye(r,g,b){
fill(r, g, b);
ellipse(150, 150, 70, 40);
ellipse(250, 150, 40, 60);
}
function Pupil(){
fill(0);
ellipse(170, 150, 5, 5);
ellipse(270, 150, 10, 10);
}
function EyeBrows(r,g,b){
stroke(r, g,b);
strokeWeight(15);
line(130, 110, 170, 120);
line(230, 105, 270, 100);
}
function Antenna(x1,y1,x2,y2){
// Antenna
stroke(255);
strokeWeight(5);
line(x1,y1,x2,y2);
}
function Mouth(x,y,w,h){
noFill();
ellipse(200, 40, 20, 20);
noStroke();
fill(255, 0, 127);
ellipse(x,y,w,h);
}
function Arms(x1,y1,x2,y2){
stroke(0);
strokeWeight(30);
line(x1,y1,x2,y2);
}
function Body(x,y,w,h){
noStroke();
fill(255, 255, 0);
rect(x,y,w,h);
}
the multiply number function
https://editor.p5js.org/billybil30/full/EVQu-ENOw
function setup() {
createCanvas(400, 400);
let MultiplyNumber = NumberValue (20,55);
console.log (MultiplyNumber);
}
function draw() {
background(220);
}
function NumberValue(a,b){
return a*b;
}
Making the bouncing ball more neat
https://editor.p5js.org/billybil30/full/EXYZ9Qn90
let ballStart = 1;
let bounce = 10;
function setup() {
createCanvas(300, 300);
}
function draw() {
frameRate(30);
background(220);
colorChange();
ballCreate();
bouncingBall();
}
function colorChange() {
if (ballStart > (width * 2) / 3) {
fill(0);
} else if (ballStart > width / 3) {
fill(220);
} else {
fill(255);
}
}
function ballCreate() {
circle(ballStart, height / 2, 20);
}
function bouncingBall() {
if (ballStart > width || ballStart < 0) {
bounce *= -1;
}
ballStart += bounce;
}
and finally make the pulsing randomness function neat
https://editor.p5js.org/billybil30/full/4VnEdPBvs
let thePattern = 20;
let pulsing = 0.05;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(87, 237, 169, 30); // using green background with alpha adjusted
drawLoop();
drawColorShape();
}
function drawLoop() {
for (let i = 0; i < width; i += thePattern) {
for (let j = 0; j < height; j += thePattern) {
let sizeX = 20 * cos(frameCount * pulsing + i * 0.2 + j * 0.3) + 20;
let sizeY = 15 * sin(frameCount * pulsing + i/width + j/height) + 20;
drawColorShape(i, j, sizeX, sizeY);
}
}
}
function drawColorShape(i, j, sizeX, sizeY) {
let specialColX = (i + j + pulsing * frameCount) % 400;
let specialColY = ((i*j)/pulsing + (i+j)* pulsing + frameCount) %150;
fill (specialColX/2, 45, 87,specialColY*3);
circle (i, j, sizeX, sizeY);
}