Verarbeitung: Instructables Logo-Animation

3 Schritt:Schritt 1: Was Sie benötigen? Schritt 2: Die einfache Pendel Schritt 3: Der instructable Logo-Animation

Verarbeitung: Instructables Logo-Animation

Verarbeitung: Instructables Logo-Animation

Hey alle,

Haben Sie sich jemals gefragt, über Logoanimationen am Ende der Anzeige. Nun, ich habe und ich denke, sie sind erstaunlich. Hier ist eine Anleitung, um ein für sich selbst zu machen. Wir werden zu verwenden Verarbeitung wie unsere Entwicklungsumgebung. Die Verarbeitung ist ein Open-Source-Programmiersprache und Entwicklungsumgebung (IDE) für die elektronische Kunst, Medienkunst errichtet und visuelle Gestaltung Gemeinden mit dem Ziel der Vermittlung der Grundlagen der Computerprogrammierung in eine visuelle Kontext. Ich entschied mich für die Verarbeitung, weil sein der beste Weg, ein Anfänger-Programmierung zu erlernen. Darüber hinaus gibt es viele refrences , Bibliotheken und Tutorials zur Verfügung. Heutzutage gibt es viele Animationen auf die Verarbeitung (Beispiel: MIT Media Lab logo) gebaut.


Hier ist die endgültige Logo-Animation, die wir in dieser instructables machen. Ich machte einen instructables Animation, weil ich denke instructables.com ist genial und sie tun, ein großes Werk.


Wie ich bin ein Anfänger, um die Verarbeitung, habe ich dieses Tutorial geschrieben, so dass alle Anfänger in der Lage, diese instructable verstehen. Ok, so lässt loszulegen.

Schritt 1: Was Sie benötigen?


  1. Programmierprojekte in der Regel nichts mehr als einem Laptop (Material her) erforderlich. Programmierung wie eine Animation erfordert:
    Viel Geduld Leidenschaft und Entschlossenheit Rigorose Debuggen Kenntnis der Programmiersprache Internetanschluss Ein wenig Wissen über die Physik der Mechanik.
    Außer, dass Sie benötigen Ressourcen, die Sie in Ihr Programm importieren. Normalerweise Ressourcen bestehen aus Bildern, Videos, Schriften etc.
    Wenn Sie ein Anfänger sind, dann müssen Sie üben, Grundformen und ihrer Bewegung. Um Ihnen eine Vorstellung davon habe ich ein einfaches Pendel im nächsten Schritt gemacht.

Schritt 2: Die einfache Pendel


  1. In diesem Schritt werden wir versuchen, ein Gefühl dafür zu bekommen, wie es ist wie das Schreiben eines Codes in der Verarbeitung. Wir werden machen einfaches Pendel visuelle Simulation, in der wir die Erdbeschleunigung (g = 9,8 m / s ^ 2 standardmäßig) variieren. Dies bedeutet also, wir werden erfahren, wie ein einfaches Pendel reagiert, wenn auf einem anderen Planeten von verschiedenen Gravitationskonstante übernommen.
    Für dieses Projekt pflegen Sie werden alle Ressourcen benötigen, wie werden wir die Nutzung von Grundformen wie Kreis und Linien, die bereits in der Verarbeitung zur Verfügung stehen. Eines der schönsten Merkmale der Verarbeitung ist, dass man direkt Anwendung exportieren, auf Windows, iOS etc. Ich habe die Win64-Anwendung und Code für einfaches Pendel als Anhang beigefügt.

Schritt 3: Der instructable Logo-Animation

  1. Verarbeitung: Instructables Logo-Animation

    Bei diesem Projekt werden wir brauchen Ressourcen wie Bild instructables Roboter, JPEG Alphabete I, N, S, T, R, U, C, T, A, B, L, E, S und maßgeschneiderte Schriftart. Ich habe alle diese in ein Rar-Datei, die Sie in Anhänge können komprimiert. Sie müssen diese Ressourcen in den gleichen Ordner, in dem Ihr Code befindet sich sonst nicht funktionieren extrahieren.
    Das nächste, was ist der Code. Ich werde den Pseudo-Code des Projekts in Schritten erklären:
    Deklarieren Sie Bildobjekte (Beispiel: PImage imgrobo;) Deklarieren Font (Beispiel: Pfont font;) schreiben Leere Setup (Befehle, die Sie im Setup-Platz sind einmal initialisiert) Stellen Sie die Größe des Fensters (in unserem Fall haben wir sie bis 1080 von 720 gesetzt Pixel) Importieren von Bildern (Beispiel: imgrobo = loadimage ("imgrobo.gif");) Last Schriftart und Schriftgröße eingestellt Set von Werten zu Variablen-Setup wird beendet. Variablen deklarieren schreiben Leere draw (Anweisungen, die Sie in Setup zu platzieren sind in Schleife initialisiert) Setzen Sie Hintergrundfarbe (weiß seine in diesem Projekt, 255 RGB-Code) Übersetzen Herkunft zum Zentrum Mit einer if-Bedingung und eine Zählervariable übersetzen instructables robo.jpeg aus rechts nach links Nach diesem Brief zu übersetzen Bild instructables alternate vertikal mit übersetzen Funktion Sobald das Schreib getan Entdecken Teilen Sie und schütteln Sie sie, wenn die Maus auf sie gesetzt wird. Dies kann durch die Einrichtung und wenn die Bedingung, dass, wenn mouseX und mouseY ist auf den Text x, y-Koordinate der Text wird nach dem Zufallsprinzip durch + oder-1 verändern erreicht werden. Sie können Random-Funktion verwenden (random (-1, + 1);).
    Jetzt, da wir den Code geschrieben, um seine Zeit ein Video zu machen. Das ist wirklich einfach und kann von der Verarbeitung Anwendung selbst durchgeführt werden. Zunächst präsentieren diese Zeile am Ende der Ziehfunktion (saveFrame () "Frame / #### png.";). Was das bedeutet ist, dass jedes Mal Unentschieden Funktion läuft es fängt die visuelle Frame in eine PNG-Datei und speichern Sie sie in einem Ordner mit dem Namen Frame im gleichen Ordner, in dem Sie Ihren Code wird gespeichert. So erstellen Sie einen Film zu gehen, um die Verarbeitung Anwendung dann Extras -> Movie Maker. Geben Sie den Speicherort der Ordner-Rahmen und fügen Sie beliebige Audio, wenn Sie wollen. Ich habe Screenshot von diesem Schritt in Fotos oben angebracht.


    Die Logo-Animation fertig ist. Schicken Sie mir, wenn Sie eines erstellen. Viel Spaß beim Lesen.