390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 |
// Koordinaten in einem Array definiert var ar_koor = new Array( '105, 177, 105, 177, 105, 177', // erster Arraywert für moveTo() // muss um auf sechs kommaseparierte Einträge aufgefüllt werden // sonst wird in Zeile 487 und 488 Fehler erzeugt '121, 177, 120, 198, 121, 202', '122, 227, 124, 242, 127, 210', '130, 186, 135, 150, 129, 115', '124, 80, 114, 29, 106, 29', ' 98, 29, 86, 84, 82, 114', ' 78, 144, 67, 181, 80, 207', ' 82, 220, 85, 230, 87, 210', ' 89, 190, 89, 177, 105, 177' ) ; var koords = '' ; function FLAMEBG(){ clx.beginPath(); durchlauf = ar_koor.length -1 ; // Schleife für jede Arrayzeile for ( var z=0; z <= durchlauf; z++){ koords = MOVE_TO(ar_koor[z],z,durchlauf) ; if ( z == 0) clx.moveTo(koords['5'],koords['6']); clx.bezierCurveTo(koords['1'], koords['2'], koords['3'], koords['4'], koords['5'], koords['6']); } clx.closePath(); clx.shadowBlur= 30; clx.shadowColor="red"; clx.shadowOffsetY = -5; clx.fill(); clx.shadowBlur= 20; clx.shadowColor="darkred"; clx.shadowOffsetY = 25; clx.fill(); clx.shadowBlur= 10; clx.shadowColor="orange"; clx.shadowOffsetY = 5; clx.fill(); clx.shadowBlur= 10; clx.shadowColor="yellow"; clx.shadowOffsetY = 0; clx.fill(); var gradient = clx.createRadialGradient(110,140,20,110,130,110); gradient.addColorStop(0, "rgba(255,255,150,.8)"); gradient.addColorStop(0.35, "rgba(255,250,5,.9)") ; gradient.addColorStop(0.85, "rgba(255,150,0,1)") ; gradient.addColorStop(1, "rgba(205,55,0,1)"); clx.fillStyle = gradient; clx.fill(); clx.lineWidth = 0; clx.strokeStyle = 'rgba(255,255,255,.3)'; clx.stroke();
// Auskommentierte Eigenschaften bleiben unberücksichtigt, wie die nächsten zwei clx.shadowBlur= 20; clx.shadowColor="red"; clx.shadowOffsetY = 15; // clx.fill(); clx.shadowBlur= 10; clx.shadowColor="yellow"; clx.shadowOffsetY = 5; // clx.fill(); clx.shadowBlur= 15; clx.shadowColor="orange"; clx.shadowOffsetY = 10; clx.fill(); }
function FLAME(clx, ctx) { clx.save(); // ohne clearRect wird die Zeichenfläche für die Animation nicht gelöscht, clx.clearRect(0,0,220,290); // somit muss auch die unveränderliche Kerze immer wieder neu gezeichnet werden, // wird die Kerzenfunktion hier nicht eingebunden, wird sie nicht dargestellt. // einen anderen Layer oder Ebenenkonstrukt einrichten zu wollen, um das Löschen // nur auf clx zu beschränken, schlägt fehl. Auch ctx wird gelöscht. KERZE(ctx) ; FLAMEBG() ; clx.restore(); window.setTimeout(FLAME, 200, clx, ctx) ; } var out1, out2, out3, out4, out5, out6 ; FLAME(clx, ctx);
// MOVE_TO function MOVE_TO(string,lauf,zaehler){ rand = Math.round(Math.random()*100) ; if ( lauf > 0 && lauf < zaehler ) { // verschiedene Abweichungen randx = Math.round(Math.random())*2 ; randy = Math.round(Math.random())*-4 ; if ( (zaehler/lauf) == 2 ) randy = randy *-2 ; } else { randx = 0; randy = 0 ; } var punkte = string.split(',') ; bez_x1 = punkte[0]*1, bez_y1= punkte[1]*1, bez_x2= punkte[2]*1 ; bez_y2= punkte[3]*1, knot_x1= punkte[4]*1, knot_y1= punkte[5]*1 ; // noch stärkere Abweichungen if (ablauf > 100 ) ablauf = 1 ; if ( ablauf % 12 == 0 && lauf > 2 && lauf < 6 ) wind = wind + lauf ; else wind = 0 ; var output = new Array() ; if ( lauf == 0 || lauf == zaehler ) { if ( lauf == 0 ) ablauf++ ; bez_x1 = punkte[0]*1, bez_y1= punkte[1]*1, bez_x2= punkte[2]*1 ; bez_y2= punkte[3]*1, knot_x1= punkte[4]*1, knot_y1= punkte[5]*1 ; } else { // positive als auch negative Änderungen der Koordinaten- und Kontrollpunkte add = rand % 2 ? 1 : 0 ; if ( add ) { bez_x1 = bez_x1 + randx - (rand/10); bez_y1 = bez_y1 + randy ; bez_x2 = bez_x2 + randx + (rand/10); bez_y2 = bez_y2 + randy ; knot_x1 = knot_x1 + randx - (rand/20); knot_y1 = knot_y1 + randy ; out1 = bez_x1+wind ; out2 = bez_y1+(wind*2) ; out3 = bez_x2+(wind*2) ; out4 = bez_y2-wind ; out5 = knot_x1+wind ; out6 = knot_y1 ; } else { bez_x1 = bez_x1 - randx + (rand/10); bez_y1 = bez_y1 - randy ; bez_x2 = bez_x2 - randx - (rand/10); bez_y2 = bez_y2 - randy ; knot_x1 = knot_x1 - randx + (rand/20); knot_y1 = knot_y1 - randy ; out1 = bez_x1-wind ; out2 = bez_y1-(wind*2) ; out3 = bez_x2-(wind*1.5) ; out4 = bez_y2+wind ; out5 = knot_x1-wind ; out6 = knot_y1 ; } } output['1'] = Math.round(out1) ; output['2'] = Math.round(out2) ; output['3'] = Math.round(out3) ; output['4'] = Math.round(out4) ; output['5'] = Math.round(out5) ; output['6'] = Math.round(out6) ;
return output ; }
|