Author Archives: Mr. M

3d Day 2

Step 1) create a 5 sided

5 sided polygon

Step 2)  Create a line for the revolve

line for revolve

Step 3)   Make that line parallel to the line of the polygon  using the parallel constraint

parallel line for revolve

Step 4) Revolve the polygon over the line:

revolve 3

Step 5) That is a sideways look at the front. Change the 3-d angle and you can see this :

revolve 4

 

Step 5)  Create a rectangle and dimension it to 20×30 and use an extrude on it.

 

 

Screenshot and submit to google

3-d First Forays

Step 1) Create a rectangle and dimension to 30 by 50 as shown

dimension recangle

Step 2)  Create your first extrude . Use 30 mm as shown in the video below:

first extrude

Step 3)  Let’s make  it a shell :

first shell

Step 4)  Now let’s try something different. Delete the shell and delete the extrude, then delete the sketch the start all over.

 

Step 5) Draw a circle and a line. Don’t worry to much about the dimensions. Just make it look close to this :

circle and line

Step 6)   Create a revolve using the line as the axis as shown in this video:first revolve

 

Step 7) Mess around with the 3-d shapes and do something else…make another revolve..or another extrude or one of the others. Submit a screenshot of this below the do now

 

Onshape Do Now Partial Circle

Step 1) Create a 30 mm horizontal line with its right endpoint on the origin.

dimension 30 mm line from origin

Step 2)  Add a point to the line, then use then use the midpoint constraint so that it is a midpoint.

add point then use midpoint costraint

Step 3) Make a 3 point arc starting at the midpoint and centered on the left end of the line segment:

make a 3 poin tarc starting at the midpoint

Step 4) Dimension radius to 15

dimension the arcs radius to 15

Step 5)  Create an inscribed hexagon using the polygon tool

inscribed hexago

Step 6)  Remove some parts of the hexagon using the cut tool:

cutt tool to remove some parts of the polygon

Step 7) Make a vertical and a horizontal lines  as shown below. Note they are dimensioned.

vertical and horizontal lines

 

Step 8)

spline tool

When done, paste a screenshot in the google doc, then go here 

 

Onshape Practice- Disappearing Mirror Line

 

 

Step 1) Make sure you’re workspace units are millimeters

Step 2) Create a 3 point arc. Dimensioned to a radiu of 30, then add a vertical line:

3 point arc w line

 

Step 3) Dimension the vertical line:

dimensioned-line

 

Step 4) Use the spline tool to create this :

spline tool

Step 5)  Add 2 circles and dimension both of them to 12 (smaller ) and 50 (outer) as shown below:

2 circles-dimensioned

 

Step 6) Select the cut tool

cut tool

 

Step 7) remove the indicated region:

cut tool used

 

Step 8) Select the mirror icon and the mirror line indicated:

mirror line selection 0

Step 9) Reflect everything!

mirror-this-stuff

 

Step 10) Use the scissor tool to delete the mirror line.

delete mirror line

 

Step 11) Add 4 shapes of your choosing (line, rectangle, circle etc). Make Sure that all of the shapes are dimensioned. Submity your screenshot in google classroom assignment.

Hexagon in onshpae

 

Step 1) Use the polygon tool to make a pentagon (5 sides)

Click to enlarge

Step 2) Dimension the side to 25

dimension pentagon

 

Step 3)  Add a point then use the midpoint constraint on it

point then midpoint

Step 4) Draw a construction line to the midpoint

construction line to midpoint

Step 5)  Use the cut tool to remove half the polygon

half poly

Step 6)  Add 2 lines

added

Triangle Mirrored and Inscribed

Do Now

left-side-triangle

Step 1) Create the right triangle above. The hypotenuse dimensioned to 30, the vertical altitude is a construction line and the the other leg is dimensioned to 21.

 

mirror over construction

Step 2) Mirror the triangle over the construction line

Result :

result of mirror

Step 3)  Circumscribe circle that is dimensioned to 42

Final result:

circumbscribe circle

 

 

Complex Shape 1 with Arcs and Constraints

  1. Use the front plane and the make a 3 point arc centered at the origin 3 point arc
  2.  Picture:screenshot.1
  3.  Use the dimension tool   to set the radius to 20 mm : dimension the arc
  4. Resulting shape : screenshot.2
  5.  create 2 lines that are attached to the circle and that meet at a point outside the circle. Dimensions don’t matter, yet, for these. Your document should look similar to (does not have to be exact
  6. : two secant lines
  7.  Use the Tangent tool to make both lines tangent . You must select both the circle and the line as shown below:2 tangents
  8.   Create a construction line from the end points of the arc:

    construction line-diameter

    Click to enlarge image

  9. Create a Rectangle, as shown in the video below. Watch the end carefully for how to make the points coincident. Your interconnected shape should move as shown below:rectnagle w coincident points
  10.  Use the Dimension tool to make sure that the height of the rect is 65 MM :

    Click to enlarge image

    Click to enlarge image

  11. Add a midpoint to the bottom of the rectangle:Click to enlarge
  12. Make a Circle centered at that midpointbottom center
  13. Dimension the bottom circle so that its diameter is 35 : dimension bottom circle
  14.  As you can see only the top tangent line is blue. So that’s the last item to dimension! Dimension it to 42 :
  15. top is 42
  16. Use the trim tool to remove the top half of the circle and its diameter line:trim interior
  17. Now your turn. In the same document. Create a complex separate shape. This shape should include a minimum of 5 simple shapes. 1 of the shapes must be an arc or a semicircle. All of the shapes must be dimensioned.

Constraints Additional Practice

 

Step 1)  Create a new sketch on the front plane. There should only be 1 sketch that you use

Step 2)  Create a circle and then use the “coincident ” button to center it on the origin by clicking on the origin, the center of the circle :

center circle with coincident

 

Step 3) make its radius 15 MM by using the dimension tool

dimension circle with button

Here’s what your document should now look like :

15 mm circle

Step 4)  Do the same thing with a second circle . Make its radius 30

Picture: 30 mm circle

Step 5) Make a line that touches the circle, anywhere. Like the picture below:

secant line

 

 

Step 5) Find the “tangent line”  constraint (this might be a dropdown)tangent line

 

Step 6) Here’s how you create a tangent line.

Click the circle , click the line you made, then press “tangent line ”

 

how to make tangent line

Step 7)  Make a construction line from the tangent line to the bottom

construction line

 

Step  8) Make a second tangent line as shown:

tangent line 2

 

Step 8) Dimension both tangent lines so that they are 60 MM each

 

Step 9) Add a second shape that is dimensioned.

4th Quarter Project [24-25]

Examples

Objective: To create a complex, industry level, project that builds off the skills we learned this year.  There is some flexibility here in that you can diverge some from pure web development. You must learn at least one new technology  to create a unique deliverable.

Your grade will be based on the level of complexity of your final project. I have listed some examples of technologies to learn and rated their general complexity. Ultimately, complexity will be evaluated by me and you are welcome to ask for feedback on where the complexity of your project will land you.

Note: There are huge numbers of technologies, frameworks etc, and I  am not familiar with many of the ones below.  The purpose here is for you to learn something, yourself, as web developers are often forced to do,  in the real world.  If you think you will need help, I suggest going with Phaser because  many students will do it and you can help each other . I have limited knowledge of Phaser. I can help with general debugging and general strategies.

Some Prior Games : https://mrmonline.org/supa-2019-games/

 

Some Example of New Technologies

Front End Frameworks
  • Phaser ( The most popular 4th quarter project topic is to create phaser games housed in a bootstrap based website). There is a great range in complexity using Phaser. See bottom of page for some good phaser resources.
  • Vue
Back End Frameworks for PHP

Example Projects, probable complexity and grade.

The table below lists  example technologies and provides a likely grade for its general description and complexity level. If something is classified as an “add-on,” then it is a way to increase complexity but should .

Often the grades are a “range” because it depends on what, ultimately your project does. Take “vue” for instance. This is a very popular, very modern javascript framework so it can be quite complex, but ultimately it depends on what your program actually does that will determine the final grade.

Technology  Example/ Complexity overview Complexity lvl Grade
Phaser (meh) Edits one of the pre-built games on phaser.io, nothing much new very low C-
Phaser (moderate) Creates one new game, but it is relatively simple (asteroids) and submits 1 page website that uses bootstrap Moderate C+
Phaser (good) Creates completely new complex game (maybe uses physics or other unique coding) moderate-high B+/ A
Node.js/Gulp   Learns how to use nodejs and employs Gulp to improve workflow Moderate add on
 Remote git Learns how to push and pull from remote git repo on github low add-on
 Vue Learns how to use the vue.js framework for javascript development high B /A-
Foundation Learn a bootstrap alternative and create several web pages moderately low C+
Angular Creates a multi page website with the angular .js framework high B/A
Mathjax Learns how to integrate the Mathjax math library for rendering professional looking mathematics low add-on
Vim Consistently edits with Vim . I will quiz you on how to use VIM and I will expect to see you editing with VIM during class moderate add on

List of other utilities and libraries to use:

Notes: these can be combined to add complexity and professionalism. For instance, you can create a multipage website based on Vue and some of the pages can house phaser games that you create. This has the potential of an A+, depending on the Phaser GAME(S).

Not comfortable with Programming? Here is a multi technology example that will get a B-:

This is an example that will get people who are not very comfortable with programming into the “B” range: Learn how to use Foundation, or another bootstrap alternative, and also how to integrate Mathjax to display math equations. You can create a multi page math website full of equations. You could add using remote git or Gulp to get the grade up even a bit more.

Javascript framework comparisons : https://www.codeinwp.com/blog/angular-vs-vue-vs-react/

Other resources

https://emanueleferonato.com/  – Great Javascript game dev site

  • Simple phaser game tutorial using just javascript (no typescript)   here 

https://photonstorm.com/ – same


Sample Proposal

New Technology : Phaser (main) plus using Vim as add-on

Rough Overview

I will be using Phaser.io to develop 2 original complex games, 1 of which will involve phaser physics. Both games will be housed in a simple bootstrap website and will use php and mysql to allow for

  • user registration
  • user login
  • high scores tables to be stored in a database

I will also be actively developing using the Vim editor (to get some extra points)

Deliverables :

2 full games that can be started, paused, re-started, replayed and allow for the user to save his/her scores to a website that they log into. The site will have a mobile friendly design including for game play.

 


 

 

 

Prior Version