p5.jsでイージングを使ってみる - infosmith.biz
最近スケッチの動きにバリエーションを出したくて、先日はp5.jsでのベクトルの使い方をちょっと勉強してみました。 ・p5.jsのベクトルで加速度や引力を扱ってみる ・p5.jsでミニゲーム「メテオロイド」を作ってみた ベクトルのほかに使ってみたかった手法に「イージング」というのがあります。Web系やゲーム系のフロントエンド開発などではおなじみですよね。オブジェクトを動かすときに、動きはじめと終わりの間で移動速度を変化させて、スムーズな動きを演出する方法です。 ・イージングの基本 | Web | Google Developers 実は太古の昔に趣味でFlash（現Adobe Animate CC）を使っていたことがあるのですが、その時はとても簡単にイージングが使えていました。Flashのタイムライン上でアニメーションの開始と終了のフレーム、オブジェクト位置を指定して、その間に「トゥイーン」
p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、エンジニアののびすけです。最近はGKE触って遊んでました！ 発表されたばかりで情報が少ないですね（汗） さて、今日はフロントネタで「p5.js」の話をしてみたいと思います。 p5.jsとは http://p5js.org/ p5.jsは、ProcessingのJavaScript版ライブラリと言えば分かりやすいと思います。 Processingで描画や音声、ゲームなどが作りやすくなっているライブラリです。 また、CanvasやWebAudioなど、最近のHTML5界隈の技術を内部で使っているみたいです。 Webでこういったことをやろうとすると、本来はCanvasやWebAudioといった各々の知識を覚える必要があるのですが、こういったライブラリがまとめてくれると初心者には嬉しいですよね。 使ってみよう プログラミングが初めての方でもチャレンジできるくらい、簡単な書き方になってい
GIFでもっと見る数学の面白さ
もっと見よ！ 物理学生David Whyteさんが、プログラム言語Processingを使って作る数学にまつわるGIF画像。いくら見ても飽きません。いつまででも見てられちゃう、魅入られちゃう。これ見てたら週末終りそうよ…。 source: Bees＆Bombsvia Colossal Jesus Diaz - Gizmodo SPLOID［原文］ （そうこ）
p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
JSで蝶を飛ばしてみるなど | fladdict
今日のスケッチ蝶蝶がいっぱい。 processing.js だいたい理解した。 蝶の群れだけど、boidというよりは、perlin noiseによるフォースフィールドの復習。 定番ですがperlin noiseで作った雲状bitpmapのR値とG値を、XY方向の気流の力として適用する・・・ってアレです。 リハビリリハビリ。 ここ数年こういうコード書いてなかったので、すごい腕が落ち込んでる。 スムーズな方向転換系アルゴリズムを作れないうちに時間切れ。 昔は2〜3時間あれば作れたのに・・・ジジイになったってことか。 ところで、processing.jsの現行バージョン、tint()関数が壊れてませんかね？ フォグでZ-Depth的表現しようとしたら、どうにも動かない。 1日1〜2時間、プライベートの時間にちょこちょこ作って一気にリハビリしたい。 Daniel Shiffman師父の、インタラク
Studio Sketchpad - Processing on Etherpad
Bishop Gorman High School (Stepan) : Flagstaff Academy (Reh) : Münsterlandschule Tilbeck (Trappe) : University Toulouse (Truillet) : 9 Dots (Lee) : Université Paris-Est (Romon) : Seoul National University (Oh) : Muniz Academy (Soto) : KSU Poly (Harding) : Kollafoss (Þorsteinsson) : Colegio Aula (Cozzi) : UC Davis (Mathews) : ACT (Ockerby) : Perth College (Spagnuolo) : Bard College Spring 2016 (O'H
Processingを使ってみた - 強火で進め
Javaだし、大変そう。という先入観が有って今まで触って無かった「Processing」。最近、使い始めてみました。 Processing.org http://processing.org/ ライブラリの充実した環境くらいのイメージだったのですがインストールしたProcessingを起動するとIDEが表示され簡単にプログラムが始めれました。 もっと色々と設定が必要だったり、プログラムは別途エディタを準備する必要が有るかと思っていたので、これはとても嬉しい誤算でした。 IDEはこんな感じです。 「再生マーク」でアプリを実行可能です。 print() や println() でデバック出力などを行った場合には下部の黒い部分に出力されます。 メニューの「Examples...」でこの様なウィンドウを表示できます。これはサンプルコードで、ダブルクリックすると表示されます。 この様にサンプルが本体
モバイルゲームの歴史を年代別にご紹介します。モバイルゲームの成長と今後について詳しく解説していきます。
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
第１回：オリエンテーション
今日の授業は、第１回目の授業ということで、講義の概要の説明を行います。講義の概要を理解した上で、この授業で用いるプログラミング環境である、Processingについての導入を行います。
Karappo Interaction Lab. » Processingでフルスクリーン
FullScreen API for Processing スキャンコンバータを買う覚悟をしていましたが、買わなくて済みそう。（プレゼンテーションモードで出力したのをスキャコンで拡大するしかないのかと思ってました） ちなみに、これは外部ライブラリではないようです。 使い方は簡単、sketchファイル(.pdeファイル)と同じフォルダに、fullscreen_api.pdeと、fullscreen_texturehelper.javaというファイルをコピーして、メインのsketchファイルのsetup()関数内に以下の３行を追加する。 setFullScreen( true );//ファイル実行直後に自動的にフルスクリーンにするかどうか setResolution( 640, 480 );//sketchファイルの解像度と合わせる。 createFullScreenKeyBindings()
Processingでフルスクリーン（fullscreen）表示にし、なおかつマウスカーソルも消す - Py
void setup(){...}のなか（じゃなくてもいいのかもしれないけど）に以下を追加 noCursor(); そんだけ
Processingでフルスクリーン（fullscreen）表示にする - Py
http://www.superduper.org/processing/fullscreen_api/ 1.上のサイトから、fullscreen.zipをだうんろ〜どする 2.解凍してできたfullscreenというフォルダを/processing/librariesに投げ込む 3.processingを起動 4.プログラムの上に import fullscreen.*; FullScreen fs; を追加 5.void setup(){...}のなかに以下を追加 fs = new FullScreen(this); fs.enter(); 6.おしまい 追記 ちなみにCtrl+Fで切り替え
Wiring
Wiring is an open-source programming framework for microcontrollers. Wiring allows writing cross-platform software to control devices attached to a wide range of microcontroller boards to create all kinds of creative coding, interactive objects, spaces or physical experiences. The framework is thoughtfully created with designers and artists in mind to encourage a community where beginners through
Mobile Processing
Mobile Processing is an open source programming environment for people who want to design and prototype software for mobile phones. It is based on and shares the same design goals as the open source Processing project. Sketches programmed using Mobile Processing run on Java Powered mobile devices. 9 Apr 2008 Mobile 0007 released! I've just released Mobile Processing 0007, which brings the PDE up
Processing.jsの使い方
最近にJohn ResigのProcessing.jsが出た。その面白いプロジェクトを使って、Processingのコードをウェブブラウサーで走られる。今から少しだけなぜ面白いと考えって、後で使い方を説明する（説明しようとする方かな）。 なぜProcessing.jsは面白い？その質問に[色々な答え]1あるけど、今は二つだけ言う。 最初、Processingの目的と仕方はとてもいい考えだけど、Javaのシンタクスはかなり使いにくいと思う。ずっと前から何かRubyやPythonのようなシンタクスがあればいいかなと思っていた。それで、JavaScriptが使えることを気について、ちょっと喜んだ。Processingの目的はなるべく簡単なプログラムを作ることだって、JavaScriptでJavaよりその夢ができると思う。 もちろん普通のProcessingのシンタクスも使えるけど、JavaScr
John Resig - Processing.js
As a sort-of reverse birthday present I’ve decided to release one of my largest projects, in recent memory. This is the project that I’ve been alluding to for quite some time now: I’ve ported the Processing visualization language to JavaScript, using the Canvas element. I’ve been working on this project, off-and-on now, for the past 7 months – it’s been a fun, and quite rewarding, challenge. The f
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ProcessingのようにビジュアルプログラミングできるSketchプラグイン「P5.sketchplugin」
Keyvan Minoukadeh
Google Search
Google Search