 |
| Splash screen of the application |
 |
| Tunisian Radio Player - Version 0.1.0 |
 |
| Writing an email (iPhone) in the arabic language using the iOS from apple |
 |
| Writing an arabic poem using the iPhone (iOS) |
 |
| Possible deep see crater near the coast of Tunisia |
 |
| Possible deep impact crater in Tunisia |
 |
| Wordwide Map for deep Impact and craters on Earth |
 |
| 30000 investigated intervals sorted here with the frequency of primes |
 |
| Standard graphic that investigate the number of primes for the first 30000 intervals of the form [100(i-1)+1, 100i] |
 |
| List of the number of primes for the first 32 intervals |
 |
| Awesome Awesome Awesome |
Just put your code that you want to highlight inside a <pre> tag. The current example demonstrate how to highlight html.
<pre class="brush:html"> <h1>Youpi! I'm highlighted!</h1> </pre>The result would be:
The following example show a java highlighted code (<pre class="brush:java">)Youpi! I'm highlighted!
package edu.kara.tutorial.java;
import java.util.*; // not used here
public class MyClass {
private String myParameter = "";
public MyClass(String param) {
this.myParameter = param;
}
public String getValue() {
return MyParameter;
}
}
<!DOCTYPE html> <head>Temple of water - Version 1.0 </head> <body onload="init()"> </body> </html>
<!DOCTYPE
html>
<head>
<meta
content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>Simple
Clock Animation</title>
<script type="application/javascript">
var canvas; // the clock
canvas
var ctx; // canvas’s
context
// clock settings
var centerX = 0;
var centerY = 0;
var radius = 150;
function init() {
canvas
= document.getElementById("clock");
ctx = canvas.getContext("2d");
centerX =
canvas.width / 2;
centerY = canvas.height / 2;
drawClock();
}
</script>
</head>
<body
onload="init()">
<canvas
id="clock" height="500" width="500">
Your browser does not support HTML5</canvas>
</body>
</html>
|
function drawClock()
{
drawClockBackground();
}
|
function
drawClockBackground() {
var correction = 1/300;
var shift_unit = 1/170;
var shift_factor = 1/30;
var
angle_initial_position = 2;
var
angle_current_position_begin = 0;
var
angle_current_position_end = 0;
var repeat = 60;
var lineWidth = 10;
for (var i=0; i <
repeat; i+=1) {
angle_current_position_begin
= angle_initial_position - (i * shift_factor) - correction;
angle_current_position_end
= angle_current_position_begin + shift_unit;
if (i % 5 == 0)
lineWidth = 20;
else lineWidth = 10;
drawArcAtPosition(centerX,
centerY, radius,
angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
}
drawLittleCircle(centerX, centerY);
}
function
drawArcAtPosition(centerX, centerY, radius,
start_angle, end_angle, counterclockwise, lineWidth) {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, start_angle, end_angle, counterclockwise);
ctx.lineWidth =
lineWidth;
ctx.strokeStyle =
"black";
ctx.stroke();
ctx.closePath();
}
function
drawLittleCircle(centerX, centerY) {
drawArcAtPosition(centerX, centerY, 4, 0*Math.PI, 2*Math.PI, false, 4);
}
|
// draw Hand for
seconds
 function
