it’s an avocadooooooooo… thaaaaanksss…
sketch
var nPoints = 100;
function setup() {
createCanvas(300, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
frameRate(10);
}
function draw() {
background(198, 179, 220);
//Avocado
push();
translate(width * 0.6, height * 0.5);
rotate(radians(30));
cranoidCurve();
pop();
//Avocado face
face();
//Avocado pit
moon();
//Stars move with mouse
push();
translate(mouseX - 200, 30);
star();
pop();
push();
translate(100, mouseY + 80);
scale(0.5);
star();
pop();
}
function cranoidCurve() {
var x;
var y;
var r;
var a = 40;
var b = 60;
var c = 70;
var p = constrain((mouseX / width), 0, 1);
var q = constrain((mouseY / height), 0, 1);
stroke(77, 135, 2);
strokeWeight(10);
fill(195, 238, 139);
beginShape();
for(var i = 0; i < nPoints; i++) {
var t = map(i, 0, nPoints, 0, TWO_PI);
r = a * sin(t) +
b * sqrt(1 - p * sq(cos(t))) +
c * sqrt(1 - q * sq(cos(t)));
x = r * cos(t);
y = r * sin(t);
vertex(x, y);
}
endShape(CLOSE);
}
function face() {
noFill();
stroke(0);
strokeWeight(2);
arc(200, 190, 5, 5, radians(210), radians(30));
arc(220, 200, 5, 5, radians(210), radians(30));
arc(205, 210, 10, 10, radians(50), radians(190));
}
function moon() {
//Moon/Avocado pit gets bigger as x increases with mouse
var x = max(min(100 + mouseX, width), 10);
var sizeX = x * 3 / 10;
var r = 300 - mouseX;
var g = 300 - mouseX;
var b = 30;
noStroke();
fill(r, g, b);
circle(mouseX - 100, mouseY - 30, sizeX);
}
function star() {
fill(240, 255, 135);
frameRate(10);
var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
var nPoints = x.length;
beginShape();
//Squiggly star
for (var i = 0; i < nPoints; i++) {
vertex (x[i] + random(-3, 3), y[i] + random(-3, 3));
}
endShape(CLOSE);
}
While exploring different types of curves, I was inspired by the cranioid curve, which strongly resembles an avocado shape when interacted with.