Implement Java Script in Processing doesn't work with Safari
in
Processing with Other Languages
•
2 years ago
Hello,
I searched the forum but couldn't find an answer.
Could you help me? I worte a script and in Firefox it works fine, but when I
use Safari it simple stops the script.
Here ist the code (I marked the code red where the function is wirtten and it is called):
Alex
I searched the forum but couldn't find an answer.
Could you help me? I worte a script and in Firefox it works fine, but when I
use Safari it simple stops the script.
Here ist the code (I marked the code red where the function is wirtten and it is called):
- <!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>aktuelles Projekt / ongoing project: Faust</title>
<meta http-equiv="Content-Language" content="de">
<meta name="description" content="Alexander Bauer, Lisa Schwalb, Jasmin Jerat, Alma Wellner Bou, Chris Herzog, Ferdinand Klüsener">
<meta name="keywords" content="generative, interactive, alexander bauer, alex bauer, jasmin jerat, lisa schwalb, chris herzog, ferdinand klüsener, alma wellner bou, performance, kunst, theater, art, theatre, faust, projekt faust, alaska, butti, feuerland">
<!-- Meta Tags Created With: STW Meta Tag Builder http://www.scrubtheweb.com/abs/ -->
<link rel="stylesheet" href="index_auto-Dateien/index.css">
<script src="index_auto-Dateien/processing.js"></script>
<script type="text/javascript">/*
* This code searches for all the <script type="application/processing" target="canvasid">
* in your page and loads each script in the target canvas with the proper id.
* It is useful to smooth the process of adding Processing code in your page and starting
* the Processing.js engine.
*/
if (window.addEventListener) {
window.addEventListener("load", function() {
var scripts = document.getElementsByTagName("script");
var canvasArray = Array.prototype.slice.call(document.getElementsByTagName("canvas"));
var canvas;
for (var i = 0, j = 0; i < scripts.length; i++) {
if (scripts[i].type == "application/processing") {
var src = scripts[i].getAttribute("target");
if (src && src.indexOf("#") > -1) {
canvas = document.getElementById(src.substr(src.indexOf("#") + 1));
if (canvas) {
new Processing(canvas, scripts[i].text);
for (var k = 0; k< canvasArray.length; k++)
{
if (canvasArray[k] === canvas) {
// remove the canvas from the array so we dont override it in the else
canvasArray.splice(k,1);
}
}
}
} else {
if (canvasArray.length >= j) {
new Processing(canvasArray[j], scripts[i].text);
}
j++;
}
}
}
}, false);
}
function popitup2(Titel,Inhalt) {
newwindow2=window.open('',Titel,'height=500,width=550, scrollbars=yes');
var tmp = newwindow2.document;
//tmp.document.open("text/html","replace")
tmp.write('<html><head><title>'+Titel+'</title>'
+'<link rel="stylesheet" href="index_auto-Dateien/index.css">'
+'<div class="popup">'
+'</head><body><p><font size="3"><a href="javascript:self.close()">close</a></font></p>'
+'<p><font size="5">'+Titel+'</font></p>'
+'<p><font size="3">'+Inhalt+'</font></p>'
+'</div>'
+'</body></html>');
tmp.close();
//tmp.submit();
}
function rdm(){
var rndm = this.document;
var ranNum=Math.floor(Math.random()*7);
//rndm.write('');
rndm.write('<img src="index_auto-Dateien/project/Title_'+ranNum+'.png" usemap="#Map" alt="ongoing project" title="ongoing project: Faust" border="0">');
rndm.close();
}
</script>
<link rel="stylesheet" href="index_auto-Dateien/style.html">
</head><body>
<div class="main">
<div class="title"><img src="data/Logo-faust.png" alt="Logo" width="157" height="89" border="0" title="Logo Faust"><script type="text/javascript">rdm();</script></div>
<div class="menu">
<div style="float: left;"><img src="index_auto-Dateien/about2.gif" alt="" border="0" usemap="#menumap">
<map name="menumap">
<area shape="rect" coords="0,0,153,15" href="http://projektfaust.de/about.html">
<area shape="rect" coords="188,0,298,15" href="http://projektfaust.de/alex.html">
<area shape="rect" coords="305,0,420,15" href="http://projektfaust.de/alma.html">
<area shape="rect" coords="429,0,519,15" href="http://projektfaust.de/chris.html">
<area shape="rect" coords="523,0,652,15" href="http://projektfaust.de/ferdi.html">
<area shape="rect" coords="659,0,746,15" href="http://projektfaust.de/jasmin.html">
<area shape="rect" coords="753,0,839,15" href="http://projektfaust.de/lisa.html">
<area shape="rect" coords="886,0,1024,15" href="http://projektfaust.de/kontakt.html">
</map>
</div>
</div>
<div style="clear: both; height: 1px; font-size: 1px;"> </div>
<canvas style="image-rendering: optimizequality ! important;" moz-opaque="" width="1024" height="600" id="processing"></canvas>
<div class="footer"><a href="http://processingjs.org/"><img src="index_auto-Dateien/built_with_processingjs.gif" border="0"></a></div>
</div>
<script type="application/processing">
PFont font;
boolean inatr=false;
float xl,yl,xll,yll,px,py,m,mm,gravity,anzieh,px55,py55;
float gravitylast;
float lastRelease=-1,age;
XMLElement xml;
int fausts=0,welcherdrag;
Planet[] planets;
int[] id=new int[99],subs=new int[99];
String[] ort=new String[99], von=new String[99], to=new String[99],body=new String[99],name=new String[99],faust=new String[99];
boolean inat=false,dreieck=false,kurser=false,protection=false;
color coleur;
void setup() {
frameRate(15);
size(1024,700);
background(255,255,255);
font =loadFont ("Verdana");
textFont (font,9);
xml = new XMLElement(this, "faust.xml");
fausts = xml.getChildCount();
for (int i = 0; i < fausts; i++) {
XMLElement kid = xml.getChild(i);
id[i] = kid.getIntAttribute("id");
subs[i] = kid.getIntAttribute("subs");
ort[i] = kid.getStringAttribute("ort");
von[i] = kid.getStringAttribute("von");
to[i] = kid.getStringAttribute("to");
name[i] = kid.getStringAttribute("name");
body[i] = kid.getStringAttribute("body");
faust[i] = kid.getContent();
}
planets = new Planet[fausts];
}
void draw() {
background(255,255,255);
if(inat==true) {
/*line(px-2,py-2,px+2,py+2);
line(px+2,py-2,px-2,py+2);*/
// Drawing the Sun
pushMatrix(); //Speichert vor dem Mittelpunkt
translate(px,py); //Setzt den Mittelpunkt
for (int i = 0; i < planets.length; i++ ) {
MyContainer foo= planets[i].update();
if(foo.kurser) {
if(foo.dragging2){
cursor(MOVE);
}
else{
cursor(HAND);
welcherdrag=i;
}
}
else {
if(welcherdrag==i){
cursor(ARROW);
}
}
planets[i].display();
for (int u=0; u<planets.length;u++) {
MyContainer fu= planets[u].xuy();
if(fu.b.equals("hypochondrisch")) {
anzieh = 200;
coleur=fu.f;
}
if(fu.b.equals("paranoisch")) {
anzieh = 170;
coleur=lerpColor(foo.f,foo.f,0.7);
}
if(fu.b.equals("schizo")) {
anzieh = 30;
coleur=lerpColor(foo.f,foo.f,0.3);
}
if(fu.b.equals("masochistisch")) {
anzieh = 100;
coleur=lerpColor(foo.f,foo.f,0.5);
}
if(fu.b.equals("drogensüchtig")) {
anzieh =0;
coleur=foo.f;
}
if(dist(foo.xa,foo.ya,fu.xa,fu.ya) < anzieh) {
//strokeWeight(1);
stroke(coleur,100);
line(foo.xa,foo.ya,fu.xa,fu.ya);
}
}
}
popMatrix(); //Gibt nach dem Mittelpukt aus
}
else {
stroke(#9E0E40,60);
ellipse(mouseX,mouseY,500,500);
}
}
void mousePressed() {
if(!inatr) {
px=mouseX;
py=mouseY;
/*line(px-2,py-2,px+2,py+2);
line(px+2,py-2,px-2,py+2);*/
m = millis();
}
}
void mouseReleased() {
if(!inatr) {
mm=millis();
gravity=(mm-m);
inat=true;
for (int i = 0; i < planets.length; i++ ) {
planets[i] = new Planet(i,px,py,name[i],body[i],subs[i],faust[i],ort[i], 20 + i*10,i + 6,gravity,color(random(255),random(255),random(255)));
}
}
inatr=true;
}
class Planet {
// Each planet object keeps track of its own angle of rotation.
float theta; // Rotation around sun
float diameter; // Size of planet
float distance; // Distance from sun
float orbitspeed,orbitabnahm; // Orbit speed
float distancea,geschi=0;
float groessev=0;
float a,alpha1=0,alpha2=0,alpha11=0;
float gravity, thetam=0,distanceam=0,xa,ya,px,py;
/*float[] r= new float[9000];
float[] alph= new float[9000];*/
int [] xlon=new int[9000];
int [] ylon=new int[9000];
float jupl=0;
int i = 0, subs=0, subsan=0,limit1=350,Nummer;
int limit2 =round(limit1/1.75);
String faust,ort,name,body;
color strokec;
int io=50;
PFont font;
// Selected mode switch
int sel = 0;
// Set drag switch to false
boolean dragging=false,dragging2=false,once=true;
// If user releases mouse...
MyContainer mouseReleased() {
// ..user is no-longer dragging
dragging=false;
return new MyContainer(xa,ya,Nummer,body,strokec,kurser,dragging2);
}
Planet(int Nummer_, float px_, float py_,String name_, String body_, int subs_, String faust_,String ort_, float distance_, float diameter_, float gravity_, color strokec_) {
subs = subs_;
alpha11=TWO_PI/subs;
distance = distance_;
diameter = 3;
theta = 0;
gravity=gravity_;
strokec=strokec_;
faust=faust_;
ort=ort_;
px=px_;
py=py_;
name=name_;
body=body_;
Nummer=Nummer_;
orbitspeed = random(0.03,0.06);
orbitabnahm=orbitspeed/(limit1-limit2);
a=distance/gravity;
}
MyContainer update() {
// Increment the angle to rotate
String namepro;
//aktuelle Position
xa = distancea*cos(theta); //Ausrechnen wo sich der Mittelpunkt des aktuellen Planeten befindet
ya = distancea*sin(theta); //-"-
// println(xa);
if(i<limit2) {
theta += orbitspeed; //Abnahme der Geschwindigkeit
distancea+=a;
xlon[i]=distancea*cos(theta);
ylon[i]=distancea*sin(theta);
//Aktuelle Position
for (int y = 1; y < i; y+=1) {
int j=y-1;
stroke(strokec,40);
line(xlon[j], ylon[j], xlon[y], ylon[y]);
}
}
else {
if(i>limit2&&i<limit1) {
orbitspeed-=orbitabnahm;
theta += orbitspeed;
distancea+=a;
xlon[i]=distancea*cos(theta);
ylon[i]=distancea*sin(theta);
/*r[i]=distancea;
alph[i]=theta;*/
fill(strokec,40);
text(name+" in "+ort+" - hat "+subs+" Kapitel und ist "+body, xa+4, ya);
}
for (int y = 1; y < i; y+=1) { //Krass das er da durch die ganze Schleife durch muss. Ändern!!!!!!!!!! Frisst performance
int j=y-1;
stroke(strokec,40);
line(xlon[j], ylon[j], xlon[y], ylon[y]);
}
if(i>limit1) {
if(!dragging) {
xa=xa+random(-1,1);
ya=ya+random(-1,1);
distancea=sqrt((xa*xa) + (ya*ya));
theta = atan2(ya,xa);
xlon[i]=distancea*cos(theta);
ylon[i]=distancea*sin(theta);
}
//Draw Subs
for (int yy = 0; yy < subs; yy+=1) {
if(yy!=0) {
alpha1 += alpha11;
alpha2=alpha1+alpha11;
}
else {
alpha1=0;
alpha2=alpha1+alpha11;
}
float gesch= floor((8+log(1/(i-limit1)))*1000);
gesch=(gesch/100000)/5;
if(gesch>0) {
geschi=geschi+gesch;
}
//Die Koordinaten für den Vertex ausrechnen
float x22=geschi*cos(alpha1);
float y22=geschi*sin(alpha1);
float x11 = xa;
float y11 = ya;
x22 = xa+x22;
y22 = ya+y22;
float x33=geschi*cos(alpha2);
float y33=geschi*sin(alpha2);
x33=xa+x33;
y33=ya+y33;
//smooth();
if( dist(x11,y11,mouseX-px,mouseY-py) < geschi ) {
kurser=true;
groessev=geschi;
String z =faust;
String yy1="sub="+str(yy+1)+":" ";
String[] list = new String[99];
String[] liste= new String[99];
String list1=join(split(z,yy1)," ");
//println(list1);
// String list1=join(list," ");
list=split(list1,'"=sub');
for (int i = 0; i < list.length; i++ ) {
String[] list11 = new String[99];
list11=split(list[yy],"ue=");
list1=join(list11," ");
list11=split(list1," text=");
list[i]=list11[0];
liste[i]=list11[1];
}
fill(strokec,100);
if(dragging) {
text(name+" in "+ort+" - hat "+subs+" Kapitel und ist "+body, xa+4, ya+(geschi+15));
}
else
{
text(name+" in "+ort+" - hat "+subs+" Kapitel und ist "+body, xa+4, ya);
}
pushMatrix();
//translate((xa+px),(ya+py));
float alphi = atan2(mouseY-(ya+py),mouseX-(xa+px));
if(alphi<0) {
alphi=alphi+TWO_PI;
}
if((alphi>alpha1)&&(alphi<alpha2)) {
dreieck=true;
}
else {
dreieck=false;
}
popMatrix();
if(dragging) {
float alpha22=alpha1+(alpha11/2);
float x44 = (geschi+40)*cos(alpha22);
float y44 = (geschi+40)*sin(alpha22);
float x55 = (geschi-(geschi/2))*cos(alpha22);
float y55 = (geschi-(geschi/2))*sin(alpha22);
x44=xa+x44;
y44=ya+y44;
x55=xa+x55;
y55=ya+y55;
if( dist(x55,y55,mouseX-px,mouseY-py) < (geschi/4) ) {
fill(strokec,200);
stroke(strokec,200);
protection=true;
px55=x55;
py55=y55;
namepro=list[yy];
}else{
noFill();
stroke(strokec,50);
}
if( dist(px55,py55,mouseX-px,mouseY-py) > (geschi/4) ){
protection=false;
namepro="null";
}
ellipse(x55, y55, (geschi/4), (geschi/4));
text(list[yy], x44, y44);
line(x44-4,y44-10,x55,y55);
line(x44-4,y44-10,x44-4,y44+5);
line(x44-4,y44+5,x44+15,y44+5);
//popMatrix();
}
fill(strokec,100);
beginShape(TRIANGLE_FAN);
vertex(x11, y11);
vertex(x22, y22);
vertex(x33, y33);
//Für online Version?
line(x11,y11,x33,y33);
endShape();
if (mousePressed == true) {
dragging=true;
if(once) {
geschi=geschi*7;
}
once=false;
}
// Remember user has circle "selected"
sel=1;
if(dragging) {
if(mousePressed==true) {
dragging2=true;
}
else {
dragging2=false;
}
}
// If user has mouse down and is moving...
if(dragging2) {
if(protection){
if(namepro==list[yy]){
//Creat popup via javascript doesn't work for safari
popitup2(list[yy],liste[yy]);
}
}
if(!protection){
// Move circle to circle position
xa=mouseX-px;
ya=mouseY-py;
distancea=sqrt((xa*xa) + (ya*ya));
theta = atan2(ya,xa);
xlon[i]=distancea*cos(theta);
ylon[i]=distancea*sin(theta);
/*r[i]=distancea;
alph[i]=theta;*/
}
}
}
else {
kurser=false;
if(dist(x11,y11,mouseX-px,mouseY-py) > geschi) {
dragging=false;
//cursor(ARROW);
if(!once) {
geschi=geschi/7;
}
once=true;
}
fill(strokec,40);
text(name+" in "+ort+" - hat "+subs+" Kapitel und ist "+body, xa+4, ya);
noStroke();
beginShape(TRIANGLE_FAN);
vertex(x11, y11);
vertex(x22, y22);
vertex(x33, y33);
endShape();
sel=0;
}
}
alpha1=0;
}
//smooth();
}
i=i+1;
return new MyContainer(xa,ya,Nummer,body,strokec,kurser,dragging2);
}
MyContainer xuy() {
return new MyContainer(xa,ya,Nummer,body,strokec,kurser,dragging2);
}
void display() {
// Before rotation and translation, the state of the matrix is saved with pushMatrix().
pushMatrix();
// Rotate orbit
rotate(theta);
// translate out distance
translate(distancea,0);
stroke(0);
fill(0);
ellipse(0,0,diameter,diameter);
// Once the planet is drawn, the matrix is restored with popMatrix() so that the next planet is not affected.
popMatrix();
}
}
class MyContainer {
float xa;
float ya;
int i;
String b;
color f;
boolean kurser, dragging2;
MyContainer(float xa, float ya, int i, String b,color f, boolean kurser, boolean dragging2) {
this.xa = xa;
this.ya = ya;
this.i=i;
this.b=b;
this.f=f;
this.kurser=kurser;
this.dragging2=dragging2;
}
}
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape(""));
</script><script src="index_auto-Dateien/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-221130-4");
pageTracker._initData();
pageTracker._trackPageview();
</script></body></html>
Alex
1