Javascript kill flash?

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από Basilakis » 03 Μαρ 2010 23:02

take a look

http://www.andrew-hoyer.com/exp_src/cloth.html

πως σας φαίνεται αυτή η ομορφιά;

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από dva_dev » 03 Μαρ 2010 23:12

Σε ΙΕ δεν παίζει, σε chrome δεν παίζει σωστά, σε firefox και safari είναι 1+1 για να κάψεις τη cpu, παντού αν έχεις απενεργοποιημένη τη javascript δεν λέει πουθενά ότι χρειάζεται javascript για να παίξει, και τέλος ακόμα ψάχνω να βρώ την ομορφιά.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από Basilakis » 03 Μαρ 2010 23:22

άνοιξε τα μάτια σου τότε...

Φυσικά και έκανα πλάκα για το σκότωμα του flash, αλλά εάν δεν μπορείς να καταλάβεις την τεχνολογία... /shoo

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από dva_dev » 03 Μαρ 2010 23:40

Μια ιστοσελίδα (ή μια τεχνολογία γιατί ο τύπος που την έφτιαξε πήγε να επιδείξει κάτι) αξίζει όταν δουλεύει. Αν δεν δουλεύει, τότε πρέπει να σου εξηγεί γιατί δεν δουλεύει. Αν δεν μπορεί να σου εξηγήσει γιατί δεν δουλεύει, πρέπει κατ' ελάχιστο να αναφέρει τι χρειάζεται για να δουλέψει υπό κανονικές συνθήκες.

Αν δεν κάνει ούτε και αυτό, είναι για πέταμα.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από Basilakis » 03 Μαρ 2010 23:47

Linkara το demo κατευθείαν.

Υποθέτεις πως το tutoral intoduction δεν γράφει εάν δουλεύει η όχι. Δεν το ξέρεις, γιατί δεν στο έδειξα.

Η τεχνολογία δουλεύει. Όταν φτάνουμε σε ένα αποτέλεσμα (ειδικά στο web, όταν για να κάνεις ένα debugging πρέπει να περάσεις απο 15 browsers) σημαίνει πως κάνουμε κάτι καλά.

Απο εκεί και πέρα, κοιτάμε να το κάνουμε καλύτερο και να συνεχίσουμε την ανάπτυξή του.

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Javascript kill flash?

Δημοσίευση από dimsis » 04 Μαρ 2010 09:22

Καλό είναι και με λιγότερο κώδικα από όσο περίμενα ότι θα δω....
Έτσι όπως πάει θα δούμε και "ζωντανά" 3d gui και interactivity σε websites συντόμως...

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από korgr » 04 Μαρ 2010 09:51

Δημητρη θεωρεις λιγο κωδικα αυτον?

Κώδικας: Επιλογή όλων

