// name of your script
reset()
canvassize(830,630)
canvascolor(255,255,255)
pencolor(0,130,0)
fontsize(32)
center()
gox(200)
print(" Start coding here ")
turnleft(70)
// Introduction to show some of WebTurtle's features
// Choose an example from the dropdown menu
// Feel free to change any example or write
// your own WebTurtle scripts here ;)
reset();
canvassize( 820, 630);
center()
penwidth(8)
canvascolor(0,0,0);
pencolor(0,140,250)
//draw logo
go(150,45)
fontsize(80)
print("ebTurtle 1.4")
// draw W
go(70,40)
direction(170)
await( wait(0.1))
forward(80)
await( wait(0.1))
direction(20)
forward(70)
direction(160)
forward(70)
direction(10)
forward(80)
await (wait(0.1))
direction(90)
backward(3)
forward(600)
await(wait(0.3)) //pause a little
//draw colordisk
go(405,300)
penwidth(2)
for( var $x=1;$x<=36; $x++ ){
for( j=0;j<72;j++){ //repeat 72
forward(9);
turnright(5);
}
// use await to slowdown and see animation
await( wait(0.01) )
penup();
turnright(10)
forward(5)
pendown()
pencolor( 255-$x*5, $x*5, 155+$x*5 );
}
go(70,540)
fontsize(20)
pencolor(255,255,255)
print("An educational programming environment in your browser !")
fontsize(16)
pencolor(0,140,250)
go(475,580)
print("Author: Walter Schreppers")
go(475,600)
print("Created: January 2020")
gox(450)
direction(0)
// make canvas pulse
for( var c=0;c<170;c+=8){
canvascolor(0,0,c);
await (wait(0.02));
}
for( c=0;c<170;c+=8){
canvascolor(0,0,230-c);
await (wait(0.02));
}
// Rainbow Benzine
function setColor(i){
switch(i){
case 0: pencolor(250,0,0); break; //red
case 1: pencolor(120,0,120); break; //purple
case 2: pencolor(0,0,250); break; //blue
case 3: pencolor(0,250,0); break; //green
case 4: pencolor(255,150,80);break; //orange
case 5: pencolor(240,210,0); break; //yellow
}
}
canvascolor(0,0,0); //black
canvassize(820,630);
center()
// Now draw our Rainbow Benzine
for(x=0;x<360;x++){
setColor(x%6)
penwidth(x/150 + 1)
forward(x/1.4)
turnleft(59)
}
// Rainbow Benzine Animated
function setColor(i){
switch(i){
case 0: pencolor(250,0,0); break; //red
case 1: pencolor(120,0,120); break; //purple
case 2: pencolor(0,0,250); break; //blue
case 3: pencolor(0,250,0); break; //green
case 4: pencolor(255,150,80);break; //orange
case 5: pencolor(240,210,0); break; //yellow
}
}
//Benzine Rainbow with scale parameter added
function drawBenzine(scale){
clear()
center()
for(x=0;x<360;x++){
setColor(x%6)
penwidth(x/150 + 1)
forward((x/1.4)*scale)
turnleft(59)
}
}
// Animation code
zoom_counter=2; //how many times to zoom in
canvascolor(0,0,0); //black
canvassize(820,630);
sh();
while( zoom_counter-- > 0 ){
//small to BIG
for( scale=0.1;scale<8;scale+=0.1){
drawBenzine(scale)
await(wait(0.01))
center()
turnright(3)
}
//BIG to small again
for( scale=8;scale>0.1;scale-=0.1){
drawBenzine(scale)
await(wait(0.01))
center()
turnright(3)
}
}
ss()
drawBenzine(0.8)
direction(0)
go(320,580)
print("Yes, WebTurtle is fast ;)")
center()
//Sierpinski Triangle
function sierp( arg ) {
if (arg > 2) {
for(var i=0;i<3;i++) {
sierp( arg/2 );
forward( arg);
turnleft(120);
}
}
}
reset();
canvassize( 820, 630);
pencolor(0,0,200)
go(180, 500);
turnright( 90 );
sierp(500);
go(430,30);
direction(0);
TODO move example 3 from js to here
TODO move example 4 from js to here
TODO move example 5 from js to here
TODO move example 6 from js to here
// Some nice blue flower found on web as kturtle, converted to WebTurtle
// Also added a delay to make it animate, you can remove it or tune it
// await( wait(0.001) ) waits 1 milli second so 0.01 is 10*slower, is really slow 0.1 etc...
// and ow yes on Internet Explorer await does not work, it's always skipped.
reset()
canvassize(820,630)
go(250,360)
canvascolor(10,10,50)
pencolor(0,0,200)
penwidth(3)
for(i=0;i<8;i++){
turnright(45)
for(j=0;j<6;j++){
for(k=0;k< 90;k++ ){
forward(4)
turnright(2)
//remove line for full speed,
//increase k to go faster, increase
//wait to make it slower
if((k%10)===0) await(wait(0.001))
}
turnright(90)
}
}
pencolor(200,200,255)
go(270,20)
print("A nice blue flower here ;) ")
go(150,580)
print("WebTurtle was written by Walter Schreppers in January 2020!")
go(130,585)
TODO move example 8 from js to here
// Gold flower using ES6 repeats and ditching semi's
// this is closest we can get with javascript mimicking kturtle's logo
// language without adding a parse+translate phase
reset()
canvassize(800,640)
go(250,360)
canvascolor(0,0,0)
pencolor(230,200,0)
penwidth(2)
repeat(8,()=>{
turnright(45)
repeat(6, ()=>{
repeat(90, ()=>{
forward(4)
turnright(2)
})
turnright(90)
})
})
go(20,20)
// Sun spiral
reset()
canvassize(830,620)
center()
pencolor(240,230,0)
canvascolor(0)
penwidth(2)
function draw_square(){
for(var s=0;s<4;s++){
forward(200);
turnright(90);
}
}
for(var i=0;i<36;i++){
draw_square();
turnright(10);
}
TODO move example 9 from js to here
TODO move example 10 from js to here
TODO move example 11 from js to here
TODO move example 12 from js to here
TODO move example 13 from js to here
// Getting user input is possible now.
// The await around ask is necessary to make
// the script pause until the user has answered.
reset()
canvassize(830,630)
canvascolor(20,20,180)
pencolor(255,255,255)
fontsize(16)
spritehide()
function drawShape(n){
center()
penup()
go(250,250)
pendown()
penwidth(4)
if(n<3){
print("sorry can't draw a shape if sides is less than 3")
return
}
if(n==3){
turnright(30)
}
for(i=1;i<=n;i++){
turnright(360/n)
forward(1100/n)
}
}
n = await( ask("Give number of sides for shapedraw") )
drawShape(n)
center()
spriteshow()
go(10, 10 )
print("Your answer was: "+n)
go(10, 30)
print("Look we called drawShape to show it.")
go(10,50)
print("The square root of n is "+ sqrt(n) )
go(10,70)
print("The angle between the sides is "+ round(360/n) + " degrees")
center()
spriteshow()
// User input example and having some fun with the turtle ;)
reset()
canvassize(830,620)
center()
canvascolor(0,0,0)
pencolor(230,200,0)
fontsize(24)
penwidth(3)
go( 100, 40 )
answer = await( ask("Are you enjoying WebTurtle?") );
print("Your answer was: "+answer);
go(100,80)
n = await( ask("What's your name?") );
print("Hello "+n+", WebTurtle likes you!");
//animate magic ;)
center()
for(j=0;j<2;j++){
for(r=1;r<=90;r++){
direction(r-45)
if((r%2)===0)await( wait(0.001))
}
for(r=1;r<=90;r++){
direction(45-r)
if((r%2)===0)await( wait(0.001))
}
}
penup()
turnleft(5)
forward(270)
pendown()
for( var c=0;c<30; c++){
pencolor(
random(150,200),
random(130,240),
random(80,250)
)
sh()
go(random(10,700), random(120,580))
print(n)
ss()
await(wait(0.1))
}
// uncomment and see an annoying popup alert ;)
// message("That's all folks!")
// Strange spiral discovered while playing around
reset()
canvassize(830,620)
canvascolor(0,0,0)
penwidth(4)
center()
for(i=0;i<180;i++){
forward(i*0.4)
turnright(i*2)
//random color on each segment
pencolor(
random(50,250),
random(50,250),
random(50,250)
)
}
// slam ctrl-w or the run button multiple times
// it will generate new colors each time...
// Fractal Tree
function tree($s,$l){
if( $s > 0 ){
penwidth( $l/5 );
pencolor(50,200-$l*2, 50)
forward( $l )
turnleft(60)
tree( $s-1, 0.7*$l )
turnright(120)
tree( $s-1, 0.7*$l )
turnleft(240)
forward($l)
turnleft(180)
}
}
reset()
spritehide()
backward(100)
canvascolor(140,190,255)
tree(10,100)
// Don't be a square ;)
reset()
canvassize(830,620)
center()
pencolor(0,130,0)
canvascolor(0)
penwidth(2)
x=1
while(x<400){
r=random(50,225)
g=random(50,255)
pencolor(r,g,200)
forward(50+x)
turnright(90.911)
x=x+1
}
// A bit crazy to do this in webturtle,
// But yes, it's possible to write a tiny 3d engine also ;)
// It's far from optimal code, but hey it spins nicely ;)
reset()
canvassize(830,630)
canvascolor(10,10,80)
center()
cube_points = [
[-50,50,-50],
[-50,-50,-50],
[50,-50,-50],
[50,50,-50],
[-50,50,50],
[-50,-50,50],
[50,-50,50],
[50,50,50],
//add turtle inside ;)
[-40,-20,0], //8
[-30,-20,0], //9
[-35,-20,0],
[-35,-10,0],
//U
[-25,-20,0], //12
[-25,-10,0],
[-15,-10,0],
[-15,-20,0],
[-15,-10,0],
//R
[-10,-20,0], //17
[-10,-10,0], //18
[-10,-20,0], //19
[ 0, -20,0], //20
[ 0, -15,0],
[ -10, -15, 0], //22
[ -10, -15, 0], //23
[ 0, -10, 0], //24
//T
[5,-20,0], //25
[15,-20,0], //26
[10,-20,0],
[10,-10,0],
//L
[19,-20,0], //29
[19,-10, 0],
[28, -10, 0], //31
//E
[32,-20,0], //32
[32,-10, 0],
[40, -10, 0],
[32,-15,0], //35
[36,-15,0], //36
[32,-20,0],
[38,-20,0],
]
cube_edges = [
0,1,
1,2,
2,3,
3,0,
4,5,
5,6,
6,7,
7,4,
4,0,
5,1,
6,2,
7,3,
//turtle part
8,9,
10,11,
12,13,
13,14,
15,16,
17,18,
19,20,
20,21,
21,22,
22,23,
23,24,
25,26,
27,28,
29,30,
30,31,
32,33,
33,34,
35,36,
37,38
]
function pointsTimesMat( points, mat ){
for( var p in points ){
var px = points[p][0]*mat[0][0]+points[p][1]*mat[0][1]+points[p][2]*mat[0][2];
var py = points[p][0]*mat[1][0]+points[p][1]*mat[1][1]+points[p][2]*mat[1][2];
var pz = points[p][0]*mat[2][0]+points[p][1]*mat[2][1]+points[p][2]*mat[2][2];
points[p][0] = px;
points[p][1] = py;
points[p][2] = pz;
}
return points;
}
//only 3x3 necessary here,
function matTimesMat(a, b){
var result=[
[0,0,0],
[0,0,0],
[0,0,0]
];
for (var i = 0; i <= 2; i++) {
for (var j = 0; j <= 2; j++) {
var sum = 0;
for (var k = 0; k <= 2; k++) {
sum = sum + a[i][k] * b[k][j];
}
result[i][j] = sum;
}
}
return result;
}
function rotateXMat(angle){
var s = sin(angle)
var c = cos(angle)
var rx = [
[1, 0, 0],
[0, c, -s],
[0, s, c],
];
return rx;
}
function rotateYMat(angle){
var s = sin(angle)
var c = cos(angle)
var ry = [
[c, 0, s],
[0, 1, 0],
[-s, 0, c],
];
return ry;
}
function rotateZMat(angle){
var s = sin(angle)
var c = cos(angle)
var rz = [
[c, -s, 0],
[s, c, 0],
[0, 0, 1],
];
return rz;
}
// have a seperate array of points for rotating
var points = new Array(cube_points.length)
for( var row in cube_points ){
points[row]=[]
}
function drawCube(rotX,rotY,rotZ){
//deep copy cube_points
for( var row in cube_points ){
for(var c in cube_points[row]){
points[row][c]=cube_points[row][c];
}
}
// rotate x,y,z matrix
var rotXYZ = matTimesMat(rotateXMat(rotX), rotateYMat(rotY));
rotXYZ = matTimesMat( rotXYZ, rotateZMat(rotZ) );
points = pointsTimesMat( points, rotXYZ );
for( var p in points ){
//scale a bit (and apply perspective)
points[p][2]=points[p][2]*2;
var zo = points[p][2]+550
var pers = zo/1200;
points[p][0]=points[p][0]*7*pers;
points[p][1]=points[p][1]*7*pers;
//transpose to center
points[p][0]=(points[p][0]+400);
points[p][1]=(points[p][1]+300);
}
for(p=0;p < cube_edges.length-1; p+=2){
var pa = points[cube_edges[p]]
var pb = points[cube_edges[p+1]]
var depth = Math.abs(pa[2]+pb[2]+450)/4
var col = 0 + depth*1.4;
pencolor(col,col,col)
drawline(pa[0], pa[1], pb[0], pb[1])
}
}
radian = pi()/180;
sh()
for( var rc=0; rc <= 550; rc+=2) {
clear()
penwidth(4)
drawCube(
(rc*0.65) * radian,
(rc*1.31) * radian,
(rc*0.65) * radian
);
await( wait(0.020) );
}
fontsize(34)
gox(300)
print( "Power :)")
go(400,400)
spriteshow()