Sketch1: Models of sexual reproduction of organisms
Link:https://editor.p5js.org/N-A-E-S/sketches/nweZqmRem
In Sketch 1 I explored a very basic part of living creatures: reproduction. In the simulation presentation, male creatures are marked as green circles with a name randomly picked, with the existing lifetime of individual creatures increasing, the color would go blue. A single male creature could live for 600 frames. When the male organism grows mature enough (more than 200 frames), it will search for unpregnant female organisms within 200 distance. If there is no qualified object in the corresponding range, it will swim randomly.
When a pair of creatures mate, the male swims towards his mate and mates. After a while the male leaves. The female then carries offspring after a short period of gestation. There is an 80% chance that breeding will produce male offspring and a 20% chance that it will produce female offspring. To mark the parent, male offspring inherits the first two characters of his name from his mother and female offspring inherits the first character of her name from her father.
I decided to develop this sketch into my project A because the sketch studied multiple creatures that interacted with each other. Also, this sketch could be self-developed into a self-sustained system.
Coding:
function setup() {
createCanvas(600, 600);
background(225)
}
class male_c{ //male creature
constructor(name,x,y){
this.name=name
this.x=x
this.y=y
this.lifetime=0
this.size=50
this.r=0
this.g=220
this.b=0
this.mate=null
this.xspeed=random(-2,2)
this.yspeed=random(-2,2)
this.moveTimeCount=0
this.mateTime=0
}
show(){
noStroke()
fill(this.r,this.g,this.b)
ellipse(this.x,this.y,this.size,this.size)
fill(0)
text(this.name,this.x-15,this.y)
}
move(){
if(this.mateTime>30){
this.mate=null
this.mateTime=0
this.xspeed=random(-2,2)
this.yspeed=random(-2,2)}
if(this.mate!=null)
this.mateTime+=1
if(this.mate==null){
this.moveTimeCount+=1
if(this.moveTimeCount>=50)
{
this.xspeed=random(-2,2)
this.yspeed=random(-2,2)
this.moveTimeCount=0
}
}
else{
if(dist(this.x,this.y,this.mate.x,this.mate.y)>=50){
this.xspeed=map(this.mate.x-this.x,300,-300,20,-20)
this.yspeed=map(this.mate.y-this.y,300,-300,20,-20)
}
else{
this.xspeed=0
this.yspeed=0
}
}
if(this.x>0 && this.y>0 && this.x<600 && this.y<600){ this.x+=this.xspeed this.y+=this.yspeed } } propose(fl){ this.mate=fl fl.pergnant=true } } class female_c{ //female creature constructor(name,x,y){ this.name=name this.x=x this.y=y this.lifetime=0 this.size=50 this.r=220 this.g=0 this.b=0 this.pergnant=false this.pergnant_break=0 } show(){ noStroke() fill(this.r,this.g,this.b) rect(this.x,this.y,this.size,this.size) fill(0) text(this.name,this.x+5,this.y+25) } birth(){ var gender=random(-1,1) if(gender>-0.5){
this.new_name=this.name[0]+this.name[1]
this.new_name+=alphabet[int(random(0,52))]
mc.push(new male_c(this.new_name,this.x+random(10,30),this.y+random(10,30)))
}
else{
this.new_name=this.name[0]
this.new_name+=alphabet[int(random(0,52))]
this.new_name+=alphabet[int(random(0,52))]
fc.push(new female_c(this.new_name,this.x+(0.5+random(-1,1))*50*random(1,1.5),this.y+(0.5+random(-1,1))*50*random(1,1.5)))
}
this.pergnant=false
}
}
var alphabet=new Array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z')//alphabet for name generate
var mc=new Array()
var fc=new Array()
function keyPressed(){
if(key=='m')//male product
{
name=''
wc=int(random(2,5))
for(i=0;i<wc;i++)
{
w=int(random(1,52))
name+=alphabet[w]
}
new_male=new male_c(name,mouseX,mouseY)
mc.push(new_male)
console.log(new_male.name)
}
if(key=='f')
{
name=''
wc=int(random(2,5))
for(i=0;i<wc;i++)
{
w=int(random(1,52))
name+=alphabet[w]
}
new_female=new female_c(name,mouseX,mouseY)
fc.push(new_female)
console.log(new_female.name)
}
if(key=='c'){
mc=new Array()
fc=new Array()
}
}
function draw() {
background(255)
for(i=0;i<mc.length;i++){ mc[i].b+=0.5 mc[i].show() mc[i].move() if(mc[i].mate==null && mc[i].lifetime>200){
for(j=0;j<fc.length;j++){
if(dist(mc[i].x,mc[i].y,fc[j].x,fc[j].y)<=200 && fc[j].pergnant==false) mc[i].propose(fc[j]) } } if(mc[i].mate!=null){ line(mc[i].x,mc[i].y,mc[i].mate.x,mc[i].mate.y) } mc[i].lifetime+=1 mc[i].size50=map(mc[i].lifetime,0,500,50,100) if(mc[i].lifetime>=600)
mc.splice(i,1)
}
for(i=0;i<fc.length;i++){ fc[i].b+=0.5 fc[i].show() fc[i].lifetime+=1 if(fc[i].pergnant==true) fc[i].pergnant_break+=1 if(fc[i].pergnant_break>200 && fc[i].pergnant==true)
{
fc[i].pergnant_break=0
fc[i].pergnant=false
fc[i].birth()
}
console.log(fc[i].pergnant_break,fc[i].pergnant)
fc[i].size50=map(fc[i].lifetime,0,500,50,100)
if(fc[i].lifetime>=2000)
fc.splice(i,1)
}
}
Sketch2: Feed the loading ring
Link:https://editor.p5js.org/N-A-E-S/sketches/0Iwsggodt
This sketch focuses on exploring the feeding and hunting of food. The loading ring simulated a snake-shaped creature. The HP stands for the health standard of the creature, which will decrease over time. A higher HP point means a larger size of the creature and a faster spinning speed. Pressing the mouse will deploy food in the mouse position. The creature will adjust its radius to eat the food.
coding:function setup() {
createCanvas(400, 400);
}
var t=0
var hp=100
var r=50
var rp=50
class food{
constructor(hp,x,y){
this.x=x
this.y=y}
}
f=new food(0,200,200)
function draw() {
if(mouseIsPressed){
f.x=mouseX
f.y=mouseY
f.hp=random(10,15)
rp=dist(f.x,f.y,200,200)
}
t+=0.05*hp*0.01
if(hp>0)
hp-=0.05
background(0,20);
if(r<rp)
r+=1
if(r>rp)
r-=1
console.log(r,rp)
noStroke()
sv=r*sin(t)
cv=r*cos(t)
x=200+sv
y=200+cv
fill(255)
text('hp:'+hp,10,10,200,200)
circle(x,y,hp*0.25)
if(abs(f.x-x)<5 && abs(f.y-y)<5)
{
hp+=f.hp
f.hp=0
}
if(f.hp>1)
fill(255)
else
fill(0)
circle(f.x,f.y,10)
}
Sketch3: mountain drawing with Perlin Noise
Link:https://editor.p5js.org/N-A-E-S/sketches/MYnB4NKQM
In this sketch, I use two Perlin Noise functions to draw a multi-dimensional mountain. The color and altitude both decrease. With the Perlin Noise function, we could get the different mountain shapes.
Coding:
function setup() {
createCanvas(400, 400);
background(0);
stroke(100)
}
var x=1
var xspeed=2
var c1=100
var c2=50
var layers=0
function draw() {
let freq = frameCount * 0.02;
let amp = 250-0.05*layers;
let amp2=250-0.05*layers
x+=xspeed
if(x>400 || x<=0){
xspeed=-xspeed
layers+=50
c2=c1
c1+=50
}
let noiseValue = noise(freq) * amp; // noise
let noiseValue2= noise(freq)*amp2
let yNoise=50+noiseValue+layers
let yNoise2=100+noiseValue2+layers
noStroke()
ellipse(x, yNoise, 5, 5);
ellipse(x, yNoise2, 5, 5);
fill(c2)
rect(x,yNoise2,2,400-yNoise2)
fill(c1)
rect(x,yNoise,2,yNoise2-yNoise)
}