take a look
http://www.andrew-hoyer.com/exp_src/cloth.html
πως σας φαίνεται αυτή η ομορφιά;
Javascript kill flash?
Συντονιστές: WebDev Moderators, Super-Moderators
Javascript kill flash?
Σε ΙΕ δεν παίζει, σε chrome δεν παίζει σωστά, σε firefox και safari είναι 1+1 για να κάψεις τη cpu, παντού αν έχεις απενεργοποιημένη τη javascript δεν λέει πουθενά ότι χρειάζεται javascript για να παίξει, και τέλος ακόμα ψάχνω να βρώ την ομορφιά.
-
Basilakis
- PHP Moderator
- Δημοσιεύσεις: 8575
- Εγγραφή: 17 Νοέμ 2003 13:03
- Τοποθεσία: Womans' Brain
- Επικοινωνία:
Javascript kill flash?
άνοιξε τα μάτια σου τότε...
Φυσικά και έκανα πλάκα για το σκότωμα του flash, αλλά εάν δεν μπορείς να καταλάβεις την τεχνολογία... /shoo
Φυσικά και έκανα πλάκα για το σκότωμα του flash, αλλά εάν δεν μπορείς να καταλάβεις την τεχνολογία... /shoo
Javascript kill flash?
Μια ιστοσελίδα (ή μια τεχνολογία γιατί ο τύπος που την έφτιαξε πήγε να επιδείξει κάτι) αξίζει όταν δουλεύει. Αν δεν δουλεύει, τότε πρέπει να σου εξηγεί γιατί δεν δουλεύει. Αν δεν μπορεί να σου εξηγήσει γιατί δεν δουλεύει, πρέπει κατ' ελάχιστο να αναφέρει τι χρειάζεται για να δουλέψει υπό κανονικές συνθήκες.
Αν δεν κάνει ούτε και αυτό, είναι για πέταμα.
Αν δεν κάνει ούτε και αυτό, είναι για πέταμα.
-
Basilakis
- PHP Moderator
- Δημοσιεύσεις: 8575
- Εγγραφή: 17 Νοέμ 2003 13:03
- Τοποθεσία: Womans' Brain
- Επικοινωνία:
Javascript kill flash?
Linkara το demo κατευθείαν.
Υποθέτεις πως το tutoral intoduction δεν γράφει εάν δουλεύει η όχι. Δεν το ξέρεις, γιατί δεν στο έδειξα.
Η τεχνολογία δουλεύει. Όταν φτάνουμε σε ένα αποτέλεσμα (ειδικά στο web, όταν για να κάνεις ένα debugging πρέπει να περάσεις απο 15 browsers) σημαίνει πως κάνουμε κάτι καλά.
Απο εκεί και πέρα, κοιτάμε να το κάνουμε καλύτερο και να συνεχίσουμε την ανάπτυξή του.
Υποθέτεις πως το tutoral intoduction δεν γράφει εάν δουλεύει η όχι. Δεν το ξέρεις, γιατί δεν στο έδειξα.
Η τεχνολογία δουλεύει. Όταν φτάνουμε σε ένα αποτέλεσμα (ειδικά στο web, όταν για να κάνεις ένα debugging πρέπει να περάσεις απο 15 browsers) σημαίνει πως κάνουμε κάτι καλά.
Απο εκεί και πέρα, κοιτάμε να το κάνουμε καλύτερο και να συνεχίσουμε την ανάπτυξή του.
Javascript kill flash?
Καλό είναι και με λιγότερο κώδικα από όσο περίμενα ότι θα δω....
Έτσι όπως πάει θα δούμε και "ζωντανά" 3d gui και interactivity σε websites συντόμως...
Έτσι όπως πάει θα δούμε και "ζωντανά" 3d gui και interactivity σε websites συντόμως...
Javascript kill flash?
Δημητρη θεωρεις λιγο κωδικα αυτον?
Κώδικας: Επιλογή όλων
//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 (pos.x >= 0 && pos.x<=1 && pos.y>=0 && pos.y<=1);
},
clear: function(){
this.ctx.clearRect(0, 0, this.width, this.height);
},
circle: function(p,r){
x = p.x*this.width;
y = p.y*this.height;
//this.ctx.save();
this.ctx.beginPath();
this.ctx.strokeStyle = this.stroke_color;
this.ctx.moveTo(x+r,y);
this.ctx.arc(x,y,r,0,TWO_PI,false);
this.ctx.fill();
//this.ctx.restore();
},
line: function(x1,x2){
//this.ctx.save();
this.ctx.beginPath();
this.ctx.strokeStyle = this.stroke_color;
this.ctx.moveTo(x1.x*this.width,x1.y*this.height);
this.ctx.lineTo(x2.x*this.width,x2.y*this.height);
this.ctx.stroke();
//this.ctx.restore();
}
};
function Point(p,m,inv_m){
this.curr = this.prev = p;
this.mass = m;
if(inv_m == 0){
this.inv_mass = 0;
}else{
this.inv_mass = inv_m||1/m;
}
this.force = GRAVITY;
this.RADIUS = 3;
}
Point.prototype = {
setCurrentPos: function(p) {
this.curr = p;
},
setPreviousPos: function(p) {
this.prev = p;
},
currentPosition: function() {
return this.curr;
},
previousPosition: function() {
return this.prev;
},
move: function() {
if(this.inv_mass!=0){
//a = this.force.scale(this.mass);
var new_pos = this.curr.multiply(DRAG_C_1).subtract(this.prev.multiply(DRAG_C_2)).add(GRAVITY_SCALED);
new_pos.x = (new_pos.x<0)?0:((new_pos.x>1)?1:new_pos.x);
new_pos.y = (new_pos.y<0)?0:((new_pos.y>1)?1:new_pos.y);
this.prev = this.curr;
this.curr = new_pos;
}
},
draw: function() {
//draw a circle at current point.
canvas.circle(this.curr,this.RADIUS);
},
select: function() {
canvas.circle(this.curr,this.RADIUS*2);
},
};
function Constraint(p1,p2,rl){
this.p1 = p1;
this.p2 = p2;
this.rest_length = rl||p1.currentPosition().subtract(p2.currentPosition()).length();
this.squared_rest_length = this.rest_length*this.rest_length;
}
Constraint.prototype = {
draw: function() {
//draw a line from p1 to p2
canvas.line(this.p1.currentPosition(),this.p2.currentPosition());
},
satisfy: function() {
var p1 = this.p1.currentPosition();
var p2 = this.p2.currentPosition();
var delta = p2.subtract(p1);
var p1_im = this.p1.inv_mass;
var p2_im = this.p2.inv_mass;
/*
var delta_len = 0.5*(this.rest_length+(delta.squaredLength()/this.rest_length));
var diff = (delta_len-this.rest_length)/(delta_len*(p1_im+p2_im));
*/
var d = delta.squaredLength();
var diff = (d-this.squared_rest_length)/((this.squared_rest_length+d)*(p1_im+p2_im));
if(p1_im!=0){
this.p1.setCurrentPos( p1.add(delta.multiply(p1_im*diff)) );
}
if(p2_im!=0){
this.p2.setCurrentPos( p2.subtract(delta.multiply(p2_im*diff)) );
}
},
}
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(0.0,0.5);
var DT = 0.05;
var GRAVITY_SCALED = GRAVITY.multiply(DT*DT);
/*global_vars*/
var canvas;
var cloth;
var timer = "";
var draw_constraints = false;
var draw_points = true;
function load(){
clearInterval(timer);
NUM_POINTS = document.getElementById('num_points').value;
checkboxes();
canvas = new Canvas('canvas');
cloth = new Cloth();
run();
timer = setInterval(run, 35);
}
run = function(){
canvas.clear();
cloth.update();
}
function Cloth(){
this.num_iterations = 2;
this.points = new Array();
this.constraints = new Array();
var x_offset = X_OFFSET;
var y_offset = Y_OFFSET;
var x_step = ((1-2*X_OFFSET))/(NUM_POINTS-1);
var y_step = ((1-2*Y_OFFSET))/(NUM_POINTS-1);
var dist = x_step;
for(var i=0, y=TOP_Y; i<NUM_POINTS; i++, y+=y_step){
this.points[i] = new Array();
for(var j=0, x=TOP_X; j<NUM_POINTS; j++, x+=x_step){
var point = new Point(new FastVector(x,y),POINT_MASS);
this.points[i][j] = point;
//add a vertical constraint
if(i>0){
var c = new Constraint(this.points[i-1][j],this.points[i][j]);
this.constraints.push(c);
}
//add a new horizontal constraints
if(j>0){
var c = new Constraint(this.points[i][j-1],this.points[i][j]);
this.constraints.push(c);
}
}
}
//pin the top right and top left.
this.points[0][0].inv_mass = 0;
//this.points[NUM_POINTS-1][0].inv_mass = 0;
this.points[0][NUM_POINTS-1].inv_mass = 0;
this.num_constraints = this.constraints.length;
}
Cloth.prototype = {
update: function() {
//perform neccesary calcs:
//move each point with a pull from gravity
for(var i=0; i<NUM_POINTS; i++){
for(var j=0; j<NUM_POINTS; j++){
this.points[i][j].move();
}
}
//make sure all the constraints are satisfied.
for(var j=0; j<this.num_iterations; j++){
for(var i=0; i<this.num_constraints; i++){
this.constraints[i].satisfy();
}
}
//draw the necessary components.
if(draw_constraints){
for(var i=0; i<this.num_constraints; i++){
this.constraints[i].draw();
}
}
if(draw_points){
for(var i=0; i<NUM_POINTS; i++){
for(var j=0; j<NUM_POINTS; j++){
this.points[i][j].draw();
}
}
}
},
getClosestPoint: function(pos) {
min_dist = 1;
min_point = null;
for(i=0; i<NUM_POINTS; i++){
for(j=0; j<NUM_POINTS; j++){
var dist = pos.subtract(this.points[i][j].currentPosition()).length();
if(dist<min_dist){
min_dist = dist;
min_point = this.points[i][j];
}
}
}
return min_point;
}
};
var selected_point = null;
var key_pressed = false;
function getMouseCoords(event){
if(event == null){
event = window.event;
}if(event == null){
return null;
}
if(event.pageX || event.pageY){
return new FastVector(event.pageX/canvas.width,event.pageY/canvas.height);
}
return null;
}
document.onmousedown = function(event){
var pos = getMouseCoords(event);
if(canvas.isInside(pos)){
selected_point = cloth.getClosestPoint(pos);
selected_point.setCurrentPos(pos);
selected_point.setPreviousPos(pos);
selected_point.inv_mass = 0;
document.onmousemove = function(event){
var pos = getMouseCoords(event);
selected_point.setCurrentPos(pos);
selected_point.setPreviousPos(pos);
selected_point.inv_mass = 0;
}
document.onmouseup = function(event){
if(!key_pressed){
selected_point.inv_mass = 1/POINT_MASS;
}
document.onmousemove = function(event){}
}
}
}
document.onkeydown=function(event){
if(event != null){
if(event.keyCode == 71){
//toggle gravity.
if(GRAVITY.sum() == 0){
//gravity is off so turn it back on:
GRAVITY = new FastVector(0.0,0.5);
}else{
//gravity is on so turn it off:
GRAVITY = new FastVector(0.0,0.0);
}
GRAVITY_SCALED = GRAVITY.multiply(DT*DT);
}
key_pressed = true;
}else{
key_pressed = false;
}
}
document.onkeyup=function(event){
key_pressed = false;
}
function checkboxes(){
draw_constraints = document.getElementById('constraints').checked;
draw_points = document.getElementById('points').checked;
}Javascript kill flash?
Νότη, λιγότερο κώδικα από όσο περίμενα να δω τον θεωρώ ναι.
Και σε actionscript π.χ. να ήταν ή σε μια desktop lang δεν θα έπρεπε να γράψεις τους τύπους και τις συναρτήσεις για τα 3d κόλπα;
Είχα δει παλιότερα κάτι games σε js,css (π.χ. lemmings) και είχα πάθει ζημιά με το πόσο "κάψιμο" χρειαζόταν για να γράψεις τόση javascript για κάτι τέτοιο.
Και σε actionscript π.χ. να ήταν ή σε μια desktop lang δεν θα έπρεπε να γράψεις τους τύπους και τις συναρτήσεις για τα 3d κόλπα;
Είχα δει παλιότερα κάτι games σε js,css (π.χ. lemmings) και είχα πάθει ζημιά με το πόσο "κάψιμο" χρειαζόταν για να γράψεις τόση javascript για κάτι τέτοιο.
Javascript kill flash?
Δεν γνωριζω πολλα επι του θεματος και προφανως θα ειναι ετσι οπως τα λες. Απλα μου φανηκε πολυ περισσοτερος κωδικας απο οσο εχω δει σε actionscript και μαλιστα με πιο εντυπωσιακα αποτελεσματα.
-
Basilakis
- PHP Moderator
- Δημοσιεύσεις: 8575
- Εγγραφή: 17 Νοέμ 2003 13:03
- Τοποθεσία: Womans' Brain
- Επικοινωνία:
Javascript kill flash?
δεν λέω πως δεν γίνεται με flash και σύγουρα πολύ καλύτερα...
λέω πως γίνετα και με Javascript όμως πλεόν και πως προχωράνε σιγά σιγά και με δειλά βήματα να φτίαξουν πράγματα με τρόπους που θα διευκολύνουν τη δουλειά τους...
λέω πως γίνετα και με Javascript όμως πλεόν και πως προχωράνε σιγά σιγά και με δειλά βήματα να φτίαξουν πράγματα με τρόπους που θα διευκολύνουν τη δουλειά τους...
-
ThyClub
- Honorary Member
- Δημοσιεύσεις: 5312
- Εγγραφή: 17 Νοέμ 2003 00:21
- Τοποθεσία: Hell's Kitchen
- Επικοινωνία:
Javascript kill flash?
HTML5 είναι. Με canvas
Javascript kill flash?
LOL καμένοι (με την καλή έννοια)... ο άλλος το another world έγραψε σε javascript ffs!
Κοίτα να δεις δίψα που έχει ο κόσμος για animation και διαδραστικότητα με πιο compatible / ανοιχτό τρόπο από ότι το flash …. Ούτε οι ίδιοι οι δημιουργοί της javascript δεν θα το φανταζόταν αυτό.
Το άλλο με το μηχανάκι καρασερνότανε, αλλά αυτό πάει σφαίρα...
Εδώ πάλι ο τρελαμένος τι έκανε; έφτιαξε το παιχνίδι pong με ρακέτες πραγματικά παράθυρα του browser
Kάτι μου λέει τα μοντέρνα intro από τις demoscene έτσι θα είναι ...
Βάλε στο παιχνίδι και αυτό: http://html5demos.com/
(δες και αυτό thy http://html5demos.com/contenteditable )
Κοίτα να δεις δίψα που έχει ο κόσμος για animation και διαδραστικότητα με πιο compatible / ανοιχτό τρόπο από ότι το flash …. Ούτε οι ίδιοι οι δημιουργοί της javascript δεν θα το φανταζόταν αυτό.
Το άλλο με το μηχανάκι καρασερνότανε, αλλά αυτό πάει σφαίρα...
Εδώ πάλι ο τρελαμένος τι έκανε; έφτιαξε το παιχνίδι pong με ρακέτες πραγματικά παράθυρα του browser
Kάτι μου λέει τα μοντέρνα intro από τις demoscene έτσι θα είναι ...
Βάλε στο παιχνίδι και αυτό: http://html5demos.com/
(δες και αυτό thy http://html5demos.com/contenteditable )
Μέλη σε σύνδεση
Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες