SlideShare ist ein Scribd-Unternehmen logo
1 von 15
ARTDM 170, Week 14:
Scripting Mechanical and
     Organic Motion
          Gilbert Guerrero
         gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-170/
Keyboard input

• If your ActionScript game class is
  called by a Movie symbol, the user
  input may not be recognized until the
  user clicks the screen!
• To fix this, add a line of code before
  your keyboard event listeners:

  stage.focus = stage;
Processing
Download Processing
    http://processing.org
Open Processing
Exporting

• Sketches run as Java Applets
• Sketches can be exported to several
  formats:
 ‣ Java applet with index.html page for
   web borwsers


 ‣ Windows, Mac, and Linux
   applications (use menus)
Sine wave
             1                                 1
sin(angle)




                                  sin(angle)
             0                                 0




             -1                                -1
               90   180     270
                    angle
Mechanical Ball Sketch
float angle = 0.0;     //current angle
float speed = 0.1;     //speed of motion
float radius = 50.0;   //range of motion

void setup() {
  size(200, 200);
  noStroke();
  smooth();
}

void draw() {
  fill(0,12);
  rect(0,0,width,height);
  fill(255);
  angle += speed;
  float sinval = sin(angle);
  float y = 100 + (sinval*radius);
  ellipse(100, y, 80, 80);
}
Add cosine
float   cosval = cos(angle);
float   sinval = sin(angle);
float   x = 100 + (cosval*radius);
float   y = 100 + (sinval*radius);

ellipse(x, y, 80, 80);
Warp it
float sx = 1.0;
float sy = 0.5;

float x = 100 + (cosval*radius);
float y = 100 + (sinval*radius);

float x2 = x + cos(angle*sx) * radius/2;
float y2 = y + sin(angle*sy) * radius/2;
ellipse(x2, y2, 6, 6);
Organic motion
angle += random(-0.2,0.2);

 x += cos(angle) * speed;

 y += sin(angle) * speed;

 print("x="+x+", y="+y+"n");

 translate(x,y);

 rotate(angle);

 line (0, -20, 0, 20);
Final Projects
November                        December
11            18        25         2            9           16
                                                                 Last day
                                                                 of class
     Design background and
     game elements. Embed
     in game symbol
                                                    Present final projects
                                                    (two days)
                Script user interaction and
                movement of game elements


                                       Add scoring and
                                       game over trigger
Work on your final
    projects
Homework, due Nov 25

• Work on your final projects
 ‣ Script user interaction and
   movement of game elements
Thank You

Weitere ähnliche Inhalte

Ähnlich wie ARTDM 170, Week 14: Organic

Stefan stolniceanu spritekit, 2 d or not 2d
Stefan stolniceanu   spritekit, 2 d or not 2dStefan stolniceanu   spritekit, 2 d or not 2d
Stefan stolniceanu spritekit, 2 d or not 2d
Codecamp Romania
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconf
tutorialsruby
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconf
tutorialsruby
 
iBasket: The story of an HTML5 game
iBasket: The story of an HTML5 gameiBasket: The story of an HTML5 game
iBasket: The story of an HTML5 game
Iker Jamardo
 

Ähnlich wie ARTDM 170, Week 14: Organic (20)

Stefan stolniceanu spritekit, 2 d or not 2d
Stefan stolniceanu   spritekit, 2 d or not 2dStefan stolniceanu   spritekit, 2 d or not 2d
Stefan stolniceanu spritekit, 2 d or not 2d
 
Stefan stolniceanu spritekit, 2 d or not 2d
Stefan stolniceanu   spritekit, 2 d or not 2dStefan stolniceanu   spritekit, 2 d or not 2d
Stefan stolniceanu spritekit, 2 d or not 2d
 
用 OPENRNDR 將 Chatbot 訊息視覺化
用 OPENRNDR 將 Chatbot 訊息視覺化用 OPENRNDR 將 Chatbot 訊息視覺化
用 OPENRNDR 將 Chatbot 訊息視覺化
 
