webVPythonDocsHome/docs/VPythonDocs/programJS.html at main · vpython/webVPythonDocsHome

History

220 lines (179 loc) · 18.9 KB

Raw

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

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

<!DOCTYPE html>

<head>

<title>Writing Programs in JavaScript — VPython 3.2 documentation</title>

</head><body>

<h1>Writing Programs in JavaScript<a class="headerlink" href="#writing-programs-in-javascript" title="Permalink to this heading">¶</a></h1>

To write programs using JavaScript instead of VPython, change the first line of the program to “JavaScript X.Y”, where “X.Y” is the current version. Equivalent headings are “GlowScript X.Y” and “GlowScript X.Y JavaScript”.

Here is the relationship between the VPython documentation and what you would write in JavaScript:

<div class="highlight-default notranslate"><div class="highlight"><pre>b = box(pos=vec(2,1,0, color=color.cyan) # VPython

b.axis = vec(1,1,0)

let b = box({pos:vec(2,1,0), color:color.cyan}) // JavaScript

</pre></div>

</div>

At the moment, the ACE editor used at glowscript.org is an old version that doesn’t recognize some (now valid) elements of JavaScript, including in particular async, await, and class, and as a result statements containing these elements are marked as being in error. Evidently glowscript.org needs to upgrade its use of ACE.

<h2>Using async and await<a class="headerlink" href="#using-async-and-await" title="Permalink to this heading">¶</a></h2>

An animation loop must contain a rate(), sleep(), scene.pause(), or scene.waitfor() statement; otherwise the browser will lock up, and it is difficult to kill the browser. Moreover, these statements must be preceded by await, which is inserted automatically when VPython programs are transpiled to JavaScript but must be entered explicitly into a JavaScript program. Here is what these JavaScript statements must look like, including the five other VPython functions that take time to complete and therefore also need await:

<div class="highlight-default notranslate"><div class="highlight"><pre>await rate(30)

await sleep(2)

await scene.pause()

await scene.waitfor('click')

await scene.capture(filename)

await input()

await winput()

await get_library(webaddress)

await read_local_file(scene.title.anchor)

</pre></div>

</div>

If you write your own function or class method that includes any of these waiting statements, you must prepend async to the function or method declaration, and all calls to these functions or methods must be prepended with await, as with the functions shown above and in the runnable html file shown at the end of this article.

Also, just before calling input() or winput(), it’s a good idea to insert “sleep(0.1)” in order to make sure that the display is up to date before waiting for input.

At glowscript.org your program is wrapped in an async function, which makes it possible to use await outside any of your functions. If you do not use glowscript.org to prepare your JavaScript program, you may need to wrap your program in an async function, as shown in the runnable html file below. It is not possible to use await outside an async function.

</section>

<h2>Operator overloading for vectors<a class="headerlink" href="#operator-overloading-for-vectors" title="Permalink to this heading">¶</a></h2>

Something that is automatic at glowscript.org for JavaScript programs as well as for VPython programs is the “operator overloading” that permits vector operations such as <code class="docutils literal notranslate">let v = v1+v2</code>, where <code class="docutils literal notranslate">v1</code> and <code class="docutils literal notranslate">v2 ``are vectors. If you do not use glowscript.org to prepare your JavaScript program, you will need to write this statement in the form ``v1.add(v2)</code>. Similarly, <code class="docutils literal notranslate">v1-v2</code> would be written <code class="docutils literal notranslate">v1.sub(v2)</code>, <code class="docutils literal notranslate">5*v</code> would be written <code class="docutils literal notranslate">v.multiply(5)</code>, and <code class="docutils literal notranslate">v/5</code> would be written <code class="docutils literal notranslate">v.divide(5)</code>. An alternative is to pass your program through glowscript.org and click “Share or export this program” to obtain an operator-overloaded version of your program.

</section>

<h2>New in version 3.0<a class="headerlink" href="#new-in-version-3-0" title="Permalink to this heading">¶</a></h2>

<li>Linkage of axis and size: Starting with version 3.0, JavaScript programs, like VPython programs, link changes in an object’s axis to its size, and changes in its size to its axis. Prior to version 3.0, JavaScript programs did not perform such linkage, and the arrow object had a special attribute <code class="docutils literal notranslate">axis_and_length</code> instead of <code class="docutils literal notranslate">axis</code>. Using <code class="docutils literal notranslate">axis_and_length</code> now will cause an error.</li>

<li>Default sphere radius now 1: A related matter is that, for historical reasons, the default radius of a VPython sphere is 1, which is now also the default radius of a JavaScript sphere. Formerly a JavaScript sphere did not have a radius attribute, and its default size was <code class="docutils literal notranslate">vec(1,1,1)</code>, so the radius was 0.5.</li>

</ul>

</section>

<h2>JavaScript class constructor method<a class="headerlink" href="#javascript-class-constructor-method" title="Permalink to this heading">¶</a></h2>

<div class="highlight-default notranslate"><div class="highlight"><pre>class C {

constructor(n) {

C.n = n // a class variable

this.x = 20 // a class instance variable

}

async init(y) {

this.y = y

print("Sleep...")

await sleep(2)

print(C.n, this.x, this.y) // displays 10 20 30

}

let a = new C(10)

await a.init(30)

</pre></div>

</div>

</section>

<h2>Passing methods as arguments to other functions<a class="headerlink" href="#passing-methods-as-arguments-to-other-functions" title="Permalink to this heading">¶</a></h2>

Suppose you create a class named C with an instance named c1 and a method c1.m. You might wish to create a reference in the form <code class="docutils literal notranslate">let cm = c1.m</code> (no parentheses) and pass it to a function <code class="docutils literal notranslate">f</code> in the form <code class="docutils literal notranslate">f(cm)</code>. In that case, you need to write the assignment to cm like this: <code class="docutils literal notranslate">let cm = c1.m.bind(c1)</code>. Again, this is done automatically for VPython programs.

</section>

<h2>A runnable html file<a class="headerlink" href="#a-runnable-html-file" title="Permalink to this heading">¶</a></h2>

Web VPython programs may be exported to html. The following runnable html file is produced from Javascript. Adjust the version number for the glow library appropriately, then save the following as an .html file and open it in a browser (double-click):

window.__context = { glowscript_container: $("#glowscript").removeAttr("id") }

async function __main__() { // async wrapper permits use of await outside your own functions

var vector = vec // optional: makes vector a synonym of the fundamental vec

let scene = canvas()

let b = box({color:color.cyan})

async function f(obj) { // needs async because f() contains an await

let t = clock()

while (true) {

await rate(100)

obj.rotate({angle:0.01, axis:vec(0,1,0)})

if (clock()-t > 3) break

}

return 25

}

let x = await f(b) // needs await (inside async __main__) because f() contains an await

print(x)

} // end of __main__ wrapper

__main__()

</script>

</div>

</pre></div>

</div>

</section>

</div>

<h1 class="logo"><a href="index.html">VPython</a></h1>

<h3>Navigation</h3>

Contents:

<ul>

<li class="toctree-l1"><a class="reference internal" href="objects.html">3D Objects</a></li>

<li class="toctree-l1"><a class="reference internal" href="rate.html">Animations</a></li>

<li class="toctree-l1"><a class="reference internal" href="canvas.html">Canvases</a></li>

<li class="toctree-l1"><a class="reference internal" href="cameraAndLights.html">Camera and Lighting</a></li>

<li class="toctree-l1"><a class="reference internal" href="colorOpacityGlow.html">Color/Opacity/Glow</a></li>

<li class="toctree-l1"><a class="reference internal" href="makeshapes.html">Design New Objects</a></li>

<li class="toctree-l1"><a class="reference internal" href="file.html">Files/Libraries</a></li>

<li class="toctree-l1"><a class="reference internal" href="graph.html">Graphs</a></li>

<li class="toctree-l1"><a class="reference internal" href="math.html">Math Functions</a></li>

<li class="toctree-l1"><a class="reference internal" href="workwithobjects.html">Object Attachments</a></li>

<li class="toctree-l1"><a class="reference internal" href="rotation.html">Rotation</a></li>

<li class="toctree-l1"><a class="reference internal" href="textoutput.html">Text output</a></li>

<li class="toctree-l1"><a class="reference internal" href="texture.html">Textures</a></li>

<li class="toctree-l1"><a class="reference internal" href="userinput.html">User Input</a></li>

<li class="toctree-l1"><a class="reference internal" href="webvs7.html">VPython/WebVpython</a></li>

<li class="toctree-l1"><a class="reference internal" href="license.html">VPython license</a></li>

<li class="toctree-l1"><a class="reference internal" href="resources.html">Additional Resources</a></li>

</ul>

<h3>Related Topics</h3>

<ul>

<li><a href="index.html">Documentation overview</a><ul>

</ul></li>

</ul>

</div>

<h3 id="searchlabel">Quick search</h3>

</form>

</div>

</div>

</div>

& <a href="https://github.com/bitprophet/alabaster">Alabaster 0.7.12</a>

<a href="_sources/programJS.rst.txt"

rel="nofollow">Page source</a>

</div>

</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

programJS.html

Latest commit

History

programJS.html

File metadata and controls