drawSecondsHand() {
endX = centerX + radius*Math.sin(seconds*Math.PI / 30);
endY = centerY -
radius*Math.cos(seconds*Math.PI / 30);
drawHand(centerX, centerY, endX, endY);
}
function
drawHand(beginX, beginY, endX, endY) {
ctx.beginPath();
ctx.moveTo(beginX,
beginY);
ctx.lineTo(endX,
endY);
ctx.stroke();
ctx.closePath();
}
|
// draw Hand for
minutes
function
drawMinutesHand() {
var rotationUnit = minutes + seconds / 60; var rotationFactor = Math.PI / 30; var rotation = rotationUnit*rotationFactor; var handLength = 0.8*radius; endX = centerX + handLength*Math.sin(rotation); endY = centerY - handLength*Math.cos(rotation); drawHand(centerX, centerY, endX, endY);
}
// draw Hand for
hours
function
drawHoursHand() {
var rotationUnit = 5*hours + minutes / 12; var rotationFactor = Math.PI / 30; var rotation = rotationUnit*rotationFactor; var handLength = 0.4*radius; endX = centerX + handLength*Math.sin(rotation); endY = centerY - handLength*Math.cos(rotation); drawHand(centerX, centerY, endX, endY);
}
|
function drawClock()
{
drawClockBackground();
drawSecondsHand();
drawMinutesHand();
drawHoursHand();
}
|
// time settings
var date;
var hours;
var minutes;
var seconds;
|
// get the system
time
function initTime()
{
date = new Date();
hours =
date.getHours() % 12;
minutes = date.getMinutes();
seconds = date.getSeconds();
}
|
function init() {
…
initTime();
drawClock();
}
|
// animate clock
function
animateClock() {
clearCanvas();
refreshTime();
drawClock();
}
|
// clear canvas
function
clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// refresh time
after 1 seconde
function
refreshTime() {
seconds += 1;
if
(Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }
if
(Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }
}
// draw or redraw
Clock after time refresh
function drawClock()
{
drawClockBackground();
drawSecondsHand();
drawMinutesHand();
drawHoursHand();
}
|
function init() {
canvas =
document.getElementById("clock");
ctx =
canvas.getContext("2d");
centerX =
canvas.width / 2;
centerY =
canvas.height / 2;
initTime();
drawClock();
setInterval("animateClock()",
1000);
}
|
<!DOCTYPE
html>
<head>
<meta
content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>Simple
Clock Animation</title>
<script
type="application/javascript">
var canvas; // the
clock canvas
var ctx; // canvas's
context
// clock settings
var centerX = 0;
var centerY = 0;
var radius = 150;
// time settings
var date;
var hours;
var minutes;
var seconds;
function init() {
canvas = document.getElementById("clock");
ctx = canvas.getContext("2d");
centerX =
canvas.width / 2;
centerY = canvas.height / 2;
initTime();
drawClock();
setInterval("animateClock()",
1000);
}
// get the system
time
function initTime()
{
date = new Date();
hours
= date.getHours() % 12;
minutes
= date.getMinutes();
seconds
= date.getSeconds();
}
// animate clock
function
animateClock() {
clearCanvas();
refreshTime();
drawClock();
}
// clear canvas
function
clearCanvas() {
ctx.clearRect(0, 0,
canvas.width, canvas.height);
}
// refresh time
after 1 seconde
function
refreshTime() {
seconds += 1;
if
(Math.floor((seconds / 60)) != 0) { minutes += 1; seconds %= 60; }
if
(Math.floor((minutes / 60)) != 0) { hours += 1; minutes %= 60; }
}
// draw or redraw
Clock after time refresh
function drawClock()
{
drawClockBackground();
drawSecondsHand();
drawMinutesHand();
drawHoursHand();
}
function
drawHand(beginX, beginY, endX, endY) {
ctx.beginPath();
ctx.moveTo(beginX,
beginY);
ctx.lineTo(endX, endY);
ctx.stroke();
ctx.closePath();
}
// draw Hand for
seconds
function
drawSecondsHand() {
endX = centerX +
radius*Math.sin(seconds*Math.PI / 30);
endY = centerY -
radius*Math.cos(seconds*Math.PI / 30);
drawHand(centerX, centerY, endX, endY);
}
// draw Hand for minutes function drawMinutesHand() { var rotationUnit = minutes + seconds / 60; var rotationFactor = Math.PI / 30; var rotation = rotationUnit*rotationFactor; var handLength = 0.8*radius; endX = centerX + handLength*Math.sin(rotation); endY = centerY - handLength*Math.cos(rotation); drawHand(centerX, centerY, endX, endY); } // draw Hand for hours function drawHoursHand() { var rotationUnit = 5 * hours + minutes / 12; var rotationFactor = Math.PI / 30; var rotation = rotationUnit*rotationFactor; var handLength = 0.4*radius; endX = centerX + handLength*Math.sin(rotation); endY = centerY - handLength*Math.cos(rotation); drawHand(centerX, centerY, endX, endY); }
function
drawClockBackground() {
var correction =
1/300;
var shift_unit =
1/170;
var shift_factor =
1/30;
var angle_initial_position = 2;
var angle_current_position_begin = 0;
var angle_current_position_end = 0;
var repeat = 60;
var lineWidth = 10;
for (var i=0; i <
repeat; i+=1) {
angle_current_position_begin
= angle_initial_position - (i * shift_factor) - correction;
angle_current_position_end = angle_current_position_begin + shift_unit;
if (i % 5 == 0)
lineWidth = 20;
else lineWidth = 10;
drawArcAtPosition(centerX,
centerY, radius,
angle_current_position_begin*Math.PI, angle_current_position_end*Math.PI, false, lineWidth);
}
drawLittleCircle(centerX,
centerY);
}
function
drawArcAtPosition(centerX, centerY, radius, start_angle,
end_angle, counterclockwise, lineWidth) {
ctx.beginPath();
ctx.arc(centerX, centerY, radius, start_angle, end_angle, counterclockwise);
ctx.lineWidth =
lineWidth;
ctx.strokeStyle =
"black";
ctx.stroke();
ctx.closePath();
}
function
drawLittleCircle(centerX, centerY) {
drawArcAtPosition(centerX, centerY, 4, 0*Math.PI, 2*Math.PI, false, 4);
}
</script>
</head>
<body
onload="init()">
<canvas
id="clock" height="500" width="500">
Your browser does not support HTML5</canvas>
</body>
</html>
|