Cocos2d 소개 - Korea Linux Forum 2014
Cocos2d 소개 - Korea Linux Forum 2014Cocos2d 소개 - Korea Linux Forum 2014
Cocos2d 소개 - Korea Linux Forum 2014
 
CreateJS
CreateJSCreateJS
CreateJS
 
Intro to computer vision in .net
Intro to computer vision in .netIntro to computer vision in .net
Intro to computer vision in .net
 
Introduction to Coding
Introduction to CodingIntroduction to Coding
Introduction to Coding
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconf
 
building_games_with_ruby_rubyconf
building_games_with_ruby_rubyconfbuilding_games_with_ruby_rubyconf
building_games_with_ruby_rubyconf
 
stackconf 2022: Are all programming languages in english?
stackconf 2022: Are all programming languages in english?stackconf 2022: Are all programming languages in english?
stackconf 2022: Are all programming languages in english?
 
Skia & Freetype - Android 2D Graphics Essentials
Skia & Freetype - Android 2D Graphics EssentialsSkia & Freetype - Android 2D Graphics Essentials
Skia & Freetype - Android 2D Graphics Essentials
 
Processing presentation
Processing presentationProcessing presentation
Processing presentation
 
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android
 
C++ game development with oxygine
C++ game development with oxygineC++ game development with oxygine
C++ game development with oxygine
 
Yavorsky
YavorskyYavorsky
Yavorsky
 
iBasket: The story of an HTML5 game
iBasket: The story of an HTML5 gameiBasket: The story of an HTML5 game
iBasket: The story of an HTML5 game
 
Building a Visualization Language
Building a Visualization LanguageBuilding a Visualization Language
Building a Visualization Language
 
Beginning android games
Beginning android gamesBeginning android games
Beginning android games
 
Game development via_sprite_kit
Game development via_sprite_kitGame development via_sprite_kit
Game development via_sprite_kit
 
Low Level Graphics & OpenGL
Low Level Graphics & OpenGLLow Level Graphics & OpenGL
Low Level Graphics & OpenGL
 

Mehr von Gilbert Guerrero

ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
Gilbert Guerrero
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
Gilbert Guerrero
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
Gilbert Guerrero
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
Gilbert Guerrero
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
Gilbert Guerrero
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
Gilbert Guerrero
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
Gilbert Guerrero
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
Gilbert Guerrero
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
Gilbert Guerrero
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
Gilbert Guerrero
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
Gilbert Guerrero
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
Gilbert Guerrero
 

Mehr von Gilbert Guerrero (20)

Designing for Skepticism and Bright Sunlight
Designing for Skepticism and Bright SunlightDesigning for Skepticism and Bright Sunlight
Designing for Skepticism and Bright Sunlight
 
ARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QAARTDM 171, Week 17: Usability Testing and QA
ARTDM 171, Week 17: Usability Testing and QA
 
Artdm 171 week15 seo
Artdm 171 week15 seoArtdm 171 week15 seo
Artdm 171 week15 seo
 
Artdm 170 week15 publishing
Artdm 170 week15 publishingArtdm 170 week15 publishing
Artdm 170 week15 publishing
 
ARTDM 171, Week 14: Forms
ARTDM 171, Week 14: FormsARTDM 171, Week 14: Forms
ARTDM 171, Week 14: Forms
 
ARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + ArraysARTDM 170, Week 13: Text Elements + Arrays
ARTDM 170, Week 13: Text Elements + Arrays
 
ARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation SchemesARTDM 171, Week 13: Navigation Schemes
ARTDM 171, Week 13: Navigation Schemes
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
Artdm 171 Week12 Templates
Artdm 171 Week12 TemplatesArtdm 171 Week12 Templates
Artdm 171 Week12 Templates
 
ARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page CompsARTDM 171, Week 10: Mood Boards + Page Comps
ARTDM 171, Week 10: Mood Boards + Page Comps
 
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper PrototypesARTDM 170, Week 10: Encapsulation + Paper Prototypes
ARTDM 170, Week 10: Encapsulation + Paper Prototypes
 
ARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User ExperienceARTDM 171, Week 9: User Experience
ARTDM 171, Week 9: User Experience
 
ARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping CyberspaceARTDM 171, Week 7: Remapping Cyberspace
ARTDM 171, Week 7: Remapping Cyberspace
 
ARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting InteractivityARTDM 170, Week 7: Scripting Interactivity
ARTDM 170, Week 7: Scripting Interactivity
 
Artdm170 week6 scripting_motion
Artdm170 week6 scripting_motionArtdm170 week6 scripting_motion
Artdm170 week6 scripting_motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 
Artdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting MotionArtdm170 Week6 Scripting Motion
Artdm170 Week6 Scripting Motion
 

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
SOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning PresentationSOC 101 Demonstration of Learning Presentation
SOC 101 Demonstration of Learning Presentation
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Interdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptxInterdisciplinary_Insights_Data_Collection_Methods.pptx
Interdisciplinary_Insights_Data_Collection_Methods.pptx
 
How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17How to Add New Custom Addons Path in Odoo 17
How to Add New Custom Addons Path in Odoo 17
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)Jamworks pilot and AI at Jisc (20/03/2024)
Jamworks pilot and AI at Jisc (20/03/2024)
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
How to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptxHow to setup Pycharm environment for Odoo 17.pptx
How to setup Pycharm environment for Odoo 17.pptx
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.ICT role in 21st century education and it's challenges.
ICT role in 21st century education and it's challenges.
 

ARTDM 170, Week 14: Organic

  • 1. ARTDM 170, Week 14: Scripting Mechanical and Organic Motion Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/artdm-170/
  • 2. Keyboard input • If your ActionScript game class is called by a Movie symbol, the user input may not be recognized until the user clicks the screen! • To fix this, add a line of code before your keyboard event listeners: stage.focus = stage;
  • 4. Download Processing http://processing.org
  • 6. Exporting • Sketches run as Java Applets • Sketches can be exported to several formats: ‣ Java applet with index.html page for web borwsers ‣ Windows, Mac, and Linux applications (use menus)
  • 7. Sine wave 1 1 sin(angle) sin(angle) 0 0 -1 -1 90 180 270 angle
  • 8. Mechanical Ball Sketch float angle = 0.0; //current angle float speed = 0.1; //speed of motion float radius = 50.0; //range of motion void setup() { size(200, 200); noStroke(); smooth(); } void draw() { fill(0,12); rect(0,0,width,height); fill(255); angle += speed; float sinval = sin(angle); float y = 100 + (sinval*radius); ellipse(100, y, 80, 80); }
  • 9. Add cosine float cosval = cos(angle); float sinval = sin(angle); float x = 100 + (cosval*radius); float y = 100 + (sinval*radius); ellipse(x, y, 80, 80);
  • 10. Warp it float sx = 1.0; float sy = 0.5; float x = 100 + (cosval*radius); float y = 100 + (sinval*radius); float x2 = x + cos(angle*sx) * radius/2; float y2 = y + sin(angle*sy) * radius/2; ellipse(x2, y2, 6, 6);
  • 11. Organic motion angle += random(-0.2,0.2); x += cos(angle) * speed; y += sin(angle) * speed; print("x="+x+", y="+y+"n"); translate(x,y); rotate(angle); line (0, -20, 0, 20);
  • 12. Final Projects November December 11 18 25 2 9 16 Last day of class Design background and game elements. Embed in game symbol Present final projects (two days) Script user interaction and movement of game elements Add scoring and game over trigger
  • 13. Work on your final projects
  • 14. Homework, due Nov 25 • Work on your final projects ‣ Script user interaction and movement of game elements