Arhivi Kategorije: Programiranje

Padanje kroglice in njen odboj od sten

Objavljeno ,
Odgovori

Na spletni strani lahko, če uporabimo Javascript, kažemo tudi grafiko in celo kaj animiramo. Tule primer sposojene kode iz spletnega učbenika Javascripta, ki sem jo priredil za svoje potrebe.

Koda je naslednja:

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; charset=UTF-8; initial-scale=2.0"/>
<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<p>
Kažem kroglico, ki se odbija od tal in sten.
<body>
<p><button class="button" onclick ="startGame();">Klikni tu za začetek</button>
 
<script>
var mySound;
var myGamePiece;

function startGame() {
    myGamePiece = new component(10, "red", 5, 5);
 //   mySound=new sound("bounce.mp3");
    myGameArea.start();
}


var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 680;
        this.canvas.height = 470;
	this.canvas.style="border:10px solid #0000FF";
        this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);  
            this.interval = setInterval(updateGameArea, 20);
	        
    },	
     stop : function() {
        clearInterval(this.interval);
    },   
    clear : function() {
   this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);     
    }
}

function component(radij, color, x, y, type) {
	
    this.type = type;
    this.r = radij;
    this.x = x;
    this.y = y;    
    this.speedX = 3;
    this.speedY = 0;    
    this.gravity = 0.1;
    this.gravitySpeed = 0;
    this.bounce = 0.98;
    this.update = function() {
        ctx = myGameArea.context;
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.arc(this.x, this.y, this.r,0,2.1*Math.PI);
        ctx.fill();
        ctx.stroke()
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.speedX=0.9995*this.speedX;
	this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.r;
	var rob =  myGameArea.canvas.width;      
	if ((this.y > rockbottom) || (this.y<0)) {
            this.y=rockbottom;
	    //mySound.play();
            this.gravitySpeed = -(this.gravitySpeed * this.bounce);
        }
	if ((this.x > rob-radij) || (this.x<5)) {
	    this.speedX=-this.speedX};
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

</script>

</body>
</html>

Z njo dobimo naslednjo animacijo:

biljardPrenos

Z majhno spremembo zgornje kode pa lahko namesto kroglice dobimo prikaz njenega tira:

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; charset=UTF-8; initial-scale=2.0"/>
<style>
.button {
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>
</head>
<p>
Kažem tir kroglice, ki se odbija od tal in sten.
<body>
<p><button class="button" onclick ="startGame();">Klikni tu za začetek</button>
 
<script>
var mySound;
var myGamePiece;

function startGame() {
    myGamePiece = new component(0, "white", 5, 5);
 //   mySound=new sound("bounce.mp3");
    myGameArea.start();
}


var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 680;
        this.canvas.height = 470;
	this.canvas.style="border:10px solid #0000FF";
        this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);  
            this.interval = setInterval(updateGameArea, 20);
	        
    },	
     stop : function() {
        clearInterval(this.interval);
    },   
    clear : function() {
   this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);     
    }
}

function component(radij, color, x, y, type) {
	
    this.type = type;
    this.r = radij;
    this.x = x;
    this.y = y;    
    this.speedX = 2;
    this.speedY = 0;    
    this.gravity = 0.1;
    this.gravitySpeed = 0;
    this.bounce = 0.98;
    this.update = function() {
        ctx = myGameArea.context;
        //ctx.beginPath();
        ctx.fillStyle = color;
	//ctx.borderStyle="red";
	//ctx.style.color="blue";
        ctx.arc(this.x, this.y, this.r,0,2.1*Math.PI);
        ctx.fill();
        ctx.stroke()
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.speedX=0.9995*this.speedX;
	this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.r;
	var rob =  myGameArea.canvas.width;      
	if ((this.y > rockbottom) || (this.y<0)) {
            this.y=rockbottom;
	   // mySound.play();
            this.gravitySpeed = -(this.gravitySpeed * this.bounce);
        }
	if ((this.x > rob-radij) || (this.x<5)) {
	    this.speedX=-this.speedX};
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

</script>

</body>
</html>
biljard10Prenos

Grafični prikaz gibanja satelita okrog Zemlje

Objavljeno ,

V poljubno verzijo Pythona dodamo katero od grafičnih knjižnic. Prav preprosta je graphic.py . Namestimo jo na disk tako, da postane Pythonu vidna, preberemo še navodila na začetku knjižnice in lahko začnemo s programiranjem grafike. Tako recimo koda

from math import *
from graphics import *
def delay(m):
    for i in range(1000*m):
            continue
def main():
    mx=600    # širina in višina okna
    my=400
    win=GraphWin("Moj Krog",mx,my,autoflush=False)
    p=Rectangle(Point(0,0),Point(mx,my))
    p.setFill("white")
    c=Circle(Point(mx/2,my/2),10)      #Zemlja je modri krogec
    c.setFill("blue")
    p.draw(win)
    c.draw(win)
    dt=10                  #interval med računi leg
    x=mx/3                 #začetna lega
    y=0
    vx=0                   # začetna hitrost
    vy=0.04                # to komponento malo spremeni 
    while True:
        r=sqrt(x*x+y*y)   # račun razdalje satelit-Zemlja
        ax=-x/(r*r*r)     # pospešek satelita sledi iz 
        ay=-y/(r*r*r)     # gravitacijskeg azakona
        vx=vx+ax*dt       # račun nove hitrosti
        vy=vy+ay*dt       
        x=x+vx*dt         #račun nove lege satelita 
        y=y+vy*dt
        t=Point(mx/2+x,my/2-y)     # risanje satelita
        t.setFill("red")
        t.draw(win)
        delay(100)
        #t.setFill("white")
        #t.draw(win)
        update()
    win.getMouse()
    win.close()
main()

spravimo v gibanje satelit okrog Zemlje.