//only supports 2D vectors... there is no error checking.
function FastVector(x,y){
	this.x = x;
	this.y = y;
};
FastVector.prototype = {
	add: function (B,internal) {
		var nx, ny;
		if(typeof(B)=='number'){
			nx = this.x+B;
			ny = this.y+B;
		}else{
			nx = this.x+B.x;
			ny = this.y+B.y;
		}
		return new FastVector(nx,ny);
	},
	add_: function(B) {
		if(typeof(B)=='number'){
			this.x+=B; this.y+=B;
		}else{
			this.x+=B.x; this.y+=B.y;
		}
		return this;
	},
	dot: function(B) {
		return ((this.x*B.x)+(this.y*B.y));
	},
	length: function() {
		return Math.sqrt((this.x*this.x)+(this.y*this.y));
	},
	multiply: function(B) {
		var nx, ny;
		if(typeof(B)=='number'){
			nx = this.x*B; ny = this.y*B;
		}else{ 
			nx = this.x*B.x; ny = this.y*B.y;
		}
		return new FastVector(nx,ny);
	},
	multiply_: function(B) {
		if(typeof(B)=='number'){
			this.x*=B; this.y*=B;
		}else{
			this.x*=B.x; this.y*=B.y;
		}
		return this;
	},
	squaredLength: function(args) {
		return (this.x*this.x)+(this.y*this.y);
	},
	sum: function(){
		return this.x+this.y;
	},
	subtract: function(B) {
		var nx, ny;
		if(typeof(B) == 'number'){
			nx = this.x-B; ny = this.y-B;
		}else{
			nx = this.x-B.x; ny = this.y-B.y;
		}
		return new FastVector(nx,ny);
	},
	subtract_: function(B) {
		if(typeof(B) == 'number'){
			this.x-=B; this.y-=B;
		}else{
			this.x-=B.x; this.y-=B.y;
		}
		return this;
	},
	toString: function() {
		return "["+this.x+","+this.y+"]";
	}
	
};
function Canvas(id){
	this.canvas = document.getElementById(id);
	this.ctx = this.canvas.getContext('2d');
	this.width = this.canvas.width;
	this.height = this.canvas.height;
	this.fill_color = "#FFF";
	this.stroke_color = "#000";
}
Canvas.prototype={
	isInside: function(pos) {
		return &#40;pos.x >= 0 && pos.x<=1 && pos.y>=0 && pos.y<=1&#41;;
	&#125;,
	
	clear&#58; function&#40;&#41;&#123;
		this.ctx.clearRect&#40;0, 0, this.width, this.height&#41;;
	&#125;,
	circle&#58; function&#40;p,r&#41;&#123;
		x = p.x*this.width;
		y = p.y*this.height;
		//this.ctx.save&#40;&#41;;
		this.ctx.beginPath&#40;&#41;;
		this.ctx.strokeStyle = this.stroke_color;
		this.ctx.moveTo&#40;x+r,y&#41;;
		this.ctx.arc&#40;x,y,r,0,TWO_PI,false&#41;;
		this.ctx.fill&#40;&#41;;
		//this.ctx.restore&#40;&#41;;
	&#125;,
	line&#58; function&#40;x1,x2&#41;&#123;
		//this.ctx.save&#40;&#41;;
		this.ctx.beginPath&#40;&#41;;
		this.ctx.strokeStyle = this.stroke_color;
		this.ctx.moveTo&#40;x1.x*this.width,x1.y*this.height&#41;;
		this.ctx.lineTo&#40;x2.x*this.width,x2.y*this.height&#41;;
		this.ctx.stroke&#40;&#41;;
		//this.ctx.restore&#40;&#41;;
	&#125;
&#125;;
function Point&#40;p,m,inv_m&#41;&#123;
	this.curr = this.prev = p;
	this.mass = m;
	if&#40;inv_m == 0&#41;&#123;
		this.inv_mass = 0;
	&#125;else&#123;
		this.inv_mass = inv_m||1/m;
	&#125;
	this.force = GRAVITY;
	this.RADIUS = 3;
&#125;
Point.prototype = &#123;
	setCurrentPos&#58; function&#40;p&#41; &#123;
		this.curr = p;
	&#125;,
	setPreviousPos&#58; function&#40;p&#41; &#123;
		this.prev = p;
	&#125;,
	currentPosition&#58; function&#40;&#41; &#123;
		return this.curr;
	&#125;,
	previousPosition&#58; function&#40;&#41; &#123;
		return this.prev;
	&#125;,
	move&#58; function&#40;&#41; &#123;
		if&#40;this.inv_mass!=0&#41;&#123;
			//a = this.force.scale&#40;this.mass&#41;;
			var new_pos = this.curr.multiply&#40;DRAG_C_1&#41;.subtract&#40;this.prev.multiply&#40;DRAG_C_2&#41;&#41;.add&#40;GRAVITY_SCALED&#41;;
			new_pos.x = &#40;new_pos.x<0&#41;?0&#58;&#40;&#40;new_pos.x>1&#41;?1&#58;new_pos.x&#41;;
			new_pos.y = &#40;new_pos.y<0&#41;?0&#58;&#40;&#40;new_pos.y>1&#41;?1&#58;new_pos.y&#41;;
			this.prev = this.curr;
			this.curr = new_pos;
		&#125;
	&#125;,
	
	
	draw&#58; function&#40;&#41; &#123;
		//draw a circle at current point.
		canvas.circle&#40;this.curr,this.RADIUS&#41;;
	&#125;,
	select&#58; function&#40;&#41; &#123;
		canvas.circle&#40;this.curr,this.RADIUS*2&#41;;
	&#125;,
	
&#125;;
function Constraint&#40;p1,p2,rl&#41;&#123;
	this.p1 = p1;
	this.p2 = p2;
	this.rest_length = rl||p1.currentPosition&#40;&#41;.subtract&#40;p2.currentPosition&#40;&#41;&#41;.length&#40;&#41;;
	this.squared_rest_length = this.rest_length*this.rest_length;
&#125;
Constraint.prototype = &#123;
	draw&#58; function&#40;&#41; &#123;
		//draw a line from p1 to p2
		canvas.line&#40;this.p1.currentPosition&#40;&#41;,this.p2.currentPosition&#40;&#41;&#41;;
	&#125;,
	satisfy&#58; function&#40;&#41; &#123;
		var p1 = this.p1.currentPosition&#40;&#41;;
		var p2 = this.p2.currentPosition&#40;&#41;;
		var delta = p2.subtract&#40;p1&#41;;
		
		var p1_im = this.p1.inv_mass;
		var p2_im = this.p2.inv_mass;
		
		/*
		var delta_len = 0.5*&#40;this.rest_length+&#40;delta.squaredLength&#40;&#41;/this.rest_length&#41;&#41;;
		var diff = &#40;delta_len-this.rest_length&#41;/&#40;delta_len*&#40;p1_im+p2_im&#41;&#41;;
		*/
		var d = delta.squaredLength&#40;&#41;;
		var diff = &#40;d-this.squared_rest_length&#41;/&#40;&#40;this.squared_rest_length+d&#41;*&#40;p1_im+p2_im&#41;&#41;;
		if&#40;p1_im!=0&#41;&#123;
			this.p1.setCurrentPos&#40; p1.add&#40;delta.multiply&#40;p1_im*diff&#41;&#41; &#41;;
		&#125;
		if&#40;p2_im!=0&#41;&#123;
			this.p2.setCurrentPos&#40; p2.subtract&#40;delta.multiply&#40;p2_im*diff&#41;&#41; &#41;;
		&#125;
	&#125;,
	
	
&#125;

var PI = 3.1415;
var TWO_PI = PI*2;
var NUM_POINTS =10;

var X_OFFSET = 0.25;
var Y_OFFSET = 0.25;
var TOP_X=0.25;
var TOP_Y=0.2;

var POINT_MASS = 1.0;
var DRAG = 0.01;
var DRAG_C_1 = 2-DRAG;
var DRAG_C_2 = 1-DRAG;
var GRAVITY = new FastVector&#40;0.0,0.5&#41;;
var DT = 0.05;
var GRAVITY_SCALED = GRAVITY.multiply&#40;DT*DT&#41;;

/*global_vars*/
var canvas;
var cloth;
var timer = "";
var draw_constraints = false;
var draw_points = true;

function load&#40;&#41;&#123;
	clearInterval&#40;timer&#41;;
	NUM_POINTS = document.getElementById&#40;'num_points'&#41;.value;
	checkboxes&#40;&#41;;
	canvas = new Canvas&#40;'canvas'&#41;;
	cloth = new Cloth&#40;&#41;;
	run&#40;&#41;;
	timer = setInterval&#40;run, 35&#41;;
&#125;

run = function&#40;&#41;&#123;
	canvas.clear&#40;&#41;;
	cloth.update&#40;&#41;;
&#125;

function Cloth&#40;&#41;&#123;
	this.num_iterations = 2;
	
	this.points = new Array&#40;&#41;;
	this.constraints = new Array&#40;&#41;;
	
	var x_offset = X_OFFSET;
	var y_offset = Y_OFFSET;
	var x_step = &#40;&#40;1-2*X_OFFSET&#41;&#41;/&#40;NUM_POINTS-1&#41;;
	var y_step = &#40;&#40;1-2*Y_OFFSET&#41;&#41;/&#40;NUM_POINTS-1&#41;;
	
	var dist = x_step;
	
	for&#40;var i=0, y=TOP_Y; i<NUM_POINTS; i++, y+=y_step&#41;&#123;
		this.points&#91;i&#93; = new Array&#40;&#41;;
		for&#40;var j=0, x=TOP_X; j<NUM_POINTS; j++, x+=x_step&#41;&#123;
			var point = new Point&#40;new FastVector&#40;x,y&#41;,POINT_MASS&#41;;
			this.points&#91;i&#93;&#91;j&#93; = point;
			
			//add a vertical constraint
			if&#40;i>0&#41;&#123;
				var c = new Constraint&#40;this.points&#91;i-1&#93;&#91;j&#93;,this.points&#91;i&#93;&#91;j&#93;&#41;;
				this.constraints.push&#40;c&#41;;
			&#125;
			//add a new horizontal constraints
			if&#40;j>0&#41;&#123;
				var c = new Constraint&#40;this.points&#91;i&#93;&#91;j-1&#93;,this.points&#91;i&#93;&#91;j&#93;&#41;;
				this.constraints.push&#40;c&#41;;
			&#125;
		&#125;
	&#125;
	//pin the top right and top left.
	this.points&#91;0&#93;&#91;0&#93;.inv_mass = 0;
	//this.points&#91;NUM_POINTS-1&#93;&#91;0&#93;.inv_mass = 0;
	this.points&#91;0&#93;&#91;NUM_POINTS-1&#93;.inv_mass = 0;
	
	
	this.num_constraints = this.constraints.length;
&#125;
Cloth.prototype = &#123;
	update&#58; function&#40;&#41; &#123;
		//perform neccesary calcs&#58;
		
		//move each point with a pull from gravity
		for&#40;var i=0; i<NUM_POINTS; i++&#41;&#123;
			for&#40;var j=0; j<NUM_POINTS; j++&#41;&#123;
				this.points&#91;i&#93;&#91;j&#93;.move&#40;&#41;;
			&#125;
		&#125;
		//make sure all the constraints are satisfied.
		for&#40;var j=0; j<this.num_iterations; j++&#41;&#123;
			for&#40;var i=0; i<this.num_constraints; i++&#41;&#123;
				this.constraints&#91;i&#93;.satisfy&#40;&#41;;
			&#125;
		&#125;
		
		
		//draw the necessary components.
		if&#40;draw_constraints&#41;&#123;
			for&#40;var i=0; i<this.num_constraints; i++&#41;&#123;
				this.constraints&#91;i&#93;.draw&#40;&#41;;
			&#125;
		&#125;
		if&#40;draw_points&#41;&#123;
			for&#40;var i=0; i<NUM_POINTS; i++&#41;&#123;
				for&#40;var j=0; j<NUM_POINTS; j++&#41;&#123;
					this.points&#91;i&#93;&#91;j&#93;.draw&#40;&#41;;
				&#125;
			&#125;
		&#125;
	&#125;,
	getClosestPoint&#58; function&#40;pos&#41; &#123;
		min_dist = 1;
		min_point = null;
		for&#40;i=0; i<NUM_POINTS; i++&#41;&#123;
			for&#40;j=0; j<NUM_POINTS; j++&#41;&#123;
				var dist = pos.subtract&#40;this.points&#91;i&#93;&#91;j&#93;.currentPosition&#40;&#41;&#41;.length&#40;&#41;;
				if&#40;dist<min_dist&#41;&#123;
					min_dist = dist;
					min_point = this.points&#91;i&#93;&#91;j&#93;;
				&#125;
			&#125;
		&#125;
		return min_point;
	&#125;
&#125;;


var selected_point = null;
var key_pressed = false;
function getMouseCoords&#40;event&#41;&#123;
	if&#40;event == null&#41;&#123;
		event = window.event; 
	&#125;if&#40;event == null&#41;&#123;
		return null; 
	&#125;
	if&#40;event.pageX || event.pageY&#41;&#123;
		return new FastVector&#40;event.pageX/canvas.width,event.pageY/canvas.height&#41;;
	&#125;
	return null;
&#125;
document.onmousedown = function&#40;event&#41;&#123;
	var pos = getMouseCoords&#40;event&#41;;
	if&#40;canvas.isInside&#40;pos&#41;&#41;&#123;
		selected_point = cloth.getClosestPoint&#40;pos&#41;;
		selected_point.setCurrentPos&#40;pos&#41;;
		selected_point.setPreviousPos&#40;pos&#41;;
		selected_point.inv_mass = 0;
		document.onmousemove = function&#40;event&#41;&#123;
			var pos = getMouseCoords&#40;event&#41;;
			selected_point.setCurrentPos&#40;pos&#41;;
			selected_point.setPreviousPos&#40;pos&#41;;
			selected_point.inv_mass = 0;
		&#125;
		document.onmouseup = function&#40;event&#41;&#123;
			if&#40;!key_pressed&#41;&#123;
				selected_point.inv_mass = 1/POINT_MASS;
			&#125;
			document.onmousemove = function&#40;event&#41;&#123;&#125;
		&#125;
	&#125;
	
&#125;


document.onkeydown=function&#40;event&#41;&#123;
	if&#40;event != null&#41;&#123;
		
		if&#40;event.keyCode == 71&#41;&#123;
			//toggle gravity.
			if&#40;GRAVITY.sum&#40;&#41; == 0&#41;&#123;
				//gravity is off so turn it back on&#58;
				GRAVITY = new FastVector&#40;0.0,0.5&#41;;
			&#125;else&#123;
				//gravity is on so turn it off&#58;
				GRAVITY = new FastVector&#40;0.0,0.0&#41;;
			&#125;
			GRAVITY_SCALED = GRAVITY.multiply&#40;DT*DT&#41;;
		&#125;
		
		key_pressed = true;
	&#125;else&#123;
		key_pressed = false;
	&#125;

&#125;

document.onkeyup=function&#40;event&#41;&#123;
	key_pressed = false;
&#125;

function checkboxes&#40;&#41;&#123;
	draw_constraints = document.getElementById&#40;'constraints'&#41;.checked;
	draw_points = document.getElementById&#40;'points'&#41;.checked;
&#125;

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Javascript kill flash?

Δημοσίευση από dimsis » 04 Μαρ 2010 10:30

Νότη, λιγότερο κώδικα από όσο περίμενα να δω τον θεωρώ ναι.
Και σε actionscript π.χ. να ήταν ή σε μια desktop lang δεν θα έπρεπε να γράψεις τους τύπους και τις συναρτήσεις για τα 3d κόλπα;

Είχα δει παλιότερα κάτι games σε js,css (π.χ. lemmings) και είχα πάθει ζημιά με το πόσο "κάψιμο" χρειαζόταν για να γράψεις τόση javascript για κάτι τέτοιο.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από korgr » 04 Μαρ 2010 11:33

Δεν γνωριζω πολλα επι του θεματος και προφανως θα ειναι ετσι οπως τα λες. Απλα μου φανηκε πολυ περισσοτερος κωδικας απο οσο εχω δει σε actionscript και μαλιστα με πιο εντυπωσιακα αποτελεσματα.

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από Basilakis » 04 Μαρ 2010 11:45

δεν λέω πως δεν γίνεται με flash και σύγουρα πολύ καλύτερα...

λέω πως γίνετα και με Javascript όμως πλεόν και πως προχωράνε σιγά σιγά και με δειλά βήματα να φτίαξουν πράγματα με τρόπους που θα διευκολύνουν τη δουλειά τους...

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από ThyClub » 04 Μαρ 2010 11:51

HTML5 είναι. Με canvas

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από Basilakis » 05 Μαρ 2010 09:24

και game engine με Javascript αλλά φαντάζομαι και αυτό... βρομάει ε;

http://gamequery.onaluf.org/

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Javascript kill flash?

Δημοσίευση από ThyClub » 05 Μαρ 2010 17:39


Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Javascript kill flash?

Δημοσίευση από dimsis » 05 Μαρ 2010 18:28

LOL καμένοι (με την καλή έννοια)... ο άλλος το another world έγραψε σε javascript ffs!
Κοίτα να δεις δίψα που έχει ο κόσμος για animation και διαδραστικότητα με πιο compatible / ανοιχτό τρόπο από ότι το flash &#8230;. Ούτε οι ίδιοι οι δημιουργοί της javascript δεν θα το φανταζόταν αυτό.
Το άλλο με το μηχανάκι καρασερνότανε, αλλά αυτό πάει σφαίρα...


Εδώ πάλι ο τρελαμένος τι έκανε; έφτιαξε το παιχνίδι pong με ρακέτες πραγματικά παράθυρα του browser :p

Kάτι μου λέει τα μοντέρνα intro από τις demoscene έτσι θα είναι ...

Βάλε στο παιχνίδι και αυτό: http://html5demos.com/

(δες και αυτό thy http://html5demos.com/contenteditable )

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες