Convert Figma logo to code with AI

cinder logoCinder

Cinder is a community-developed, free and open source library for professional-quality creative coding in C++.

5,297
940
5,297
386

Top Related Projects

openFrameworks is a community-developed cross platform toolkit for creative coding in C++.

21,400

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

6,487

JUCE is an open-source cross-platform C++ application framework for desktop and mobile applications, including VST, VST3, AU, AUv3, LV2 and AAX audio plug-ins.

18,111

Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.

21,434

A simple and easy-to-use library to enjoy videogames programming

Quick Overview

Cinder is a free, open-source C++ library for creative coding, providing a powerful, intuitive toolset for programming graphics, audio, video, networking, image processing and computational geometry. It's designed to be intuitive and easy to use, while still offering the performance and flexibility of C++.

Pros

  • High-performance and efficient, leveraging C++'s speed and low-level control
  • Cross-platform support for Windows, macOS, and iOS
  • Rich set of features for multimedia and interactive applications
  • Active community and regular updates

Cons

  • Steeper learning curve compared to some other creative coding frameworks
  • Limited support for Linux platforms
  • Requires C++ knowledge, which may be challenging for beginners
  • Documentation could be more comprehensive for some advanced features

Code Examples

  1. Drawing a circle:
#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"
#include "cinder/gl/gl.h"

using namespace ci;
using namespace ci::app;

class BasicApp : public App {
public:
    void draw() override {
        gl::clear(Color(0.2f, 0.2f, 0.2f));
        gl::color(1, 0, 0);
        gl::drawSolidCircle(getWindowCenter(), 100);
    }
};

CINDER_APP(BasicApp, RendererGl)
  1. Playing an audio file:
#include "cinder/app/App.h"
#include "cinder/audio/audio.h"

using namespace ci;
using namespace ci::app;

class AudioApp : public App {
public:
    void setup() override {
        auto audioFile = audio::load(loadAsset("sample.mp3"));
        mVoice = audio::Voice::create(audioFile);
        mVoice->start();
    }

private:
    audio::VoiceRef mVoice;
};

CINDER_APP(AudioApp, RendererGl)
  1. Capturing webcam input:
#include "cinder/app/App.h"
#include "cinder/Capture.h"
#include "cinder/gl/gl.h"

using namespace ci;
using namespace ci::app;

class CaptureApp : public App {
public:
    void setup() override {
        mCapture = Capture::create(640, 480);
        mCapture->start();
    }

    void draw() override {
        if (mCapture && mCapture->checkNewFrame()) {
            mTexture = gl::Texture::create(*mCapture->getSurface());
        }
        if (mTexture) {
            gl::draw(mTexture);
        }
    }

private:
    CaptureRef mCapture;
    gl::TextureRef mTexture;
};

CINDER_APP(CaptureApp, RendererGl)

Getting Started

  1. Download Cinder from the official website: https://libcinder.org/download
  2. Extract the downloaded archive to a convenient location
  3. Set up your development environment (e.g., Visual Studio for Windows, Xcode for macOS)
  4. Create a new Cinder project using TinderBox (included with Cinder)
  5. Include Cinder headers in your project:
#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"
#include "cinder/gl/gl.h"
  1. Create a basic application structure:
class MyApp : public ci::app::App {
public:
    void setup() override;
    void update() override;
    void draw() override;
};

CINDER_APP(MyApp, ci::app::RendererGl)
  1. Build and run your project

Competitor Comparisons

openFrameworks is a community-developed cross platform toolkit for creative coding in C++.

Pros of openFrameworks

  • Larger community and more extensive documentation
  • Cross-platform support for mobile devices (iOS and Android)
  • More frequent updates and active development

Cons of openFrameworks

  • Steeper learning curve for beginners
  • Less performant in some scenarios compared to Cinder
  • Larger codebase and potentially more complex setup

Code Comparison

openFrameworks:

void ofApp::draw(){
    ofBackground(0);
    ofSetColor(255);
    ofDrawCircle(ofGetWidth()/2, ofGetHeight()/2, 100);
}

Cinder:

void CinderApp::draw()
{
    gl::clear(Color::black());
    gl::color(Color::white());
    gl::drawSolidCircle(getWindowCenter(), 100);
}

Both frameworks use similar syntax for basic drawing operations, but Cinder's API tends to be more concise and object-oriented. openFrameworks uses global functions (e.g., ofDrawCircle), while Cinder uses namespaced functions (e.g., gl::drawSolidCircle). The setup and structure of applications are also slightly different between the two frameworks.

21,400

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

Pros of p5.js

  • Web-based, runs in browsers without additional setup
  • Easier learning curve, especially for beginners
  • Large community and extensive documentation

Cons of p5.js

  • Performance limitations compared to native applications
  • Less suitable for complex, resource-intensive projects
  • Limited access to low-level system features

Code Comparison

p5.js:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  ellipse(50, 50, 80, 80);
}

Cinder:

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"
#include "cinder/gl/gl.h"

