🎨 Welche Farbe hat …?
(function(){
const canvas=document.getElementById("aquarellCanvas");
const ctx=canvas.getContext("2d");
let aktuelleFarbe="#e63946";
let pinselGroesse=35;
let malen=false;
let wasserModus=false;
let wasserGroesse=120;
let tropfen=[];
// Farben auswählen
document.querySelectorAll(".aquarell-farbe").forEach(f=>{
f.onclick=()=>{
aktuelleFarbe=f.dataset.color;
wasserModus=false;
};
});
// Pinselgrößen
document.getElementById("duenner-pinsel").onclick=()=>{
wasserModus=false;
pinselGroesse=12;
};
document.getElementById("mittlerer-pinsel").onclick=()=>{
wasserModus=false;
pinselGroesse=35;
};
document.getElementById("dicker-pinsel").onclick=()=>{
wasserModus=false;
pinselGroesse=70;
};
document.getElementById("wasser-pinsel").onclick=()=>{
wasserModus=true;
};
function position(e){
let r=canvas.getBoundingClientRect();
return {
x:(e.clientX-r.left)*(canvas.width/r.width),
y:(e.clientY-r.top)*(canvas.height/r.height)
};
}
canvas.addEventListener("pointerdown",e=>{
malen=true;
zeichnen(e);
});
canvas.addEventListener("pointermove",e=>{
if(malen){
zeichnen(e);
}
});
window.addEventListener("pointerup",()=>{
malen=false;
});
function zeichnen(e){
if(wasserModus){
wasserVerwischen(e);
}else{
neuerTropfen(e);
}
}
function neuerTropfen(e){
let p=position(e);
tropfen.push({
x:p.x,
y:p.y,
farbe:aktuelleFarbe,
radius:pinselGroesse,
leben:80
});
}
// Aquarell-Tropfen Animation
function animation(){
for(let i=tropfen.length-1;i>=0;i--){
let t=tropfen[i];
maleAquarell(t);
if(!t.wasser){
t.radius+=0.25;
}
t.leben--;
if(t.leben<=0){ tropfen.splice(i,1); } } requestAnimationFrame(animation); } animation(); function maleAquarell(t){ ctx.save(); if(t.farbe=="#ffffff"){ ctx.globalCompositeOperation="source-over"; }else{ ctx.globalCompositeOperation="multiply"; } // weiche Farbfläche for(let i=0;i<60;i++){ let winkel=Math.random()*Math.PI*2; let abstand=Math.random()*t.radius; let x=t.x+ Math.cos(winkel)*abstand; let y=t.y+ Math.sin(winkel)*abstand; ctx.beginPath(); ctx.arc( x, y, Math.random()*t.radius*.45+2, 0, Math.PI*2 ); ctx.fillStyle=farbeMitTransparenz( t.farbe, 0.035 ); ctx.fill(); } // ✨ Glitzer für Gold und Silber if(t.farbe=="#D4AF37" || t.farbe=="#C0C0C0"){ for(let i=0;i<35;i++){ let x=t.x + (Math.random()-0.5)*t.radius*2; let y=t.y + (Math.random()-0.5)*t.radius*2; ctx.beginPath(); ctx.arc( x, y, Math.random()*2+0.5, 0, Math.PI*2 ); ctx.fillStyle="rgba(255,255,255,0.8)"; ctx.fill(); } } // Aquarellrand / Blüteffekt for(let i=0;i<20;i++){ let winkel=Math.random()*Math.PI*2; let rand=t.radius+ Math.random()*18; ctx.beginPath(); ctx.arc( t.x+Math.cos(winkel)*rand, t.y+Math.sin(winkel)*rand, Math.random()*3+1, 0, Math.PI*2 ); ctx.fillStyle=farbeMitTransparenz( t.farbe, 0.06 ); ctx.fill(); } ctx.restore(); } function farbeMitTransparenz(hex,a){ let r=parseInt(hex.substring(1,3),16); let g=parseInt(hex.substring(3,5),16); let b=parseInt(hex.substring(5,7),16); return `rgba(${r},${g},${b},${a})`; } // 💧 Wasserpinsel function wasserVerwischen(e){ let p=position(e); let wasserTropfen={ x:p.x, y:p.y, farbe:aktuelleFarbe, radius:wasserGroesse, leben:70, wasser:true }; // gleiche Aquarellstruktur, // aber extrem transparent ctx.save(); ctx.globalAlpha=0.2; maleAquarell(wasserTropfen); ctx.restore(); } document.getElementById("aquarell-loeschen").onclick=()=>{
ctx.clearRect(
0,
0,
canvas.width,
canvas.height
);
tropfen=[];
};
// Speichern
document.getElementById("aquarell-speichern").onclick=()=>{
let link=document.createElement("a");
link.download="aquarell.png";
link.href=canvas.toDataURL("image/png");
link.click();
};
// Ende Script
})();
