- Katılım
- 21 Mart 2017
- Mesajlar
- 70
- Elmaslar
- 4
- Puanlar
- 0
- Yaş
- 22
Kod bu:
Bu kodda şu ortaya çıkıyor ve sese göre hareket ediyor
Kodu ben yazmadıgım için ve javascript den anlamadıgım için (sıfırdan yazacak kadar) kendi yöntemim ile yapmaya çalıştıgımda kod bozuluyodu 4-5 kere farklı şekilde denedim yapamadım şimdi size soruyorum
Ortadaki zımbırtıları beş adet yapabilirmisiniz? konumlarını ben ayarlarım :)[DOUBLEPOST=1495312594,1495312559][/DOUBLEPOST]resim server tarafından işlenememiş daha az bir alanı kapsıyarak tekrar çekiyorum
Kod:
var smoothA = [];
var smoothB = [];
var smoothC = [];
var barSmooth = [];
var audioSample = [];
var particles = {};
var particleIndex = 0;
var particleNum = 2;
var bgImg = new Image();
var barColor = '#000';
var circleColor = '#000';
var particleColor = '#000';
var barSize = 1;
for (var i = 0; i < 128; i++) {
smoothA[i] = 0;
smoothB[i] = 0;
smoothC[i] = 0;
barSmooth[i] = 0;
audioSample[i] = 0;
}
window.wallpaperPropertyListener = {
applyUserProperties: function (properties) {
if(properties.theme){
if(properties.theme.value === 1){
barColor = '#fff';
circleColor = '#fff';
particleColor = '#fff';
barSize = 1;
bgImg.src = "space.jpg";
}
if (properties.theme.value === 0){
barColor = '#000';
circleColor = '#000';
particleColor = '#000';
barSize = 1;
bgImg.src = 'file:///';
}
}
if (properties.customimage) {
bgImg.src = 'file:///' + properties.customimage.value;
}
if (properties.barcolor) {
var a = properties.barcolor.value.split(' ');
a = a.map(function (c) {
return Math.ceil(c * 255);
});
barColor = 'rgb(' + a.join() + ')';
}
if (properties.circlecolor) {
var a = properties.circlecolor.value.split(' ');
a = a.map(function (c) {
return Math.ceil(c * 255);
});
circleColor = 'rgb(' + a.join() + ')';
}
if (properties.particlecolor) {
var a = properties.particlecolor.value.split(' ');
a = a.map(function (c) {
return Math.ceil(c * 255);
});
particleColor = 'rgb(' + a.join() + ')';
}
if (properties.barsize){
barSize = properties.barsize.value;
}
}
};
function wallpaperAudioListener(audioArray) {
for(var i = 0; i < 64;i++){
smoothA[i] = smoothB[i];
smoothB[i] = smoothC[i];
if(audioArray[i]>1){
audioArray[i] = 1;
}
smoothC[i] = audioArray[i];
barSmooth[i] = (smoothA[i] + smoothB[i] + smoothC[i]) / 3;
barSmooth[64+i]= barSmooth[i];
}
audioSample = barSmooth;
}
function run(){
window.requestAnimationFrame(run);
var x = canvas.width/2;
var y = canvas.height/2;
var r = 0;
var radian= 0;
var num = 0;
var i = 0;
var avg = (audioSample[0] + audioSample[1] + audioSample[2]) * 10 + 1;
var maxHeight = 500;
var minHeight = 100 + avg;
var radius = 86 + avg;
ctx.clearRect(0, 0, canvas.height, canvas.width);
if (bgImg.src != 'file:///null' && bgImg.src != 'file:///' && bgImg.src !=
'file:///undefined') {
ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
}
else{
ctx.beginPath();
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
ctx.fill();
}
for(var degree = 45; degree < 405; degree = degree + 2.8125){
var radian = degree * Math.PI/180;
var minRX= minHeight * Math.cos(radian);
var minRY= minHeight * Math.sin(radian);
var maxRX = maxHeight * Math.cos(radian);
var maxRY = maxHeight * Math.sin(radian);
var barSampleX = maxRX * audioSample[i];
var barSampleY = maxRY * audioSample[i];
ctx.beginPath();
ctx.moveTo(x + minRX, y + minRY);
ctx.lineTo(x + minRX + barSampleX, y + minRY + barSampleY);
ctx.strokeStyle = barColor;
ctx.lineWidth = barSize;
ctx.stroke();
i++;
}
Particle.prototype.draw = function(){
this.x += this.vx;
this.y += this.vy;
this.life++;
if(this.life >= this.maxLife){
delete particles[this.id];
}
ctx.beginPath();
ctx.arc(this.x , this.y, this.radius, 0, 2 * Math.PI);
ctx.fillStyle = particleColor;
ctx.fill();
this.radius = this.radius * 1.0019;
if(((audioSample[0] + audioSample[1] + audioSample[2] + audioSample[3] +
audioSample[4])) > 0.60){
this.vx = this.vx * 1.111;
this.vy = this.vy * 1.111;
this.life = this.life + 4;
}else if(((audioSample[29] + audioSample[30] + audioSample[31] +
audioSample[32] + audioSample[33]) ) > 0.5){
this.vx = this.vx * 1.0177;
this.vy = this.vy * 1.0177;
this.life = this.life + 2;
}else{
this.vx = this.vx * 1.0059;
this.vy = this.vy * 1.0059;
}
}
function Particle(){
this.y = Math.random() * canvas.height;
this.x = Math.random() * canvas.width;
this.radius = Math.random() * 2;
this.vx = 0;
this.vy = 0;
this.radians = Math.atan((canvas.height/2-this.y)/(canvas.width/2-this.x));
this.vx = 1.5 * Math.cos(this.radians);
this.vy = 1.5 * Math.sin(this.radians);
if(this.x < canvas.width/2){
this.vx = -this.vx;
this.vy = -this.vy;
}
particleIndex++;
particles[particleIndex] = this;
this.id = particleIndex;
this.life = 0;
this.maxLife = 300;
}
for (var i = 0; i < particleNum; i++){
new Particle();
}
for (var i in particles){
particles[i].draw();
}
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = circleColor;
ctx.fill();
}
window.onload = function(){
canvas = document.querySelector("[HASHTAG]#canvas[/HASHTAG]");
ctx = canvas.getContext("2d");
canvas.width = canvas.scrollWidth;
canvas.height = canvas.scrollHeight;
window.wallpaperRegisterAudioListener(wallpaperAudioListener);
window.requestAnimationFrame(run);
}
window.onresize = function() {
location.reload();
}[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]Bu kodda şu ortaya çıkıyor ve sese göre hareket ediyor
Kodu ben yazmadıgım için ve javascript den anlamadıgım için (sıfırdan yazacak kadar) kendi yöntemim ile yapmaya çalıştıgımda kod bozuluyodu 4-5 kere farklı şekilde denedim yapamadım şimdi size soruyorum
Ortadaki zımbırtıları beş adet yapabilirmisiniz? konumlarını ben ayarlarım :)[DOUBLEPOST=1495312594,1495312559][/DOUBLEPOST]resim server tarafından işlenememiş daha az bir alanı kapsıyarak tekrar çekiyorum
