Moving object from one place to another

1

Hi,

I am new to cinder and hence finding it difficult with the animation part. I want to move one object from one position to another. How do I do it?

Code written so far:

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"
#include "cinder/gl/gl.h"
#include "cinder/gl/Texture.h"
#include "cinder/Timeline.h"
#include "cinder\Rand.h"

using namespace ci;
using namespace ci::app;
using namespace std;

class CinderProjectApp : public App {
  public:
	void setup() override;
	void mouseDown( MouseEvent event ) override;
	void update() override;
	void draw() override;
	void prepareSettings(Settings *settings);

	gl::Texture2dRef mText, mRedTexture, mBackground, mWhiteDown;
	gl::Texture2dRef mWhiteTexture, mText1;

	Anim<Rectf> mWhite, mWhiteD, mRed, mRedD;
	Anim<vec2> mTextAnim1;
	vec2 PositionWhite, PositionWhiteD;
	Area AWhite;
};

void CinderProjectApp::prepareSettings(Settings *settings)
{
	settings->setWindowSize(768, 1920);
	settings->setFrameRate(30);
	//vec2 PositionWhite;
}

void CinderProjectApp::setup()
{
	setFullScreen(true);

#if defined( CINDER_COCOA_TOUCH )
	std::string normalFont("Arial");
	std::string boldFont("Arial-BoldMT");
	std::string differentFont("AmericanTypewriter");
#else
	std::string normalFont("Arial");
	std::string boldFont("Myriad Bold");
	std::string differentFont("Arial Rounded MT Bold");
#endif

	TextLayout layout;

	layout.setColor(Color(1.0f, 0.30f, 0.07f));
	layout.setFont(Font(differentFont, 90));
	layout.addLine("325,000");
	layout.setFont(Font(differentFont, 40));
	layout.addLine("  Subscriptions");
	layout.addLine("  globally");



	Surface8u rendered = layout.render(true, false);
	mText = gl::Texture2d::create(rendered);

	TextLayout layout1;
	layout1.setColor(Color(1, 1, 1));
	layout1.setFont(Font(normalFont, 120));
	layout1.addLine("   Bloomberg Professional");
	layout1.addLine("   Service");

	Surface8u rendered1 = layout1.render(true, false);
	mText1 = gl::Texture2d::create(rendered1);

	
	mBackground = gl::Texture::create(loadImage(loadAsset("bg with banner.jpg")));
	mWhiteTexture = gl::Texture::create(loadImage(loadAsset("White.jpg")));
	mRedTexture = gl::Texture::create(loadImage(loadAsset("Red.jpg")));

	mTextAnim1 = vec2(getWindowWidth(),getWindowHeight()/4-115);

	//mWhite = Rectf(10.0, 100.0, getWindowWidth() - 100, getWindowHeight() / 4 + 100);
	
	//mWhiteDown = gl::Texture::create(loadImage(loadAsset("White.jpg")));

}

void CinderProjectApp::mouseDown(MouseEvent event)
{
	Rectf areaS1(vec2(10.0, 100.0), vec2(10.0, getWindowHeight() / 4 + 100));
	Rectf areaF1(vec2(10.0, 100.0), vec2(getWindowWidth() - 100, getWindowHeight() / 4 + 100));
	timeline().apply(&mWhite, areaS1, areaF1, 1.0f, EaseInOutSine());

	timeline().apply(&mRed, areaS1, areaF1, 0.7f, EaseInCubic()).appendTo(&mWhite, -0.4);

	timeline().apply(&mTextAnim1, vec2(getWindowWidth() - 1000, getWindowHeight() / 4 - 115), vec2(0.0, getWindowHeight() / 4 - 115), 0.8, EaseInQuad()).appendTo(&mRed, -0.5);

	mWhite = Rectf(10.0, 100.0, getWindowWidth() - 100, getWindowHeight() / 4 + 100);


	mWhiteD = mWhite;

	//PositionWhiteD = PositionWhite;

	



}

void CinderProjectApp::update()
{
	AWhite = Area(10, 100, getWindowWidth() - 100, getWindowHeight()/4+100);

}

void CinderProjectApp::draw()
{
	gl::setMatricesWindow(getWindowSize());
	gl::enableAlphaBlending(true);

	gl::clear( Color( 0.0, 0.1, 0 ) ); 
	gl::draw(mWhiteTexture, mWhite);
	gl::draw(mRedTexture, mRed);
	gl::draw(mText1, mTextAnim1);
	
}

CINDER_APP( CinderProjectApp, RendererGl )

I want the mWhiteTexture to move downwards and resize into smaller.

Could you guys please help?

2

Hi,

welcome to Cinder. I have replied to a similar post of you here.

-Paul