-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdemo-pictures.html
130 lines (113 loc) · 4.18 KB
/
demo-pictures.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Undefined</title>
<script type="text/javascript" src="JSCodeSkulptor.js" ></script>
</head>
<body>
<div id="leftPanel" style="left:0; top:0; width:245px; height: 400px; float:left;"></div>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #000000; background-color:black;"></canvas>
<script>
////////////////////////////////////////////////////////////////////////////////
// Code Skulptor code below
// Ported from http://www.codeskulptor.org/#examples-more-3a_interactive_drawing-pictures.py
// Interactive Drawing
// Pictures
// This program allows the user to display pictures created
// using the canvas. Note the order of commands in the draw
// method; if you change them, does the image change?
// Note: I am definitely not an artist. I promise I tried.
// Feel free to change the pictures. (if you do that, it
// may be easier to work if you temporarily set the
// Global Variables
var canvas_width = 600;
var canvas_height = 600;
var fish = false;
var house = false;
var flower = false;
var big_dipper = false;
// Event Handlers
function toggle_fish() {
fish = !fish;
}
function toggle_house() {
house = !house;
}
function toggle_flower() {
flower = !flower;
}
function toggle_big_dipper() {
big_dipper = !big_dipper;
}
function draw(canvas) {
if (fish)
{
// Body
canvas.draw_circle([450, 100], 40, 2, "Orange", "Orange");
// Eye
canvas.draw_circle([430, 100], 10, 2, "Black", "White");
canvas.draw_circle([426, 104], 5, 1, "Black", "Black");
// Tail
var a = 470;
var b = 100;
var w = 80;
canvas.draw_polygon([[a, b], [a + w / 2 / Math.tan(Math.PI / 6), b - w / 2], [a + w / 2 / Math.tan(Math.PI / 6), b + w / 2]], 2, "Orange", "Orange");
}
if (flower)
{
// Leaf
canvas.draw_circle([140, 500], 30, 2, "Maroon", "Green");
// Stem
var w = 30;
var h = 150;
canvas.draw_polygon([[100, 400], [100, 400 + h], [100 + w, 400 + h], [100 + w, 400]], 2, "Maroon", "Green");
// Petals
canvas.draw_circle([115, 420], 40, 4, "Black", "White");
canvas.draw_circle([115, 320], 40, 4, "Black", "White");
canvas.draw_circle([165, 370], 40, 4, "Black", "White");
canvas.draw_circle([65, 370], 40, 4, "Black", "White");
// Center
canvas.draw_circle([115, 370], 35, 2, "Black", "Yellow");
}
if (house)
{
// Structure
canvas.draw_polygon([[300, 400], [550, 400], [550, 550], [300, 550]], 2, "Silver", "Silver");
canvas.draw_polygon([[275, 400], [425, 300], [575, 400]], 2, "Maroon", "Maroon");
// Door
canvas.draw_polygon([[400, 475], [400, 550], [450, 550], [450, 475]], 2, "Red", "Red");
canvas.draw_circle([410, 512], 5, 2, "Black", "Black");
// Windows
canvas.draw_polygon([[325, 450], [325, 500], [375, 500], [375, 450]], 4, "Black", "Blue");
canvas.draw_polygon([[525, 450], [525, 500], [475, 500], [475, 450]], 4, "Black", "Blue");
}
if (big_dipper)
{
// Lines
canvas.draw_polyline([[50, 70], [100, 60], [150, 72], [190, 90], [210, 150], [275, 160], [300, 107]], 2, "White");
// Stars
canvas.draw_circle([50, 70], 5, 1, "White");
canvas.draw_circle([100, 60], 5, 1, "White");
canvas.draw_circle([150, 72], 5, 1, "White");
canvas.draw_circle([190, 90], 5, 1, "White");
canvas.draw_circle([210, 150], 5, 1, "White");
canvas.draw_circle([275, 160], 5, 1, "White");
canvas.draw_circle([300, 107], 5, 1, "White");
}
}
// Frame
var frame = new simplegui.create_frame("Pictures", canvas_width, canvas_height);
// Register Event Handlers
frame.set_draw_handler(draw);
frame.add_button("Fish", toggle_fish, 100);
frame.add_button("House", toggle_house, 100);
frame.add_button("Flower", toggle_flower, 100);
frame.add_button("Big Dipper", toggle_big_dipper, 100);
// Remember to start the frame
frame.start();
// Code Skulptor code above
////////////////////////////////////////////////////////////////////////////////
</script>
</body>
</html>