class BasicApp : public ci::app::App {
public:
    void draw() override {
        ci::gl::drawSolidCircle(ci::vec2(50, 50), 40);
    }
};

CINDER_APP(BasicApp, ci::app::RendererGl)

Both examples create a simple circle, but Cinder requires more setup and uses C++, while p5.js is more concise and uses JavaScript. p5.js is web-focused and easier for beginners, while Cinder offers better performance and more advanced features for desktop applications.

6,487

JUCE is an open-source cross-platform C++ application framework for desktop and mobile applications, including VST, VST3, AU, AUv3, LV2 and AAX audio plug-ins.

Pros of JUCE

  • Cross-platform audio development focus with extensive audio plugins support
  • Comprehensive GUI toolkit for creating rich user interfaces
  • Active community and regular updates

Cons of JUCE

  • Steeper learning curve for beginners
  • Larger codebase and potentially higher resource usage
  • More complex licensing structure

Code Comparison

JUCE example (audio processing):

void processBlock (AudioBuffer<float>& buffer, MidiBuffer& midiMessages) override
{
    ScopedNoDenormals noDenormals;
    auto totalNumInputChannels  = getTotalNumInputChannels();
    auto totalNumOutputChannels = getTotalNumOutputChannels();

    for (auto i = totalNumInputChannels; i < totalNumOutputChannels; ++i)
        buffer.clear (i, 0, buffer.getNumSamples());
}

Cinder example (graphics rendering):

void MyApp::draw()
{
    gl::clear( Color( 0.1f, 0.1f, 0.1f ) );
    gl::setMatricesWindowPersp( getWindowSize() );
    gl::enableAlphaBlending();
    
    mParticleSystem->draw();
}

Both JUCE and Cinder are powerful C++ frameworks, but they have different primary focuses. JUCE excels in audio development and cross-platform GUI creation, while Cinder is more oriented towards creative coding and visual applications. The choice between them depends on the specific requirements of your project.

18,111

Cocos2d-x is a suite of open-source, cross-platform, game-development tools utilized by millions of developers across the globe. Its core has evolved to serve as the foundation for Cocos Creator 1.x & 2.x.

Pros of cocos2d-x

  • Cross-platform support for mobile, desktop, and web
  • Extensive documentation and large community
  • Built-in physics engine and particle system

Cons of cocos2d-x

  • Steeper learning curve for beginners
  • Larger codebase and potentially slower compilation times
  • Less flexibility for low-level graphics programming

Code Comparison

Cocos2d-x (C++):

auto sprite = Sprite::create("sprite.png");
sprite->setPosition(Vec2(100, 100));
this->addChild(sprite);

Cinder (C++):

auto img = loadImage(loadAsset("sprite.png"));
auto tex = gl::Texture2d::create(img);
gl::draw(tex, vec2(100, 100));

Cocos2d-x focuses on a scene graph and node-based approach, while Cinder provides more direct access to OpenGL rendering. Cocos2d-x offers a higher-level API for game development, whereas Cinder gives developers more control over the rendering pipeline and is better suited for creative coding and interactive applications.

21,434

A simple and easy-to-use library to enjoy videogames programming

Pros of raylib

  • Simpler and more lightweight, making it easier for beginners to get started
  • Cross-platform support with a focus on mobile and web platforms
  • Extensive documentation and examples

Cons of raylib

  • Less feature-rich compared to Cinder, especially for advanced graphics
  • Smaller community and ecosystem

Code Comparison

Cinder (C++):

#include "cinder/app/App.h"
#include "cinder/app/RendererGl.h"
#include "cinder/gl/gl.h"

class BasicApp : public ci::app::App {
public:
    void draw() override {
        ci::gl::clear(ci::Color(0.2f, 0.3f, 0.4f));
    }
};

CINDER_APP(BasicApp, ci::app::RendererGl)

raylib (C):

#include "raylib.h"

int main(void)
{
    InitWindow(800, 450, "raylib [core] example");
    while (!WindowShouldClose())
    {
        BeginDrawing();
        ClearBackground(RAYWHITE);
        EndDrawing();
    }
    CloseWindow();
    return 0;
}

Both libraries provide simple ways to create windows and render graphics, but Cinder uses a more object-oriented approach with C++, while raylib offers a straightforward C API. raylib's syntax is generally more concise and easier to understand for beginners, while Cinder provides more flexibility and power for complex applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Cinder 0.9.3dev: libcinder.org

Cinder Logo

Cinder is a peer-reviewed, free, open source C++ library for creative coding.

Please note that Cinder depends on a few submodules. The simplest way to clone it is:

git clone --recursive https://github.com/cinder/Cinder.git

You might also prefer one of our pre-packaged downloads.

Cinder guides and reference documentation are available on the website.

Cinder supports macOS, Windows, Linux, and iOS. It requires Xcode 11.3.1 or later for development on the Mac, and Visual C++ 2019 or later on Windows.

Cinder is released under the Modified BSD License. Please visit our website for more information.

Also be sure to check out the User Forum.