CN114676365B - Courseware making method based on CANVAS mechanism analysis and two-dimensional simulation - Google Patents
Courseware making method based on CANVAS mechanism analysis and two-dimensional simulation Download PDFInfo
- Publication number
- CN114676365B CN114676365B CN202210025662.9A CN202210025662A CN114676365B CN 114676365 B CN114676365 B CN 114676365B CN 202210025662 A CN202210025662 A CN 202210025662A CN 114676365 B CN114676365 B CN 114676365B
- Authority
- CN
- China
- Prior art keywords
- canvas
- webpage
- motion analysis
- courseware
- analysis
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000004458 analytical method Methods 0.000 title claims abstract description 36
- 238000004088 simulation Methods 0.000 title claims abstract description 29
- 238000000034 method Methods 0.000 title claims abstract description 15
- 230000001133 acceleration Effects 0.000 claims description 14
- 238000010586 diagram Methods 0.000 claims description 13
- 230000014509 gene expression Effects 0.000 claims description 7
- 238000004806 packaging method and process Methods 0.000 claims description 3
- 238000004364 calculation method Methods 0.000 claims description 2
- 238000006243 chemical reaction Methods 0.000 abstract 1
- 230000003993 interaction Effects 0.000 abstract 1
- 230000007547 defect Effects 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 125000000174 L-prolyl group Chemical group [H]N1C([H])([H])C([H])([H])C([H])([H])[C@@]1([H])C(*)=O 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000001351 cycling effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F30/00—Computer-aided design [CAD]
- G06F30/10—Geometric CAD
- G06F30/12—Geometric CAD characterised by design entry means specially adapted for CAD, e.g. graphical user interfaces [GUI] specially adapted for CAD
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F30/00—Computer-aided design [CAD]
- G06F30/20—Design optimisation, verification or simulation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06Q—INFORMATION AND COMMUNICATION TECHNOLOGY [ICT] SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES; SYSTEMS OR METHODS SPECIALLY ADAPTED FOR ADMINISTRATIVE, COMMERCIAL, FINANCIAL, MANAGERIAL OR SUPERVISORY PURPOSES, NOT OTHERWISE PROVIDED FOR
- G06Q50/00—Information and communication technology [ICT] specially adapted for implementation of business processes of specific business sectors, e.g. utilities or tourism
- G06Q50/10—Services
- G06Q50/20—Education
- G06Q50/205—Education administration or guidance
Landscapes
- Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Business, Economics & Management (AREA)
- General Physics & Mathematics (AREA)
- Geometry (AREA)
- General Engineering & Computer Science (AREA)
- Strategic Management (AREA)
- Educational Technology (AREA)
- Educational Administration (AREA)
- Databases & Information Systems (AREA)
- Computer Hardware Design (AREA)
- Evolutionary Computation (AREA)
- Tourism & Hospitality (AREA)
- Mathematical Analysis (AREA)
- Health & Medical Sciences (AREA)
- Pure & Applied Mathematics (AREA)
- Mathematical Optimization (AREA)
- Computational Mathematics (AREA)
- Human Computer Interaction (AREA)
- Architecture (AREA)
- Data Mining & Analysis (AREA)
- Economics (AREA)
- General Health & Medical Sciences (AREA)
- Human Resources & Organizations (AREA)
- Marketing (AREA)
- Primary Health Care (AREA)
- General Business, Economics & Management (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
The invention provides a method for making courseware based on CANVAS mechanism analysis and two-dimensional simulation, which relates to two parts of mechanism motion analysis and mechanism simulation: the form of html5 is utilized to obtain parameters, and mechanism motion analysis is realized through curves such as angular velocity of a CANVAS CANVAS drawing mechanism; and utilizing CANVAS CANVAS to realize the simulation design of the mechanism. The courseware manufactured by the method is not limited by equipment, has the advantages of high dynamic property and flexibility, can enhance interaction between students and courseware, and promotes conversion of theoretical knowledge of the students to practical operation.
Description
Technical Field
The invention relates to the technical field of teaching by utilizing the Internet, in particular to a method for making courseware based on CANVAS mechanism analysis and two-dimensional simulation.
Background
The mechanism motion analysis is a knowledge point which must be mastered by mechanical professional students and can be flexibly applied, at present, most of teachers rely on books to deduce and explain formulas, the students cannot convert theoretical knowledge into practical operation, if the motion analysis and simulation teaching courseware based on CANVAS are adopted, the teachers can help the teachers to practice and demonstrate the theoretical knowledge, and meanwhile, larger calculated amount contained in the mechanism motion analysis can be saved, and the students can also operate in real time through a mobile phone browser to enhance understanding depth of the knowledge.
At present, platforms or software capable of carrying out mechanism motion analysis and simulation mainly comprise MATLAB, pro/E, solidWorks and the like, and the simulation of the mechanism motion analysis can be realized through programming, but the software is large in size, complex in installation steps and high in price, and the conventional software cannot realize flexible use of multiple platforms, so that each user can not meet the portability requirement because the user has to have related programs and corresponding codes or models.
Disclosure of Invention
The invention aims to overcome the defects of the prior art, and provides a method for manufacturing courseware based on analysis and two-dimensional simulation of a CANVAS mechanism, wherein the courseware is based on html5, the calculation of the size parameters and the motion parameters of the mechanism is realized by using JavaScript, then a motion analysis diagram and a two-dimensional simulation diagram of the mechanism are drawn in the CANVAS CANVAS, and finally the two-dimensional simulation diagram and the motion analysis diagram are integrated to form a finished teaching courseware, and the detailed steps are as follows:
(1) Establishing a form in a webpage by utilizing html5, and drawing a CANVAS CANVAS;
(2) Establishing an analytical expression between the mechanism size parameter and the mechanism motion parameter by using JavaScript according to the mechanism size parameter input by the student in the form;
(3) Dispersing the independent variable according to the value range of the independent variable of the mechanism size parameter, and calculating the angular velocity and the angular acceleration value corresponding to the discrete value by using a for cycle;
(4) Establishing an X-Y axis coordinate system of a mechanism motion analysis curve in a CANVAS CANVAS, wherein the X axis is the variation range of a mechanism independent variable, and the Y axis is corresponding angular velocity and angular acceleration; drawing the angular velocity and angular acceleration values obtained in the previous step in a coordinate system to obtain coordinate points corresponding to the angular velocity and the angular acceleration;
(5) Connecting each coordinate point by using a lineTo () method, so as to draw a mechanism angular speed and angular acceleration curve and realize drawing of a mechanism motion analysis chart;
(6) Establishing a mechanism position analysis type by using JavaScript according to the mechanism size parameters input by students in a form, and solving the size parameter values of other important components in the mechanism;
(7) Drawing each component part of the mechanism by using a lineTo () method in CANVAS according to the size parameter value of the mechanism and the position relation among the components of the mechanism, thereby realizing the drawing of a two-dimensional simulation diagram of the mechanism;
(8) And compiling website navigation pages by using html5 and CSS languages, packaging the mechanism motion analysis webpage and the mechanism simulation webpage by using a hyperlink mode, and integrating the mechanism motion analysis webpage and the mechanism simulation webpage into a complete webpage courseware.
Compared with the prior art, the invention has the following outstanding technical effects:
firstly, the invention can realize the motion analysis and simulation of the mechanism without other software, and can be used only by equipment (such as a mobile phone, a tablet personal computer and the like) with a web browser, thereby expanding the application scene of courseware; and secondly, the invention can interact with students in real time, and the defect that the traditional courseware cannot interact with the students is overcome by inputting the acquired result in the webpage form, so that the class participation of the students is improved.
Drawings
FIG. 1 is an exemplary diagram of a crank and rocker mechanism;
FIG. 2 is a CANVAS-based established X-Y axis coordinate system;
FIG. 3 example of a CANVAS-based crank and rocker mechanism angular velocity profile;
FIG. 4 example of a CANVAS-based crank and rocker mechanism angular acceleration profile;
FIG. 5 is a two-dimensional simulation example of a CANVAS-based crank and rocker mechanism;
fig. 6 is a flow chart for the construction of a simulated teaching courseware based on the analysis of the motion of a mechanism by CANVAS.
Detailed Description
The present invention will be further described with reference to the accompanying drawings, but the scope of the present invention is not limited to the following.
In this embodiment, a crank-rocker mechanism as shown in fig. 1 is taken as an example, and a CANVAS is used to make motion analysis and simulation teaching courseware of the mechanism.
Step 1: and establishing a form in the webpage by using html5, wherein the form is mainly used for collecting the mechanism size parameters input by students, and simultaneously establishing a CANVAS CANVAS with the length of a and the width of b by using a < CANVAS > tag, so as to realize the drawing of a motion analysis diagram of a mechanism and the drawing of a two-dimensional simulation diagram of the mechanism.
Step 2: taking the size of a common crank and rocker mechanism as an example, according to the mechanism size parameters input by students in a form: the length AB of the crank is l 1 The length of the connecting rod BC is l 2 The length of the rocker CD is l 3 The AD length of the frame is l 4 Angular velocity of crank AB is omega 1 The included angle between the crank and the X-axis isAccording to the known parameters, the analytic expression between the mechanism motion parameter and the mechanism size parameter established by using an analytic method is adopted, and the clamping angle between the connecting rod and the X-axis in the crank rocker mechanism is +.>Rocker angle and X-axis clamping angle->The analytical expression of (2) is formula (1)
Wherein the method comprises the steps ofM= + -1, according to formula (1), the angular velocity expression (2) of the connecting rod BC, the rocker CD, the angular acceleration expression (3) of the connecting rod BC, the rocker CD can be further deduced
Programming the analytic expressions by using JavaScript, namely obtaining the included angle between the crank and the X axis by using the input four-bar mechanism parametersAt this time, the angular velocities and angular accelerations of BC and CD.
Step 3: when (when)When the value of (2) is unknown, it can be determined according to +.>Discrete the value range of (a) and build a +.>For cycling in steps of 1 ° with 0-360 °, for (var i= 0;i < 360; i=i+1) {. The term }, the term>Values of 1 °, 2 °, 3 °, … °, respectively corresponding to the angular velocity and the angular velocity, respectively.
Step 4: determining a curve drawing origin according to the CANVAS CANVAS established in the step 1, establishing an X-Y axis coordinate system, wherein the X axis isThe angle of rotation, the Y-axis, is the angular velocity value, as shown in FIG. 2. The default drawing origin of the CANVAS CANVAS is the upper left corner of the CANVAS, the abscissa increases from the left to the right of the screen, and the ordinate increases from the upper to the lower of the screen. But the established origin (0, 0) of the X-Y axis coordinate system has the actual coordinate position (X) 1 ，Y 1 ) When +.>Assigning an X-axis coordinate and assigning a Y-axis coordinate to a corresponding angular velocity value, converting the X-axis coordinate and the Y-axis coordinate (X+X) 1 ，Y 1 -Y), finally available->Corresponding angular velocity coordinate points when the angles are 1 degree, 2 degrees and 3 degrees … degrees.
Step 5: connecting the coordinate points obtained in the step 4 by using a lineTo () method, and carrying out point-to-point connection so as to draw an angular velocity curve, wherein an example is shown in figure 3; the angular acceleration is calculated and drawn in the same way, and an example is shown in fig. 4, so that a motion analysis graph of the mechanism can be obtained.
Step 6: according to the mechanism size parameters input by students in form: the AD length of the frame is l 4 The length of the rocker CD is l 3 The swing angle of the rocker CD isThe stroke speed change coefficient is K, and the polar angle theta can be obtained by substituting the stroke speed change coefficient into the formula (4).
Then optionally select a point D (X) 2 ，Y 2 ) As a fixed hinge. According to the known AD length l 4 Translation on the abscissa gives a point a with a coordinate (X 2 -l 4 ，Y 2 ) The method comprises the steps of carrying out a first treatment on the surface of the Based on the length of the rocker CD 3 And swing angleDrawing two limit positions C 1 D and C 2 D, at this time C 1 Is +.>C 2 Is the coordinates of (a)Finally, according to the fact that the crank and the connecting rod are collinear when the rocker is at two limit positions, AC can be known 1 ＝BC-AB，AC 2 =bc+ab, simultaneous availability (5), then length l of AB and BC is determined 1 And l 2 。
Step 7: according to the coordinate position of A, D points, AD, CD, AB,The length of BC is at any angle in the rotation range (0-360 DEG) of the crank ABBrought into step 2, the angle corresponding to BC, CD can be determined +.>Based on the position between the points, the coordinates of point B can be found as +.>Coordinates of point CFour points A, B, C, D are connected by using a lineTo method in CANVAS, so that two-dimensional simulation of a crank-rocker mechanism is realized, and a specific example is shown in fig. 5.
Step 8: integrating the motion analysis webpage and the mechanism simulation webpage by utilizing a navigation page, compiling a courseware navigation page (index. Html) through html5 and CSS, inserting hyperlinks of the crank rocker mechanism motion analysis webpage and the simulation webpage into the navigation page, < li > < ahref= "jjouyundong. Html" > mechanism motion </a > </li >, packaging all codes into one file, and completing the crank rocker mechanism motion analysis based on CANVAS and the manufacture of simulation teaching courseware.
Although embodiments of the present invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made therein without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.
Claims (1)
1. The method for making courseware based on CANVAS mechanism analysis and two-dimensional simulation comprises the following steps of realizing calculation of size parameters and motion parameters of a mechanism by using JavaScript based on html5, drawing a motion analysis diagram and a two-dimensional simulation diagram of the mechanism in CANVAS CANVAS, and finally integrating the two-dimensional simulation diagram and the motion analysis diagram to form a finished teaching courseware, wherein the detailed steps are as follows:
(1) Establishing a form in a webpage by utilizing html5, and drawing a CANVAS CANVAS;
(2) Establishing an analytical expression between the mechanism size parameter and the mechanism motion parameter by using JavaScript according to the mechanism size parameter input by the student in the form;
(3) Dispersing the independent variable according to the value range of the independent variable of the mechanism size parameter, and calculating the angular velocity and the angular acceleration value corresponding to the discrete value by using a for cycle;
(4) Establishing an X-Y axis coordinate system of a mechanism motion analysis curve in a CANVAS CANVAS, wherein the X axis is the variation range of a mechanism independent variable, and the Y axis is corresponding angular velocity and angular acceleration; drawing the angular velocity and angular acceleration values obtained in the previous step in a coordinate system to obtain coordinate points corresponding to the angular velocity and the angular acceleration;
(5) Connecting each coordinate point by using a lineTo () method, so as to draw a mechanism angular speed and angular acceleration curve and realize drawing of a mechanism motion analysis chart;
(6) Establishing a mechanism position analysis type by using JavaScript according to the mechanism size parameters input by students in a form, and solving the size parameter values of other important components in the mechanism;
(7) Drawing each component part of the mechanism by using a lineTo () method in CANVAS according to the size parameter value of the mechanism and the position relation among the components of the mechanism, thereby realizing the drawing of a two-dimensional simulation diagram of the mechanism;
(8) And compiling website navigation pages by using html5 and CSS languages, packaging the mechanism motion analysis webpage and the mechanism simulation webpage by using a hyperlink mode, and integrating the mechanism motion analysis webpage and the mechanism simulation webpage into a complete webpage courseware.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210025662.9A CN114676365B (en) | 2022-01-11 | 2022-01-11 | Courseware making method based on CANVAS mechanism analysis and two-dimensional simulation |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210025662.9A CN114676365B (en) | 2022-01-11 | 2022-01-11 | Courseware making method based on CANVAS mechanism analysis and two-dimensional simulation |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114676365A CN114676365A (en) | 2022-06-28 |
| CN114676365B true CN114676365B (en) | 2024-03-19 |
Family
ID=82070500
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210025662.9A Active CN114676365B (en) | 2022-01-11 | 2022-01-11 | Courseware making method based on CANVAS mechanism analysis and two-dimensional simulation |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114676365B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107657666A (en) * | 2017-09-28 | 2018-02-02 | 上海理工大学 | A kind of virtual experimental system of Machine Control |
| CN108961418A (en) * | 2018-06-06 | 2018-12-07 | 杭州亿间科技有限公司 | A kind of Knowledge Visualization interface system and method based on virtual three-dimensional space |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10217264B2 (en) * | 2010-06-01 | 2019-02-26 | Vladimir Vaganov | 3D digital painting |
| US20210287138A1 (en) * | 2020-03-12 | 2021-09-16 | Autodesk, Inc. | Learning to simulate and design for structural engineering |
-
2022
- 2022-01-11 CN CN202210025662.9A patent/CN114676365B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107657666A (en) * | 2017-09-28 | 2018-02-02 | 上海理工大学 | A kind of virtual experimental system of Machine Control |
| CN108961418A (en) * | 2018-06-06 | 2018-12-07 | 杭州亿间科技有限公司 | A kind of Knowledge Visualization interface system and method based on virtual three-dimensional space |
Non-Patent Citations (2)
| Title |
|---|
| ADAMS在机械原理课程教学中的应用;杨国太;李飞;;宜春学院学报;20171225(第12期);全文 * |
| 绳牵引绘画机器人设计与实现;饶雪峰;李轲;;桂林航天工业学院学报;20190315(第01期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114676365A (en) | 2022-06-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN100576159C (en) | Method of real-time incremental zooming | |
| CN105278685B (en) | A kind of assisted teaching system and teaching method based on EON | |
| JP5992934B2 (en) | 3D viewing method | |
| CN108073758B (en) | Simulation method and device for wind-induced vibration response of power transmission tower line | |
| CN102945263B (en) | A kind of method for determining multiple access correlation informations accessed between object | |
| CN107967057B (en) | Leap Motion-based virtual assembly teaching method | |
| CN106709132A (en) | Mathematical modeling teaching system | |
| CN114676365B (en) | Courseware making method based on CANVAS mechanism analysis and two-dimensional simulation | |
| CN107292940A (en) | A kind of method for drafting of real-time music spectral vector figure | |
| Salim et al. | Form fostering: A novel design approach for interacting with parametric models in the embodied virtuality | |
| Xin et al. | Application of 3D tracking and registration in exhibition hall navigation interaction | |
| Radinschi et al. | A computer aided study of two perpendicular harmonic oscillations of the same frequency | |
| Mesárošová et al. | Augmented reality as an educational tool of M-learning focused on architecture and urban planning | |
| Jang et al. | Development of Artificial Intelligence Education Contents based on TensorFlow for Reinforcement of SW Convergence Gifted Teacher Competency | |
| CN113609333A (en) | Building sample plate visualization method and device, computer equipment and storage medium | |
| Kasem et al. | E-origami system Eos | |
| Shaik et al. | Comparative Analysis of the Performance of ARCore and WebXR APIs for AR Applications | |
| Sun et al. | Web3D-based online military boxing learning system | |
| CN110955369A (en) | Focus judgment method, device and equipment based on click position and storage medium | |
| CN117853320B (en) | Image mapping method, system and storage medium based on multimedia control | |
| CN113160362B (en) | Resistance strain measurement experiment virtual demonstration implementation method and system | |
| Al Gazar et al. | Usability: Improving UI/UX in Design by challenges of Materials Innovations, International Design Journal, Vol. 13 No. 1,(January 2023) pp 37-56 This work is licensed under a Creative Commons Attribution 4.0 International License International Design Journal Usability: Improving UI/UX in Design by challenges of Materials Innovations Mahmoud Ahmed Gouda Elgazzar Asst | |
| CN113569518B (en) | Set jointed board identification method for PCB engineering files and application thereof | |
| Guangmiao | Research and Development of Virtual Assembly and Machining System for Metal Cutting Petroleum Machinery Based on Kinect v2 | |
| CN109885968B (en) | Motion description modeling method and system for complex motion |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |